　　　　　　　　　　　　　　　　　　检测对象

　　　　受ES5的显示，Vuejs不能检测到对象属性的添加或删除。因为Vuejs在初始化时候将属性转化为getter/setter，所以属性必须在data对象才能让Vuejs转换它，才能让它是响应的，例如：

var data = { a: 1 }
var vm = new Vue({data: data
})
// `vm.a` 和 `data.a` 现在是响应的

vm.b = 2
// `vm.b` 不是响应的

data.b = 2
// `data.b` 不是响应的

　　　　不过，有办法在实例创建之后添加属性并且让它是响应的。对于Vue实例，可以使用$set(key,value)实例方法：

vm.$set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的

　　　　对于普通数据对象，可以使用全局方法Vue.set(object, key, value):

Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的

　　　　有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 添加属性。但是，添加到对象上的新属性不会触发更新。这时可以创建一个新的对象，包含原对象的属性和新的属性：

// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

　　　　相关demo:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form id="demo"><!-- text --><p><input type="text" v-model="name" v-on:focus="storeName" v-on:blur="checkName">姓名</p><!-- checkbox --><p><input type="checkbox" v-model="checked">{{checked ? "yes" : "no"}}</p><!-- radio buttons --><p><input type="radio" name="picked" value="one" v-model="picked"><input type="radio" name="picked" value="two" v-model="picked">{{picked}}</p><!-- select --><p><select v-model="selected"><option>one</option><option>two</option></select>
              {{selected}}</p><!-- multiple select --><p><select v-model="multiSelect" multiple><option>one</option><option>two</option><option>three</option></select>
              {{multiSelect}}</p><p><pre>data: {{$data | json 2}}</pre></p></form></body><script src="js/vue.js"></script><script>new Vue({el: '#demo',data: {name      : 'hi!',checked  : true,picked   : 'one',selected : 'two',oldName :'',multiSelect: ['one','three']},methods:{storeName : function(){this.oldName=this.name;this.isClick=true;},checkName : function(){var newName=this.name.replace(/(^\s*)|(\s*$)/g,'');console.log('this.name:  '+this.name);console.log('this.oldName:  '+this.oldName);console.log('newName:  '+newName);}}})
</script>
</html>

　　　　该demo的结果：

参考资源：https://segmentfault.com/a/1190000005832164#articleHeader0

转载于:https://www.cnblogs.com/mujinxinian/p/5685851.html

vue.js学习笔记(1)相关推荐

Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
Vue.js 学习笔记八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><p v-for="n in 5 ...
Vue.js 学习笔记七控制样式
Vue.js可以灵活的控制样式我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...

vue.js学习笔记(1)

检测对象

vue.js学习笔记(1)相关推荐

最新文章

热门文章