vue.js 入门精要

废话不多说,直接上干货

vue的核心:修改数据(model),html节点就会自动更新

(1)绑定数据:

Js代码  

1. var vm;  
2.         var count=1;  
3.         $(function () {  
4.             vm=new Vue({  
5.                 el: '#demo',  
6.                 data: {  
7.                     message: 'Hello World!',  
8.                     number: 2,  
9.                     ok:true,  
10.                     name:'whuang'  
11.                 }  
12.             });  
13.             vm.$watch('data', function (newVal, oldVal) {  
14.                 console.log('$watch');  
15.             })  
16.         });  

 html代码:

Html代码  

1. <div id="demo">  
2.     {{ message }}<br>  
3.     {{ number + 1 }}<br>  
4.     {{ ok ? 'YES' : 'NO' }}<br>  
5.     {{ message.split('').reverse().join('') }}<br>  
6.     {{ name | uppercase }}  
7.     <hr>  
8.     <input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >  
9. </div>  

(2)动态更新数据

Js代码  

1. var updateData2= function () {  
2.            vm.$data.message="更新后的数据"+(count++);  
3.            vm.$data.ok=false;  
4.        };  

 如何获取vue的data?

 

注意:data前面要加$

(3)vue表达式 

Html代码  

1. {{ number + 1 }}<br>  
2.     {{ ok ? 'YES' : 'NO' }}<br>  
3.     {{ message.split('').reverse().join('') }}<br>  
4.     {{ name | uppercase }}  

动态修改样式:

Html代码  

1. <input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >  

 在js方法中修改ok的值即可

(4)vue计算属性

Js代码  

1. var vm = new Vue({  
2.                 el: '#example',  
3.                 data: {  
4.                     a: 1  
5.                 },  
6.                 computed: {  
7.                     // 一个计算属性的 getter  
8.                     b: function () {  
9.                         // `this` 指向 vm 实例  
10.                         return this.a + 1  
11.                     },  
12.                     upper: function () {  
13.                         return "<span style='color:red' >school</span>".toUpperCase();  
14.                     },  
15.                     haha: function () {  
16.                         return 'iloveyou'.split('');  
17.                     }  
18.                 }  
19.             })  

 html代码:

Html代码  

1. <div id="example">  
2.     a={{ a }}, b={{ b }}<br>  
3.     {{{ upper }}}<br>  
4.     {{ haha }}<br>  
5. </div>  

(5)监听数据的变化

 执行结果:

new:更新后的数据1;old:Hello World!

(6)如何获取vue的节点和数据

节点:vm.$el

数据:vm.$data