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>