● 引入vue.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js测试程序</title> <script src="vue.min.js"></script> </head> </html>
● v-model。双向绑定
<body> <div id="app"> {{name}} <input type="text" v-model="num1"/> + <input type="text" v-model="num2"/> =
<!-- 插值表达式 --> <!--{{Number.parseInt(num1) + Number.parseInt(num2)}}--> <span v-text="Number.parseInt(num1) + Number.parseInt(num2)"/> <button>计算</button> </div> </body> <script> var VM = new Vue({ el: '#app', data: { name: 'java程序员', num1: 1, num2: 1, result: 0 } }); </script>
● v-text。避免加载页面时显示插值表达式
<body> <div id="app"> {{name}} <input type="text" v-model="num1"/> + <input type="text" v-model="num2"/> = <!-- 插值表达式 --> <!--{{Number.parseInt(num1) + Number.parseInt(num2)}}--> <!-- v-text避免加载页面时显示插值表达式 --> <span v-text="Number.parseInt(num1) + Number.parseInt(num2)"/> <button>计算</button> </div> </body> <script> var VM = new Vue({ el: '#app', data: { name: 'java程序员', num1: 1, num2: 1, result: 0 } }); </script>
● v-on。监听事件
<body> <div id="app"> {{name}} <input type="text" v-model="num1"/> + <input type="text" v-model="num2"/> = <span v-text="result"></span> <button v-on:click="change">计算</button> </div> </body> <script> var VM = new Vue({ el: '#app', data: { name: 'vue测试', num1: 0, num2: 0, result: 0 }, methods: { change: function () { this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2) } } }); </script>
● v-bind。绑定数据（可省略v-bind）
<body> <div id="app"> <a v-bind:href="url"> <span v-text="name"></span> </a> <input type="text" v-model="num1"/> + <input type="text" v-model="num2"/> = <span v-text="result"></span> <button v-on:click="change">计算</button> <div v-bind:style="{ fontSize: size + 'px' }">vue测试</div> </div> </body> <script> var VM = new Vue({ el: '#app', data: { name: 'java程序员', num1: 0, num2: 0, result: 0, url: "http://www.baidu.com", size: "15" }, methods: { change: function () { this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2) } } }); </script>
● v-for
<body> <div id="app"> <ul> <li v-for="(item,index) in userlist" :key="item.user.name"> <div v-if="item.user.name=='lihua'" style="background-color: #00a4ff"> {{index}}--{{item.user.name}}--{{item.user.age}} </div> <div v-else> {{index}}--{{item.user.name}}--{{item.user.age}} </div> </li> </ul> </div> </body> <script> var VM = new Vue({ el: '#app', data: { userlist: [ {user: {name: 'xiaoli', age: 10}}, {user: {name: 'lihua', age: 11}} ] }, }); </script>
● v-if。决定某个html元素是否存在
<body> <div id="app"> <ul> <li v-for="(item,index) in userlist" :key="item.user.name"> <div v-if="item.user.name=='lihua'" style="background-color: #00a4ff"> {{index}}--{{item.user.name}}--{{item.user.age}} </div> <div v-else> {{index}}--{{item.user.name}}--{{item.user.age}} </div> </li> </ul> </div> </body> <script> var VM = new Vue({ el: '#app', data: { userlist: [ {user: {name: 'xiaoli', age: 10}}, {user: {name: 'lihua', age: 11}} ] }, }); </script>