即通过Vue实现常见的网页效果。学习Vue指令，以案例巩固知识点，Vue指令是指v-开头的一组特殊语法。
设置标签的文本值（textContent）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h3 v-text="message">被替换了</h3> <h3>{{message}}差值表达式写法</h3> <h3 v-text="message+'!'">被替换了</h3> <h3>{{message+'！！！'}}差值表达式写法</h3> </div> <script> var app = new Vue({ el:"#app", data:{ message:"Text", } }) </script> </body> </html>效果如图：
v-text指令的作用是：设置标签的内容（textContent）。默认写法会替换全部的内容，使用差值表达式{{}}可以替换指定内容。内部支持表达式。设置标签的innerHtml。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h3 v-html="message">被替换了</h3> <h3 v-text="message">被替换了</h3> </div> <script> var app = new Vue({ el:"#app", data:{ message:"<a href=http://www.baidu.com>百度一下</a>", } }) </script> </body> </html>效果如图：
内容中有html结构会被解析为标签。v-text指令无论内容是什么只会解析为文本。会元素绑定事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>点击一下加一个感叹号</p> <input type="button" value="v-on指令" v-on:click="changeName"> <input type="button" value="v-on简写" @click="changeName"> <p v-text="Name"></p> </div> <script> var app = new Vue({ el:"#app", data:{ Name:"程序员", }, methods:{ changeName:function(){ console.log(this.Name) this.Name+="!" } } }) </script> </body> </html>效果如图：
事件名不需要写on。（onclick➡v-on:click）指令可以简写为@。（v-on:click➡@click）绑定的方法定义在methods属性中。方法内部通过this关键字访问定义在data里的数据。