一起学Vue之模板语法
概述
vue.js 使用了基于 html 的模板语法，允许开发者声明式地将 dom 绑定至底层 vue 实例的数据。所有 vue.js 的模板都是合法的 html ，所以能被遵循规范的浏览器和 html 解析器解析。
普通文本
数据绑定最常见的形式就是使用“mustache[小胡子]”语法 (双大括号) 的文本插值，无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
1 <span>{{msg}}</span>
通过使用 v-once 指令，执行一次性插值，当数据改变时，内容不会更新。
1 <span v-once>这个将不会改变: {{ msg }}</span>
输出html
双大括号会将数据解释为普通文本，而非 html 代码。为了输出真正的 html，你需要使用 v-html 指令：
1 <!-- 普通文本 -->
2 <p>using mustaches: {{ rawhtml }}</p>
3 <!-- html解析 -->
4 <p>using v-html directive: <span v-html="rawhtml"></span></p>
注意：你的站点上动态渲染的任意 html 可能会非常危险，因为它很容易导致 xss 攻击。请只对可信内容使用 html 插值，绝不要对用户提供的内容使用插值。
特性
mustache 语法不能作用在 html 特性上，遇到这种情况应该使用 v-bind 指令：
1 <div v-bind:id="dynamicid">我的id是{{dynamicid}}</div>
2
3 <button v-bind:disabled="isbuttondisabled">button</button>
注意：如果 isbuttondisabled 的值是 null、undefined 或 false， 则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。 只有为true ,才被渲染。
使用 javascript 表达式
不仅能绑定简单的属性键值，还提供了完全的 javascript 表达式支持。
如下所示：
1 html{{ number + 1 }}
2 <br />
3 {{ ok ? 'yes' : 'no' }}
4 <br />
5 {{ message.split('').reverse().join('') }}
6 <br />
7 <div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>
注意： 每个绑定都只能包含单个表达式，语句不会生效。
指令
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 dom。这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
1 <p v-if="seen">现在你看到我了</p>
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 html 特性：
1 <a v-bind:href="url" target="_blank">点击链接baidu</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 另一个例子是 v-on 指令，它用于监听 dom 事件：
1 <button v-on:click="dosomething">点击弹出框</button>
动态参数
你可以使用动态参数为一个动态的事件名绑定处理函数：在这个示例中，当 eventname 的值为 "focus" 时，v-on:[eventname] 将等价于 v-on:focus。
1 <a v-bind:[attributename]="url" target="_blank"> 点击我进入 </a> 2 <br /> 3 <a v-on:[eventname]="dosomething"> ... </a>
注意，参数表达式的写法存在一些约束：
在 dom 中使用模板时 (直接在一个 html 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：在 dom 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。 除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventdefault()：
1 <a v-bind:href="url" target="_blank" v-on:click.prevent="dosomething">点击链接baidu</a>
指令缩写
vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
1 <!-- v-bind 缩写 --> 2 <!-- 完整语法 --> 3 <a v-bind:href="url" target="_blank">完整写法</a> 4 <!-- 缩写 --> 5 <a :href="url" target="_blank">缩写法</a> 6 <!-- v-on 缩写 --> 7 <!-- 完整语法 --> 8 <button v-on:click="dosomething">完整写法</button> 9 <!-- 缩写 --> 10 <button @click="dosomething">缩写法</button>
关于本例子中的完整代码，如下所示：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>一起学vue</title>
6 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8
9 </head>
10 <body>
11 <div id="app">
12 <!--
13 vue.js 使用了基于 html 的模板语法，允许开发者声明式地将 dom 绑定至底层 vue 实例的数据。
14 所有 vue.js 的模板都是合法的 html ，所以能被遵循规范的浏览器和 html 解析器解析。
15 -->
16 <h2>普通文本</h2>
17 <!--
18 数据绑定最常见的形式就是使用“mustache[小胡子]”语法 (双大括号) 的文本插值，无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新
19 -->
20 <span>{{msg}}</span>
21 <br />
22 <!--
23 通过使用 v-once 指令，执行一次性插值，当数据改变时，内容不会更新。
24 -->
25 <span v-once>这个将不会改变: {{ msg }}</span>
26 <h2>输出html</h2>
27 <!--
28 双大括号会将数据解释为普通文本，而非 html 代码。为了输出真正的 html，你需要使用 v-html 指令：
29 你的站点上动态渲染的任意 html 可能会非常危险，因为它很容易导致 xss 攻击。
30 请只对可信内容使用 html 插值，绝不要对用户提供的内容使用插值。
31 -->
32 <!-- 普表文本 -->
33 <p>using mustaches: {{ rawhtml }}</p>
34 <!-- html解析 -->
35 <p>using v-html directive: <span v-html="rawhtml"></span></p>
36 <h2>特性</h2>
37 <!--
38 mustache 语法不能作用在 html 特性上，遇到这种情况应该使用 v-bind 指令：
39 -->
40 <div v-bind:id="dynamicid">我的id是{{dynamicid}}</div>
41 <!--
42 如果 isbuttondisabled 的值是 null、undefined 或 false，
43 则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
44 只有为true ,才被渲染
45 -->
46 <button v-bind:disabled="isbuttondisabled">button</button>
47 <h2>使用 javascript 表达式</h2>
48 <!--
49 每个绑定都只能包含单个表达式，语句不会生效。
50 我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，vue.js 都提供了完全的 javascript 表达式支持。
51 -->
52 html{{ number + 1 }}
53 <br />
54 {{ ok ? 'yes' : 'no' }}
55 <br />
56 {{ message.split('').reverse().join('') }}
57 <br />
58 <div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>
59 <!-- 这是语句，不是表达式 -->
60 <!-- {{ var a = 1 }} -->
61
62 <!-- 流控制也不会生效，请使用三元表达式 -->
63 <!-- {{ if (ok) { return message } }} -->
64 <h2>指令</h2>
65 <!--
66 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 dom。
67 这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
68 -->
69 <p v-if="seen">现在你看到我了</p>
70 <h2>参数</h2>
71 <!--
72 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 html 特性：
73 -->
74 <a v-bind:href="url" target="_blank">点击链接baidu</a>
75 <!--
76 在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
77 另一个例子是 v-on 指令，它用于监听 dom 事件：
78 -->
79 <br />
80 <button v-on:click="dosomething">点击弹出框</button>
81 <h2>动态参数</h2>
82 <!--
83 注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
84 -->
85 <a v-bind:[attributename]="url" target="_blank"> 点击我进入 </a>
86 <!--
87 你可以使用动态参数为一个动态的事件名绑定处理函数：
88 在这个示例中，当 eventname 的值为 "focus" 时，v-on:[eventname] 将等价于 v-on:focus。
89 -->
90 <br />
91 <a v-on:[eventname]="dosomething"> ... </a>
92 <!--
93 在 dom 中使用模板时 (直接在一个 html 文件里撰写模板)，还需要避免使用大写字符来命名键名，
94 因为浏览器会把 attribute 名全部强制转为小写：
95 在 dom 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
96 除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
97
98 -->
99 <h2>修饰符</h2>
100 <!--
101 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
102 例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventdefault()：
103 -->
104 <a v-bind:href="url" target="_blank" v-on:click.prevent="dosomething">点击链接baidu</a>
105 <h2>缩写</h2>
106 <!--
107 vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
108 -->
109 <!--
110 v-bind 缩写
111 -->
112 <!-- 完整语法 -->
113 <a v-bind:href="url" target="_blank">完整写法</a>
114 <br />
115 <!-- 缩写 -->
116 <a :href="url" target="_blank">缩写法</a>
117 <br />
118 <!--
119 v-on 缩写
120 -->
121 <!-- 完整语法 -->
122 <button v-on:click="dosomething">完整写法</button>
123 <br />
124 <!-- 缩写 -->
125 <button @click="dosomething">缩写法</button>
126 </div>
127 <script type="text/javascript">
128 var app=new vue({
129 el:'#app',
130 data:{
131 msg:'hello world!!!',
132 rawhtml:'<span style="color:red;"> 这应该是红色</span>',
133 dynamicid:'div001',
134 isbuttondisabled:true,
135 number:4,
136 ok:true,
137 message:'welcome to vue!!!',
138 id:'01',
139 seen:true,
140 url:'http://www.baidu.com',
141 attributename:'href',
142 eventname:'click'
143 },
144 methods:{
145 dosomething:function(){
146 alert('hello world!!!');
147 }
148 }
149 });
150 </script>
151 </body>
152 </html>
备注
学而时习之，不亦悦乎！
下一篇： PHP变量的初始化以及赋值方式介绍