1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>特殊指令</title> 8 <script src="vue.js"></script> 9 </head> 10 <body> 11 12 13 14 <div id="app"> 15 <!-- v-once 只能渲染一次。const --> 16 17 <!-- v-bind----vue提供的特殊指令：表示将这个元素的节点title特性和vue实例的aaa属性保持一致 --> 18 <span v-bind:title="aaa"> 19 鼠标悬停几秒钟查看此处动态绑定的提示信息！ 20 </span> 21 22 <!-- v-if控制切换一个元素是否显示 --> 23 <p v-if='seen'>现在你看到我了</p> 24 25 <!-- 特殊指令v-for='todo in 循环数组的名称' 绑定数组的数据来渲染一个列表 --> 26 <ol> 27 <li v-for='todo in todos'> 28 {{todo.text}} 29 </li> 30 </ol> 31 32 <!-- v-on添加事件监听器 --> 33 <p>{{content}}</p> 34 <button v-on:click="reverseContent">反转内容</button><!-- 当点击按钮时触发reverseContent函数 --> 35 36 <!-- v-model 实现表单输入和应用状态之间的双向绑定 --> 37 <p>{{main}}</p> 38 <input type="text" v-model="main"> 39 </div> 40 41 <script> 42 // vue基础操作语法，特殊指令介绍 43 var app = new Vue({ 44 el: '#app', 45 data: { 46 // v-bind 47 aaa: '页面加载于'+new Date().toString(), 48 // 控制台输出app.message="" app.name="" app.aaa="" ,页面会响应式变化 49 50 // v-if 51 seen: true, 52 //控制台输出app.seen=false p元素在页面中就看不到了 记住此处不能加引号 53 54 // v-for 55 todos: [ 56 {text: '学习js'}, 57 {text: '学习vue'}, 58 {text: '好事'} 59 ], 60 //在控制台输入app.todos.push({text:'新li'})，就可以在页面列表中添加一条新项 61 62 // v-on绑定事件 63 content: '我爱学习', 64 65 // v-model表单和p标签内容双向绑定 66 main: '请输入内容' 67 }, 68 methods:{ 69 reverseContent:function() { 70 this.content = this.content.split('').reverse().join('') 71 } 72 } 73 }); 74 75 </script> 76 </body> 77 </html>