【Vue】基础（生命周期 & 常用指令）

生命周期

一个Vue实例是一个对象，对象就会有生命周期，一个Vue实例会经历下面以下生命周期。

1. 实例初始化 - 初始化事件 & 生命周期

2. 创建 - 数据观测（data observer）& 观察事件配置

3. 挂载 - 视图渲染

4. 更新 - 若数据发生变更触发重新渲染视图

5. 销毁 - 组件因为切换或内部调用vm.$destroy()方法

Vue在这个生命周期的几个阶段提供了钩子函数，方便在这个过程添加自己代码做一些处理

1. 创建前/后 ：beforeCreate/created
2. 挂载前/后 ：beforeMount/mounted
3. 更新前/后 ：beforeUpdate/updated
4. 销毁前/后 ：beforeDestroy/destroyed

钩子	$data绑定	$el绑定	渲染页面
beforeCreate	否	否	否
created	是	否	否
beforeMount	是	是	否
mounted	是	是	是
beforeUpdate	是	是	否
updated	是	是	是
beforeDestroy	是	是	否
destroyed	否	否	否

验证代码

<template>
  <div id="app">
    <h1 @click='clear'>{{message}}</h1>
    <img alt="Vue logo" src="./assets/logo.png" />
  </div>
</template>
<script>

export default {
  name: "App",
  data() {
    return { message: "Wilson Pan" };
  },
  methods: {
    clear() {
      this.$destroy();
    }
  },
  beforeCreate() {
    console.log("-----beforeCreate start------");
    console.log("$el : " + this.$el);
    console.log("$data : " + this.$data);
    console.log(this.$data);
    console.log("-----beforeCreate end------");
  },
  created() {
    console.log("-----created start------");
    console.log("$el : " + this.$el);
    console.log("$data : " + this.$data);
    console.log(this.$data);
    console.log("-----created end------");
  },
  beforeMount() {
    console.log("-----beforeMount start------");
    console.log("$el : " + this.$el);
    console.log("$data : " + this.$data);
    console.log(this.$el);
    console.log(this.$refs);

    debugger; // eslint-disable-line no-debugger

    console.log("-----beforeMount end------");
  },
  mounted() {
    console.log("-----mounted start------");
    console.log("$el : " + this.$el);
    console.log("$data : " + this.$data);
    console.log(this.$el);
    console.log(this.$refs);
    this.message = "Alice";
    console.log("-----mounted end------");
    debugger; // eslint-disable-line no-debugger
  },
  beforeUpdate() {
    console.log("-----beforeUpdate start------");
    console.log("$el : " + this.$el);
    console.log("$data : " + this.$data);
    console.log("-----beforeUpdate end------");
    debugger; // eslint-disable-line no-debugger
  },
  updated() {
    console.log("-----updated start------");
    console.log("$el : " + this.$el);
    console.log("$data : " + this.$data);
    console.log("-----updated end------");
    debugger; // eslint-disable-line no-debugger
  },
  beforeDestroy() {
    console.log("-----beforeDestroy start------");
    console.log("$el : " + this.$el);
    console.log("$data : " + this.$data);
    console.log("-----beforeDestroy end------");
    debugger; // eslint-disable-line no-debugger
  },
  destroyed() {
    console.log("-----destroyed start------");
    console.log("$el : " + this.$el);
    console.log("$data : " + this.$data);
    console.log("-----destroyed end------");
    debugger; // eslint-disable-line no-debugger
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

常用指令

•  v-text

官方：更新元素的文本textContent
注意：会对内容进行编译，特殊字符编译成转义字符，保证是文本 

<span v-text="message"></span>
<br />
<button v-text="buttonText" />

• v-html

官方：更新元素的 innerHTML
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

<span v-html="message"></span>

•  v-show

官方：根据表达式之真假值，切换元素的 display CSS 属性
注意：false 还是会创建元素，只是元素的display:none

<h3>v-show</h3>
<span v-show="showText">你看得到我</span>
<span v-show="!showText">你看不到我</span>

• v-if/v-else-if/v-else

官方：根据表达式的值的真假来有条件地渲染元素
注意：false 不会创建元素

<h3>v-if</h3>
<span v-if="showText">你看得到我</span>
<span v-if="!showText">你看不到我</span>

• v-for

官方: 基于源数据多次渲染元素或模板块
注意：必须使用特定语法 alias in expression，为当前遍历的元素提供别名

<h3>v-for</h3>
待学内容
<ul>
    <li v-for="(item, index) in todoList" :key="item.id">{{index+1}} - {{ item.name }}</li>
</ul>

• v-on

缩写：@
官方：绑定事件监听器

<h3>v-on</h3>
<button v-on:click="clickMe">点击事件</button>
<button @click="clickMe">缩写点击</button>
<button @[buttonEvent]="clickMe">动态事件</button>
<button @click.once="clickMe">只触发一次</button>
<button @click.left="clickMe">鼠标左键点击</button>
<button @click.right="clickMe">鼠标右键点击</button>

• v-bind

缩写：:
官方: 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

• v-model

官方：在表单控件或者组件上创建双向绑定

<input v-model="message" placeholder="edit me">

转发请标明出处：https://www.cnblogs.com/WilsonPan/p/12732803.html