使用时请注意以下几点：
插值表达式是vue框架提供的【指令】插值表达式中 不可以写代码片段 会报错属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性（下篇文章讲） 代码演示：<!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> <!-- 1.导入包 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 2.添加id为app的div，将来要被vue控制--> <div id="app"> <!-- 注意 这是{{}} 其实是vue框架提供的【指令】 --> <!-- {{}} 语法 叫做 插值表达式 --> <p>{{msg}}</p> <hr> <p>{{msg.length}}</p> <hr> <p>{{msg + '~~~~~'}}</p> <hr> <p>{{dlag ? '条件为真' : '条件为假'}}</p> <hr> <!-- 插值表达式中 不可以写代码片段 会报错--> <!-- <p>{{for(var i = 0 ; i < 5 ; i++){}}}</p> --> <h1 title="hello">娃哈哈</h1> <!-- 3.注意属性节点中不能使用插值表达式 --> <!-- 如果要为元素节点动态绑定数据，我们要用其他方法 --> <!-- <h1 title="{{msg}}">娃哈哈</h1> --> </div> <!-- 注意如果指令想要生效，必须放在vue控制的区域内 --> <!-- <h1>{{msg}}</h1> --> <script> // 3.创建vue实例对象，并指定要控制的页面区域 const vm = new Vue({ // VM 实例对象，会监听data中，每一项数据的变化， // 只要监听到了数据的改变，就会重新把el指定区域中的所有指令 // 从新解析一遍 el:'#app',// 要控制页面上的哪个区域 data:{//表示页面上要渲染的数据 msg:'Hello XiaoMeiZi!', flag:true } }) </script> </body> </html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
