vue，vue生命周期，vue-cli

vue-cli

• npm install vue-cli -g
• vue init webpack my-project
• npm install 生成package.json
• npm run dev 本地运行 或 npm run build 上线(生成dist文件夹)

vue生命周期

•     beforeCreate  => el与data并未初始化        => 可以在这加loading事件。
•     created          => 完成了data数据的初始化。    => 做一些初始化，实现函数自执行。
•     beforeMount   => 完成了el和data初始化
•     mounted          => 完成挂载                   => 向后端发起请求，取回数据，配合路由钩子做事
•     beforeDestory
•     destoryed                                   => 当前组件已被删除，清空相关内容。
•     beforeUpdate
•     updated

• props -> 声明父组件中传递给子组件的数据
• data -> 声明组件中数据
• components -> 声明 要使用的组件名称，要 提前引入 本组件 import。。。
• methods -> 定义函数的方法 与 @click等一起使用
• computed -> 计算某一（未声明）属性，值为该函数的返回值
• watch -> 观测属性的变化执行相应的操作，（与computed区别在于，该属性变化未必改变别的属性，有可能执行什么函数操作）
• filters -> 返回一个与函数参数有关的值

双向绑定的原理

Object.defineProperty()

var key = '';
var obj = {};
Object.defineProperty(obj,key,{
    set:function(value){
        key = value;
    },
    get:function(){
        return key;
    }
}

vue数组添加属性，视图不刷新

数组的单项变化，视图是不刷新的，要使用

• vue.set(target,key,value)
• this.$set(target,key,value)

改变数组的操作是更新视图的（push,pop,splice...）

不改变原数组的操作是不更新视图的（concat,slice,join）

nextTick

将回调延迟到DOM更新循环之后执行；

获取DOM

<div ref='goods'></div>

this.$refs.goods,

该DOM是子组件的话还可以使用子组件中的methods