Vue常用指令及声明周期

知识点

• Vue 常用指令
• Mixin 混入
• Vue 生命周期函数

前端开发环境配置

Vue 的开发形式有多种，有 script 标签引入的形式，也有脚手架启动 web 服务的形式。

一般我们都是采用脚手架的形式学习，如下所示：（已安装可忽略）

下载完之后，通过如下指令查看安装的版本：

 vue --version 

通过此脚手架初始化一个 Vue 项目：

vue create demo1

按照步骤都选择 Yes 或者默认的便可，新建项目需要一些时间。

通过如下命令启动 demo1 项目：

cd demo1

npm run serve

待项目启动之后，点击右侧边栏「Web 服务」，打开浏览器如下所示，说明开发环境配置成功了：

清空 App.vue 文件里的代码，我们开始学习 Vue 指令。

v-text && v-html

• 相同点

都能展示数据，且属于单向绑定。即数据的变化会影响插值的变化，而插值的变化，不会影响数据的变化。其实 v-text 也可以简写为 { { }} 。

• 不同点

v-text：只能渲染纯文本，浏览器不会对其进行 html 解析。

v-html：用于输出 html，浏览器会解析 html。

下面通过代码实例来验证，打开 App.vue 代码如下：

<template>
<div id="app">
  <p>{
  { text }}</p>
  <p>{
  { html }}</p>
  
  <p v-text="text"></p>
  <p v-text="html"></p>
  
  <p v-html="html"></p>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        text: '大家好，我是xxx',
        html: '<strong>大家好，我是xxx</strong>',
      };
    },
  };
</script>

<style></style>0

v-if、v-else && v-show

• 相同点

通过变量控制标签内容的显示或隐藏。

• 不同点

v-if 在浏览器上表现为整个 DOM 节点不会被渲染；

v-show 的呈现形式相当于给 DOM 节点添加了一个 CSS 属性 — display: none ；

v-else 则类似 JS 语法的 if else 判断语句，需要紧跟在 v-if 后面。

下面通过代码实例来验证，App.vue 代码如下：

<template>
<div id="app">
  <p v-if="isShow">我是coder one</p>
  <p v-else>我是coder two</p>
  
  <p v-if="!isShow">我是code one</p>
  <p v-else>我是coder two</p>
  
  <p v-show="!isShow">我是消失的coder</p>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        isShow: true,
      };
    },
  };
</script>

<style></style>

打开浏览器，展示效果

v-for

v-for 指令解决的是模板循环渲染问题，没有 Vue、React 等框架之前都是通过 for 循环拼接字符串的形式，通过 append 将拼接好的节点塞入指定的 DOM 节点。现在有了 v-for 指令，就不用这么麻烦了，得到数组之后，只需以 (item, index) in array 的形式渲染数据。

下面是代码演示：

<template>
  <div id="app">
    <div v-for="(item, index) in list" :key="index">{
  { index }}{
  { item }}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      list: ['小红', '小明', '小智', '小刚'],
    };
  },
};
</script>

<style></style>

浏览器展示效果如下：

index 数组对象所对应的索引值，渲染模版的时候如果需要做一些逻辑运算的时候，会用到这个索引值，比如只让索引值为偶数的项进行渲染，就可以结合之前的 v-if、v-show 指令去实现需求。

小知识 1：v-for 和 v-if 不要一起使用

v-for 的优先级高于 v-if ，当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环。比较好的解决方式是，先通过 computed 属性将需要渲染的列表提前过滤，再将过滤后的列表放到模板中渲染，这样做的目的是让页面渲染效率更高，避免不必要的资源浪费。

小知识 2： v-for 可以渲染 Object 类型数据

比如上述例子我们可以改成如下：

<template>
  <div id="app">
    <div v-for="(val, key, index) in listObj" :key="index">
      {
  { index }}{
  { val.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      listObj: {
        hong: {
          name: '小红',
        },
        ming: {
          name: '小明',
        },
        zhi: {
          name: '小智',
        },
        gang: {
          name: '小刚',
        },
      },
    };
  },
};
</script>

<style></style>

v-on

v-on 就是监听事件，可以用 v-on 指令监听 DOM 事件来触发一些方法函数。

v-on 有一种简写形式，用 @ 符号代替。它还能监听一些键盘事件，如键盘的回车键 v-on:keyup.enter 等，大家可以类推其他的键盘事件。

下面就来看看代码示例：

<template>
  <div id="app">
    <p>数字：{
  { count }}</p>
    <button v-on:click="add">加</button>
    <input v-model="username" v-on:keyup.enter="login" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      count: 1,
      username: '',
    };
  },
  methods: {
    add: function () {
      this.count++;
    },
    login: function () {
      console.log(this.username);
    },
  },
};
</script>

<style></style>

效果如下：

v-model

在 Vue 的众多指令里，v-model 算是举足轻重的，因为它的双向绑定特性，能解决很多业务上的复杂需求，下面就用几个小示例来诠释它的强大，代码演示如下：

1、最简单的双向绑定

<template>
<div id="app">
  <p>用户名：{
  { username }}</p>
  <input v-model="username" />
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        username: '',
      };
    },
  };
</script>

<style></style>

2、结合复选框

<template>
  <div id="app">
    <h2>checkbox</h2>
    <label for="apple">苹果</label>
    <input type="checkbox" v-model="fruit.apple" value="apple" />
    <label for="banana">香蕉</label>
    <input type="checkbox" v-model="fruit.banana" value="banana" />
    <br />
    {
  { fruit }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      fruit: {
        apple: true,
        banana: false,
      },
    };
  },
};
</script>

<style></style>

结合复选框实现切换复选框内的值，动态地改变数据

3、结合单选框

<template>
<div id="app">
  <h2>radio</h2>
  <label for="male">男</label>
  <input type="radio" v-model="sex" value="男" />
  <label for="female">女</label>
  <input type="radio" v-model="sex" value="女" />
  <br />
  {
  { sex }}
  </div>
</template>

<