vue2个人总结（实时更新）

一. 初识Vue

1. hello vue

        原生js想必我们已不陌生，比如我们想展示一段信息

  <div id="message"></div>

  <script>
    let message = 'hello!!!'
    const m = document.getElementById("message")
    m.innerHTML = message
  </script>

        这种编程方式是命令式编程，缺点显而易见，缺乏灵活性和可扩展性，不适用于大型复杂的系统，而声明式编程来解决这个问题。下面用一段代码来简单表现vue这种声明式编程方式

<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',  // 用于挂载要管理的元素
    data: {
      // 定义数据
      message: 'hello vue！'
    }
  })
</script>

2. vue的生命周期

        生命周期： 事物从诞生到消亡的整个过程

Vue的生命周期：

        指Vue实例从开始创建、初始化数据、编译模板、 挂载Dom→渲染、更新→渲染、卸载等一系列过程，应用过程中我们常会用到他的8个钩子函数，分别是创建前（beforecreate）、创建后（created）、挂载前（berofeMount），挂载后（mounted），更新前（beforeUpdate），更新后（updated ）和 销毁前（beforeDestroy），销毁后（destroyed）

二. 插值操作

1. 文本

        数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ message }}</span>

        mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式，仅限作用与内容区，不能动态修改属性值

<h2>{{message}}, {{firstName + lastName}}</h2>

data: {
        message: "你好啊",
        firstName: "猪",
        lastName: "八戒"
      }

2. v-once

        v-once指令，当数据改变时，插值处的内容不会更新

<div id="app" v-once>{{message}}</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello vue！'
    }
  })
  app.message = '猪八戒'
// 显示hello vue！
</script>

3. v-html

        双大括号会将数据解释为普通文本，为了输出html代码，需要使用v-html指令

  <div id="app">
    <h2>{{url}}</h2> 
  <!-- <a href='https://www.baidu.com'>百度一下</a> -->

    <h2 v-html="url"></h2> 
   <!--   百度一下  -->
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好啊",
        url: "<a href='https://www.baidu.com'>百度一下</a>"
      }
    })

        但是建议不要这样做，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

4. v-text

        显示文本，一般不用，因为不够灵活，会覆盖掉原本的文本内容

  <div id="app">
    <h2>{{message}}, 猪八戒</h2> 
<!-- 你好啊，猪八戒 -->

    <!-- 一般不用，不够灵活，会覆盖掉文本内容 -->
    <h2 v-text="message">猪八戒</h2>  
<!-- 你好啊 -->
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好啊"
      }
    })

5. v-pre

        不解析"Mustache"语法，将其原封不动的显示出来

  <div id="app">
    {{message}}
    <h2 v-pre>{{message}}</h2>
    <!-- {{message}} -->
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好啊"
      }
    })

6. v-cloak

        这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  <style>
    [v-cloak] {
      display: none;
    }
  </style>

  <div id="app" v-cloak>{{message}}</div>

  <script src="../js/vue.js"></script>
  <script>
    setTimeout(() => {
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊"
        }
      })
    }, 1000);
  </script>

三. 动态绑定属性

1. v-bind基本使用

        除了内容需要动态来决定外，某些属性我们也希望动态来绑定，比如，动态绑定a元素的href属性、动态绑定img元素的src属性，{{}}无法动态绑定动态属性，这个时候我们需要使用v-bind指令

<img v-bind:src="imgURL" alt="">

<!-- 语法糖的写法 -->
<a :href="aHref">超链接</a>

2. 动态绑定class

     对象语法：

我们可以传给v-bind:class一个对象，来实现动态切换class，如：

<div v-bind:class="{ active: isActive }"></div>

  上面的语法表示active这个class存在与否将取决于属性值isActive是否为true，可以在对象中传入更多字段来动态切换多个class。此外，v-bind:class指令也可以与普通的class属性共存。如：

<div
  class="static"
  v-bind:class="{ active: isActive }"
></div>

   了解上述基本知识后，可以做一个小练习，点击按钮切换字体颜色

  <style>
    .active {
      color: #fba
    }
  </style>

  <div id="app">
    <h2 :class="{active: isActive}">{{message}}</h2>
    <button @click="changeColor">切换颜色</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好啊",
        isActive: false
      },
      methods: {
        changeColor() {
          this.isActive = !this.isActive
        }
      }
    })
  </script>

数组语法：

我们可以把一个数组传给v-bind:class ，以此来实现一个class列表，不常用

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

3. 补充v-for&v-for和v-bind结合小练习

v-for循环遍历，比如创建一个列表

  <div id="app">
    <ul>
      <li v-for="item in anime">{{item}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        anime: ['进击的巨人', '海贼王', '火影忍者', '龙珠']
      }
    })
  </script>

练习需求： 点击列表中的哪一项，那么该项的文字变成红色

  <style>
    .actice {
      color: #fba;
    }
  </style>

  <div id="app">
    <ul>
      <li v-for="(item, index) in anime"
          :class="{actice: isActive === index}"
          @click="changeColor(index)" 
      >{{item}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        anime: ['进击的巨人', '海贼王', '火影忍者', '龙珠'],
        isActive: 0
      },
      methods: {
        changeColor(index) {
          this.isActive = index
        }
      }
    })

4. 动态绑定style

对象语法：

v-bind:style的对象语法看起来像CSS，但其实是给一个JS对象。CSS属性名可以用驼峰式或短横线分隔来命名

   <div id="app">
    <!-- <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2> -->
    <!-- '50px'必须加上单引号，否则是当做一个变量去解析 -->
    <!-- <h2 :style="{fontSize: '50px'}">{{message}}</h2> -->

    <!-- finalSize当成一个变量使用 -->
    <!-- <h2 :style="{fontSize: finalSize}">{{message}}</h2> -->

    <h2 :style="{fontSize: finalSize + 'px'}">{{message}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好啊",
        finalSize: 100
      }
    })
  </script>

数组语法：

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>