一、学习八个声明周期函数
beforeCreate() {
// 实例生成之前会自动执行函数
},
created() {
// 在实例生成之后会自动执行函数
},
beforeMount() {
// 在组件内容被渲染到页面上之前自动执行函数
},
mounted() {
// 在组件内容被渲染到页面上之后自动执行函数
},
beforeUpdate() {
// 当页面上数据发生变化之后会立即自动执行函数
},
updated() {
// 当数据发生变化,页面自动渲染后,会自动执行函数
},
beforeUnmount(){
// 当Vue应用失效时,自动执行函数
},
Unmount(){
// 当Vue应用失效时且 dom完全销毁之后。自动执行函数
}
二、属性
data & metgods & computend & watcher
computed 和 method 都能实现的一个功能建议使用 computed 因为有缓存
computed和 watcher都能实现的功能建议使用computed 因为更加简洁
//用于编写函数 只要页面重新渲染他才会重新计算
methods(){}
//用于计算 当计算属性的属性内容发生变更时,才会重新计算
//methods属性只要页面重新渲染他才会重新计算
computend(){}
// 监听数据的改变
watch:{
//prev 之前的值,current 现在的值
//prev发生变化时会执行
price(current,prev){
}
}
三、样式绑定
:class="对象名"
//代表父组件上面的class属性
:class="$attrs.class"
//行内样式
:style=""
四、指令
//条件语句 句子必须挨在一起
v-if
v-else if
v-else
//和v-if一样显示与隐藏,但是是隐藏不是把dom销毁
v-show
//绑定语句指令 用于绑定值
v-bind 简写 :
//绑定事件
v-on 简写 @
//
v-html、v-text
//双向绑定(一方值改变另一方也会改变)
v-model
//循环渲染
v-for="item in list"或者 v-for(item,index) in list
//如果是对象
v-for(value,key,index) in list
如果循环的时候有些值是一样的,就用 :key="index" 绑定一个唯一的key,这样如果可以复用的话可以提升vue的性能
五、修饰符
如果第一层div有@click,第二层也有@click 那么两个都会执行,如果不想让第一层的click执行就在第二个上面加上一个修饰符
@click.stop或者在第一个上面加上@click.self