vue的使用：组件
组件就是vue实例中的配置项
配置项 el
var vm
= new Vue({
el
: '#app',
})
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
})
}
