2021-03-17

Vue 基础使用

指令，插值

• 插值，表达式
• 指令，动态属性
• v-html：这个会有 XSS 风险，会覆盖子组件 （用了之后内部自己写的所有代码块都会被覆盖，失效）

computed（计算） 和 watch（监听）

• computed 有缓存，data不变则不会重新计算（缓存意味着不用重复加载）当 dom 是通过 v-model 绑定时 要 get() 和 set() 否则会报错

• watch 本身是浅度监听 如何深度监听？
  要用到 handler 以及 deep : true 深度监听 引用数据类型 拿不到 oldVal 因为它是指针式

class 和 style

• 可以通过 :class="{ }" 或者 :class="[ ]" 使用class
• style 也可以 :style=“自定义的样式对象” 注意写法要用驼峰

条件渲染

• v-if v-else 的用法，可以使用变量，也可以使用 === 表达式
• v-if 和 v-show 的区别？ v-if 和 v-show 的使用场景？
  v-if 是判定 dom的加载/销毁 v-show 是显示/隐藏 如果条件只是用一次 用 v-if 多次用 c-show

循环（列表）渲染

• 如何遍历对象？
  循环数组 参数有 item 和 index （数组内有id作为唯一标识）
  循环对象 参数 有 val key index （key 必须具有类似 id 的唯一性）
• key 的重要性 key 不能乱写 （如 random 或者 index）
  key 代表了唯一性 增强了性能
• v-for 和 v-if 不能一起使用！
  不建议一起用 for 的优先级会更高 每一遍都会进行判定 影响性能

事件

• event 参数，自定义参数
  $event 作为参数传递即可 vue的 event 是一个原生的 原型对象 没有经过任何装饰
• 事件修饰符，按键修饰符
• 【观察】事件被绑定在哪里？
  事件修饰符
  

表单

• v-model
• 常见表单项 textarea checkbox radio select
• 修饰符 laze number trim
  trim 去除前后空格
  laze 类似防抖输入时驱动 输入完成时驱动双向数据绑定
  number 转化为数字

Vue组件使用

• 父组件传给子组件

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

通过props实现。
 - 在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值
 - 在子组件通过props:[“自定义属性名”]来接收数据

• 子组件传递给父组件

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

通过$emit实现
 1.  在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法
 2. 在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法

• 兄弟组件的传值

<div id="itany">
    <my-a></my-a>
    <my-b></my-b>
    <my-c></my-c>
</div>
<template id="a">
  <div>
    <h3>A组件：{{name}}</h3>
    <button @click="send">将数据发送给C组件</button>
  </div>
</template>
<template id="b">
  <div>
    <h3>B组件：{{age}}</h3>
    <button @click="send">将数组发送给C组件</button>
  </div>
</template>
<template id="c">
  <div>
    <h3>C组件：{{name}}，{{age}}</h3>
  </div>
</template>
<script>
var Event = new Vue();//定义一个空的Vue实例
var A = {
    template: '#a',
    data() {
      return {
        name: 'tom'
      }
    },
    methods: {
      send() {
        Event.$emit('data-a', this.name);
      }
    }
}
var B = {
    template: '#b',
    data() {
      return {
        age: 20
      }
    },
    methods: {
      send() {
        Event.$emit('data-b', this.age);
      }
    }
}
var C = {
    template: '#c',
    data() {
      return {
        name: '',
        age: ""
      }
    },
    mounted() {//在模板编译完成后执行
     Event.$on('data-a',name => {
         this.name = name;//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
     })
     Event.$on('data-b',age => {
         this.age = age;
     })
    }
}
var vm = new Vue({
    el: '#itany',
    components: {
      'my-a': A,
      'my-b': B,
      'my-c': C
    }
});    
</script>

组件生命周期

• beforeCreate 创建前
• created 创建后
• beforemount 挂载前
• mounted 挂载后
• beforeUpdate 数据更新前
• updated 数据更新后
• beforeDestroy 实例销毁前
• destroyed实例销毁后