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