vue的使用:组件
组件就是vue实例中的配置项
配置项 el
var vm = new Vue({
el: '#app',
})
//el为一个挂载点,绑定一个DOM元素,相当于把DOM元素放到Vue实例中,可以使用通过指令,mustache语法来操作它
//另一种写法为
new Vue({
}).$mount("#app")
配置项data
data: {
msg: 'hello vue.js',
num: 10,
str: 'I hate you ~~',
arr: [ 1,2,3,4 ],
obj: {
id: 1,
name: 'yyb',
age: 18
},
json: [
'aa',
{
id: 1,
text: '睡觉'
},
{
id: 2,
text: '敲代码'
}
]
}
//data用来存放数据,支持不同的数据类型,在别的配置项中使用必须要通过this关键字
//可以直接在指令或mustache语法中直接使用
配置项 methods
methods: {
//这里面存放的都是事件的处理程序
add () {//添加data中属性的值
this.json.push({
id: 3,
text: '打篮球'
})
},
notChange () {//修改data中属性的值
// this.json[0] = '做作业' 不能实现响应式,因为没有触发setter,从而无法执行render函数
// Vue.set(this.json,0,'做作业')
//this.$set(this.json,0,'做作业')
}
数据的更新检测
-
在使用methods中的函数往往会对data中数组的数据进行操作,
会出现没有实现响应式的情况,(console输出数据发现变化了,但视图没有变化),
主要是data中数组的数据未检测到变化,没有触发setter函数,从而导致后续的render渲染函数未执行。 -
解决:使用会返回新数组的api或手动使用set函数
push() pop() shift() unshift() splice() sort() reverse(),返回修改后的数组
//例:删除数组的所有内容 this.arr.splice(0,this.arr.length)
filter(), concat() 和 slice() ,map(),新数组替换旧数组
Vue.set(example1.items, indexOfItem, newValue)//手动调用set方法,
vm.items[indexOfItem] = newValue无法实现数组的修改。
computed 计算属性
//这里存放的也是方法,但是这个方法是有返回值的,并且方法名还可以当做一个变量(相当于直接在data里面定义的数据)来使用
changeJson () {
return this.json.filter( item => {
return item.id>1
})
}