vuejs的使用-组件

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,'做作业')
}

数据的更新检测

1. 在使用methods中的函数往往会对data中数组的数据进行操作，
   会出现没有实现响应式的情况，（console输出数据发现变化了，但视图没有变化），
   主要是data中数组的数据未检测到变化，没有触发setter函数，从而导致后续的render渲染函数未执行。

2. 解决：使用会返回新数组的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
    })
}