1 v-text和v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 关联数据 v-text --> <p>{{ message }}</p> <p v-text="user.name"></p> <p v-text="user.password"></p> <!-- 关联数据 v-html --> <p v-html="thtml"></p> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） message: ‘Hello lizi!‘, user: { name: ‘lizi‘, password: ‘123456‘ }, thtml: "<span style=‘color: red‘>测试 innerhtml</span>" } }) </script> </body> </html>
2 事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-on:事件名=“方法名” --> <!-- @事件名=“方法名” --> <input type="button" v-on:click="login" value="v-on登录"> <br> <input type="button" @click="login" value="@登录"> <!-- 测试数据被this调用改变 --> <p @click="changeMsg">{{ message }}</p> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） message: ‘Hello lizi!‘, user: { name: ‘lizi‘, password: ‘123456‘ }, thtml: "<span style=‘color: red‘>测试 innerhtml</span>" }, methods: { login(){ alert("login sucess") }, // 方法中调用数据 changeMsg(){ this.message = "message 数据已经被改变" } } }) </script> </body> </html>
3 一个小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-on:事件名=“方法名” --> <!-- @事件名=“方法名” --> <input type="button" @click="mySub" value="-"> <span>{{ myNum }}</span> <input type="button" @click="myAdd" value="+"> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） myNum: 0, }, methods: { myAdd(){ if(this.myNum < 3){ this.myNum = this.myNum + 1; } else { alert("最多买3个"); } }, // 方法中调用数据 mySub(){ if(this.myNum > 0){ this.myNum = this.myNum - 1; } else { alert("不能小于0"); } } } }) </script> </body> </html>
原文：https://www.cnblogs.com/lizitestdev/p/14645312.html