VUE学习笔记整理（二）

上一篇笔记：https://blog.csdn.net/ws19900201/article/details/98875039

vue指令

v-show
v-if v-else
v-for
@click
v-text
v-html
v-bind:href :href
v-model
v-once

vue 生命周期+组件

beforeCreate 未生成
created 生成 有属性和方法
beforeMount 挂载前
mounted 已经挂载
beforeUpdate
update 修改完成
activated
deactivated
beforeDestroy 卸载前
destroyed 卸载
errorCaptured

父子组件传值：

（在子组件调用父组件的值）

//父组件（fuqin）: attr1
<erzi :attr1="attr1"></erzi>

//子组件（erzi）:attr2 
{
   {
   attr1}}
prop:["attr1"]

// props: {
   
  //   attr1: {
   
  //     type: String,
  //     attr1: "attr1",
  // 	 default: "STRING"
  //   }
  // },

（在父组件调用子组件的值）

//父组件（fuqin）: attr1
{
   {
   attr2}}
<erzi  @world="getdata"></erzi>
data(){
   
  return{
   
    attr2:''
  }
}
getdata(attr2){
   
  this.attr2 = attr2
}

//子组件（erzi）:attr2 
<button @click="send">发送</button>

send(){
   
  this.$emit("world",this.arrt2)
}

（加载后直接传值）

mounted(){
   
  this.$emit("world",this.arrt2)
}

（兄弟组件传值）

<comp1></comp1>

<comp2></comp2>

var event = new Vue({
   });

//comp1:
{
   {
   attr2}}