随笔- 178 文章- 0 评论- 10 阅读- 72072

Vue 模板语法 && 数据绑定

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <title>模板语法</title>
 6         <script type="text/javascript" src="../js/vue.js"></script>
 7     </head>
 8     <body>
 9 <!--         
10     Vue模板语法有2大类：
11         1.插值语法：
12             功能：用于解析标签体内容
13             写法：{{xxx}}，xxx是js表达式，且可以直接读取到data的内容
14         2.指令语法：
15             功能：用于解析标签（包括标签属性、小钱体内容、绑定事件……）
16             写法：v-bind:href="xxx" 或者 简写为：:href="xxx"，xxx同样要是js表达式
17  -->
18         <div id="root">
19             <h1>插值语法</h1>
20             <h3>你好，{{name}}</h3>
21             <hr/>
22             <h1>指令语法</h1>
23             <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}</a>
24             <a :href="school.url" x="hello">点我去{{school.name}}1</a> <!-- "v-bind:"的简写 -->
25         </div>
26     </body>
27 
28     <script type="text/javascript" >
29         Vue.config.productionTip = false;//     阻止 vue 在启动时生成生产提示。
30         new Vue({
31             el: '#root',
32             data:{
33                 name: 'jack',
34                 school:{
35                     name: '深圳大学',
36                     url: 'https://www.baidu.com'
37                 }
38             }
39         })
40     </script>
41 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <title>数据绑定</title>
 6         <script type="text/javascript" src="../js/vue.js"></script>
 7     </head>
 8     <body>
 9 <!--         
10     Vue中2中数据绑定方式：
11         1.单项绑定(v-bind)：数据只能从data流向页面。
12         2.双向绑定(v-model)：数据不近可以从data流向页面，还可以从页面流向data。
13             备注：
14                 1.双向绑定一般都应用在表单元素上（如：input、select等）
15                 2.v-model:value 可以简写为 v-model，因为v-model默认手机的就是value的值。
16  -->
17         <div id="root">
18             单项数据绑定：<input type="text" v-bind:value="name"><br/>
19             双项数据绑定：<input type="text" v-model:value="name"><br/>
20             双项绑定简写：<input type="text" v-model="name"><br/>
21 
22             <!-- 
23                 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上  
24                 <h2 v-model:x="name">hello</h2> 
25             -->
26         </div>
27     </body>
28 
29     <script type="text/javascript" >
30         Vue.config.productionTip = false;//     阻止 vue 在启动时生成生产提示。
31         new Vue({
32             el: '#root',
33             data:{
34                 name: 'jack'
35             }
36         })
37     </script>
38 </html>