09. [基础]插值表达式和v-bind数据绑定
通过前两节内容终于学完了 Vue3.x 中的生命周期函数了,因为这套教程默认你是没有 Vue2.x 的基础的,所以就不讲解 Vue2 和 Vue3 生命周期的区别了,你只要记住 Vue3 的 8 个生命周期就可以了。这节我们主要学习两个模板语法:插值表达式和 v-bind 的使用。
插值表达式是什么?
我以前在教程中经常说的字面量
,其实正确叫法应该叫做插值表达式
,当然我们公司大部分还是叫字面量
的,也就是我们经常看到的{{xxxx}}
这样的东西。
我们复制上节的代码,新建一个Demo9.html
,然后去掉生命周期相关的内容,这样就变成了一个简单的 Vue 代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo7</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ data() { return { message: 'mybj123.com' } }, methods: { handleItemClick() { this.message = this.message == 'mybj123.com' ? "码云笔记" : "mybj123.com" } }, template: "<h2 v-on:click='handleItemClick'>{{message}}</h2>" }) const vm = app.mount("#app") </script> </html>
这时候我们看到在template
属性中的{{message}}
就是插值表达式。也就是说利用这种形式,可以使用 data 中的变量,展示在模板中。
插值表达式输出 html 标签 v-html 指令
如果我想在变量里,编写一些 html 的标签,然后输出展现在页面中,这时候会出现点小问题。我们先修改代码,看看问题所在。例如在 message 中加入<i>
标签。
return { message: '<i>mybj123.com</i>' }
这时候如果什么都不做,直接输出,你在浏览器中看到的结果就是下面的样子。
<i>mybj123.com</i>
这并不是你想要的结果,这时候需要使用v-html
的标签解决这个问题。把 template 属性的部分改成下面的样子。需要注意的是这里要改成"`"
符号,否则不能使用双引号这种形式
template: `<h2 v-html="message"> </h2>`
这时候再预览,就可以看到浏览器中的字变成了斜体。
插值表达式只作一次渲染 v-once
现在这种插值表达式,是跟着 data 中的数据一起变化的,也就是我们常说的数据双向绑定。但是如果我希望一个插值表达式,只有在第一次渲染取 data 中的值,而以后不再跟随 data 变化,这时候就要用到v-once
指令。
先来看一下目前这种代码,我们为h2
标签,加入相应事件handleItemClick
,代码如下。
template: `<h2 v-on:click="handleItemClick" v-html="message"> </h2>`
这时候在浏览器中可以看到,我们每点击一次 h2 标签,message
的值都是变化的。再改写一下代码。
template: `<h2 v-on:click="handleItemClick" v-html="message" v-once > </h2>`
加入了v-once
后,无论 data 中的数据如何变化,模板也不会再次重新渲染了,这就是v-once
的变化。
插值表达式中是可以使用 JS 表达式的
其实在插值表达式中是可以使用 JS 表达式的,最常用的表达式是三元运算符。比如下面这样的代码也是可以的。我们在 data 中新声明一个变量count
,用三元运算符判断是否是大于 2,如果大于 2 显示大,小于 2 显示小,编写代码如下:
<script> const app = Vue.createApp({ data() { return { message: '<i>mybj123.com</i>', count: 5 } }, methods: { handleItemClick() { this.message = this.message == 'mybj123.com' ? "码云笔记" : "mybj123.com" } }, template: `<h2 v-on:click="handleItemClick" v-html="message" v-once></h2> <div>{{count>2?'大':'小'}}</div>` }) const vm = app.mount("#app") </script>
当然你也可以使用一些简单的表达式,比如下面这些样子的 JS 表达式.
<div>{{'mybj123'+'.com'}}</div> <div>{{1+2}}</div>
这些形式的表达式都是可以的,但是如果你想用 if 语句,就是不可以的,因为只能用 JS 表达式而不能用语句。
v-bind 指令的使用
现在我们给 h2 标签加入一个 title 属性,属性的值也想使用message
。代码如下:
<h2 v-on:click="handleItemClick" v-html="message" v-once title="message" > </h2>`
这时候浏览器中鼠标放上时显示的确实message
这个单词,而并没有出现我们想要的结果。这时候就可以使用v-bind
标签了。写成下面的样式就可以了。
v-bind:title="message"
现在来总结一下,本文我们先学习了插值表达式和一些特殊情况的用法,从而引出了v-html
指令、v-once
指令和在插值表达式中使用 JS 表达式,然后又学习了v-bind
指令。
码云笔记 » 09. [基础]插值表达式和v-bind数据绑定