双花括号文本插值
先来个最简单的例子，看完之后立马会用Vue了，是不是很有成就感
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引用官网的Vue.js库 --> <script src="https://unpkg.com/vue"></script> </head> <body> <!-- HTML部分 --> <div id="app-1"> <!-- “mustache” 语法（双花括号）的文本插值 --> <span>{{ content }}</span> </div> <!-- JS部分 --> <script type="text/javascript"> var vm1 = new Vue({ el: '#app-1', //关联元素 data: { content: 'Hello, TanSea!' //变量赋值 } }) </script> </body> </html>
https://unpkg.com/vue是官方的地址，直接引用能随时保持使用的是最新版本，但是缺点是外国的网站，访问速度有点慢。当然也可以下载到本地来使用
这里Vue对象实例化仅仅给了2个参数，el(元素)和data(数据)，其他的参数在后面的笔记中会说明
在浏览器的控制台输入vm1.content = 'Hello, World'，对变量进行重新赋值，页面上的值也跟着一起变更。如果只需要第一次绑定，不要后续变更，可以使用v-once指令
给span标签添加v-once指令
<!-- HTML部分 --> <div id="app-1"> <!-- 当变量发生变更时，内容不会随着更新 --> <span v-once>{{ content }}</span> </div>
Vue的所有指令约定都是以v-开头，包括之后的自定义指令也推荐使用这种命名习惯
原始HTML
<!-- HTML部分 --> <div id="app-2"> <span v-html="rawHtml"></span> </div> <!-- JS部分 --> <script type="text/javascript"> var vm2 = new Vue({ el: '#app-2', data: { rawHtml: '<div style="color: red">Hello, TanSea!</div>' } }) </script>
v-html指令直接插入原始HTML，直接插入HTML代码容易受到XSS攻击，不建议使用
属性
在HTML属性中无法使用“mustache” 语法了，需要使用v-bind指令，这也是Vue使用得最多的指令
<!-- HTML部分 --> <div id="app-3"> <a v-bind:href="url" v-bind:target="target">双子宫殿</a> </div> <!-- JS部分 --> <script type="text/javascript"> var vm3 = new Vue({ el: '#app-3', data: { url: 'http://www.tansea.cn', target: '_blank' } }) </script>
使用v-bind指令绑定HTML属性，给HTML属性插值
JavaScript表达式
<!-- HTML部分 --> <div id="app-4"> <span :id="'site-' + (id + 1)">{{ isVisible ? '我是可见的' : '我是隐藏的' }}</span> </div> <!-- JS部分 --> <script type="text/javascript"> var vm4 = new Vue({ el: '#app-4', data: { id: 1, isVisible: true } }) </script>
这里，我们看到了一个陌生的东西:id，他其实就是v-bind:id的简写方式
通过表达式的计算，span标签最终的结果是
<span id="site-2">我是可见的</span>
Vue目前只支持单条表达式，所以以下的示例都无法运行
<!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也无法运行，请使用三元表达式 --> {{ if (ok) { return message } }}
如果熟悉拉姆达表达式的话，这一块的内容就很好理解了
双向绑定
双向绑定是Vue的一个最主要的功能，他能很方便的实现实时预览的效果
<!-- HTML部分 --> <div id="app-5"> <p>{{ content }}</p> <input v-model:value="content"> </div> <!-- JS部分 --> <script type="text/javascript"> var vm5 = new Vue({ el: '#app-5', data: { content: 'TanSea' } }) </script>
将input标签的值属性双向绑定到content上，当input标签的值属性发生改变时，p标签也会同步发生改变