Vue

411 阅读2分钟

一、学习八个声明周期函数

  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