<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src=‘./libs/vue-2.4.0.js‘></script> </head> <body> <!--Vue实例所控制的这个元素区域 就是MVVM中的v --> <div id="app"> <p>{{msg}}</p><!--和art—template类似 不过这里直接msg就好 不用写上data.mes--> </div> <script> //而我们new出来的这个VM对象 就是MVVM中的 VM调度者 var vm=new Vue({ //创建一个Vue实例 el:‘#app‘, //element元素 表示当前我们new出来的Vue实例 要控制页面上的哪个区域 //这里的data就是MVVM中的V 专门用来保存每个页面的数据的 data:{ //data属性中,存放的是el中要用到的数据 msg:‘123‘ } //通过Vue提供的指令 很方便能把数据渲染到页面上 不再需要操作DOM元素 }) </script> </body> </html>
插值表达式语法：{{}}
插值表达式是vue框架提供的【指令】
插值表达式中 不可以写代码片段 会报错 <!-- <p>{{for(var i = 0 ; i < 5 ; i++){}}}</p> -->
属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性 <!-- <h1 title="{{msg}}">娃哈哈</h1> -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <!-- 字符串 --> <p>{{ str }}</p> <!--页面展示：字符串--> <p>{{ num + ‘aaa‘}}</p><!--页面展示：1aaa--> <p>{{ str.length }}</p> <!--页面展示：3--> <!-- 数值 --> <p>{{ num }}</p> <!--页面展示：1--> <p>{{ num+num1 }}</p> <!--页面展示：101--> <p>{{ num > num1 }}</p> <!--页面展示：false--> <p>{{ num.toFixed(2) }}</p> <!--页面展示：1.00--> <!-- boolean --> <p>{{ flag }}</p> <!--页面展示：true--> <!-- 数组 --> <p>{{ arr }}</p> <!--页面展示：[1,2,3,4]--> <p>{{ arr[3] }}</p> <!--页面展示：4--> <!-- 对象 --> <p>{{ obj }}</p> <!--页面展示：{ "name": "tom", "age": 20 }--> <p>{{ obj.name }}</p> <!--页面展示：tom--> <!-- null/undefined/NaN --> <p>{{ arg1 }}</p> <!--页面展示：--> <p>{{ arg2 }}</p> <!--页面展示：--> <p>{{ arg3 }}</p> <!--页面展示：NaN--> <!-- 三目运算符 --> <p>{{ num > num1 ? "是" : "否" }}</p> <!--页面展示：否--> </div> <script> new Vue({ el:"#app", data:{ str: ‘字符串‘, num: 1, num1:100, flag: true, arr: [1,2,3,4], obj:{ name:‘tom‘, age:20 }, arg1: null, arg2: undefined, arg3: NaN } }) </script> </body> </html>
<style> [v-cloak]{ display:none; } </style> </head> <body> <div id="app"> <!--使用v-cloak能够解决 差值表达式的闪烁问题 必须搭配style里的display:none--> <p v-cloak>{{msg}}</p> <h4 v-text=‘msg‘> <!--v-text默认是没有闪烁问题的自然不需要display属性 但是会覆盖掉元素中原本的内容 而v-cloak的差值表达式 只会替换掉自己的占位符--> </h4> </div>
原文：https://www.cnblogs.com/yundong333/p/11322739.html