一起学Vue之模板语法
程序员文章站
2022-08-08 13:19:41
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 ......
概述
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>
备注
学而时习之，不亦悦乎！