上QQ阅读APP看书,第一时间看更新
2.1 文本插值
Vue.js里面的数据绑定,可以理解为属性内容的显示,属性内容在Vue.js中data里面定义,通过数据绑定形式显示在页面上。
对于程序开发人员来讲,data里面定义的属性可以理解为变量。
数据绑定最常见的形式就是使用{{属性名}}的文本插值,这里“属性名”左边和右边是双大括号。{{…}}中填写的就是我们在Vue.js中data里定义的属性名。我们在微信小程序中也是使用该语法。
注意 这种方式只能显示不带html代码的属性值,可以理解为双大括号的数据绑定写法{{}}会被Vue当成纯文本输出,如果要解析带html内容的属性,请使用2.2节所讲的v-html指令。
下面举例说明如何使用{{}}(左右双大括号)来显示属性值,步骤如下:
1)在script的data代码块中定义变量,代码如下:
data: { message: '黄菊华老师,Hello Vue.js!' //定义属性message的值 }
2)在html视图的Vue代码块中显示,代码如下:
<div id="app"> <!--显示属性(变量)message:“Hello Vue.js!”--> <p>{{ message }}</p> </div>
完整代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模板语法-数据绑定-文本插值</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div代码块的id的值,这里定义的值为app,后面Vue会使用该值--> <div id="app"> <!--显示属性(变量)message:“Hello Vue.js!”--> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app',//app为前面div代码块的id的值,通过“#”绑定 //data区域定义属性的值 data: { message: '黄菊华老师,Hello Vue.js!' //定义属性message的值 } }) </script> </body> </html>
效果如图2-1所示。
图2-1 显示属性值