实例
1.数据同步
// 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 ,两者数据保持同步 var vm = new Vue({ data: data }) // 他们引用相同的对象! console.log(vm.a === data.a); //.a === data.a // => true // 设置属性也会影响到原始数据 vm.a = 2 console.log(data.a) // => 2 // ... and vice-versa data.a = 3 console.log(vm.a) // => 3
Vue的属性data可以引用外部对象。数据同步
实例方法:$watch 以$开头的函数
/* * Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: */ console.log('--------------') var data2 = { a: 1 } var vm = new Vue({ el: '#example', data: data2 }) console.log(vm.$data === data2) // => true console.log(vm.$el === document.getElementById('example')) // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 alert(543); }) vm.a=123;
2.实例的生命周期
var vue1 = new Vue({ el:'#div1', data: { a: 1 }, //事件的绑定,成员发生改变 updated : function(){ alert('vue1 is updated') // console.log('update..'); }, created: function () { // this 指向 vm 实例 alert('vue1 is created') console.log('a is: ' + this.a) } }); // => "a is: 1" $('#btnUpdate').click(function(){ vue1.a='hello world'; })
3.属性绑定
<div id="div2" v-bind:id="dynamicId"></div>
<div id="div1" v-html="msg"></div> 将div标签内的内容加载进去,可以解析
4.表达式解析
<div id="div1"> {{1==1?'yes':'no' }} <br /> {{msg}}<br /><br /> 可以使用vue的数据和JS的函数,msg.split(' '),<br /> 变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组<br /> push() pop() shift() unshift() splice() sort() reverse()<br /> {{msg.split(' ')}} <br /> </div>
5.指令
指令 (Directives) 是带有 v- 前缀的特殊属性。
指令属性的值预期是单个 JavaScript表达式
(v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,
将其产生的连带影响,响应式地作用于 DOM。
v-if 可预见性
<div id="div1" v-if="seen"> 指令 v-if </div><br />
v-bind 属性绑定
<div id="div2"> <a v-bind:href="link">连接到</a> </div>
v-on 时间绑定
<div id="div3"> <button v-on:click="fun">dosomething</button> </div>
//另一个例子是 v-on 指令,它用于监听 DOM 事件: //<a v-on:click="doSomething"> var app3=new Vue({ el:'#div3', data:{ a:1 }, event:{ fun:function(){ alert(123) } } });
6.计算属性和观察者
计算属性:
与函数的区别:
- 不同的是计算属性是基于它们的依赖进行缓存的。
- 如果依赖数据没有改变,那么不在执行函数,直接返回该属性值
- 这也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:
var vm=new Vue({ el:'#example', data:{ message:'hello world' }, computed:{ reversedMessage:function(){ console.log('setter....') return this.message.split('').reverse().join(','); } }, methods:{ //我们可以将同一函数定义为一个方法而不是一个计算属性 //程序结束时,会被调用一次,利用栈的原理 fun1:function(){ console.log('methods fun 被调用了...') return 'hello'; } } }); //这里我们声明了一个计算属性 reversedMessage。 //我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数: console.log('后'+vm.reversedMessage) // => 'olleH' vm.message = 'Goodbye' //如果message发生改变,那么计算属性会重新计算 console.log('后'+vm.reversedMessage) // => 'eybdooG'
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
var vm=new Vue({ el:'#example', data:{ firstName:'bob', lastName:'admin' }, computed:{ fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } });
观察者:
watch:
question:function(){}
当vue data的属性变量,发生变化时,自动执行watch函数
var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: '请输入用户名!' }, watch: { // 如果 question 发生改变,这个函数就会运行 question: function (newQuestion) { // this.answer = '等待输入中..' //alert(newQuestion) this.getAnswer() } }, methods: { getAnswer:function(){ if(this.question.length<4||this.question.length>10){ this.answer='用户名长度必须为5-9位'; } else { this.answer='符合条件' } }
7.绑定class
三种方式:
<script> // al $(function(){ var app1=new Vue({ el:'#div1', data:{ isActive:true, } }); var app1=new Vue({ el:'#div2', data:{ isActive:true, //可以使用,比较方便 info:{ red:true, size:true } } }) }) </script> </head> <body> <div id="div1" class="static" v-bind:class="{ active: isActive }"></div> 可以使用对象 <div id="div2" class="static" v-bind:class="info"></div> 数组用法 <div v-bind:class="[{ active: isActive }, errorClass]"></div> </body> </html>
8.列表渲染
数组for
items:[
{message:'Foo'},
{message:'Bar'}
]
<ul id="ul1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
<ul id="ul2"> <li v-for="(index,item) in items"> {{ item.message }}--{{index}} </li> </ul>
修改data: vue.items[1]={message:'new values'}
对象属性:
data:{ object:{ a:'mon', b:'admin', c:123 }, users:[ {name:'admin',age:'33'}, {name:'bob',age:'23'} ] }
<ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> <li v-for="(value,key) in object"> {{ value }} -{{key}} </li> <li v-for="value in users"> {{ value.name }} -{{value.age}} </li>