Vue.js

1. 介绍：Vue是一套用于构建用户界面的渐进式框架。

2. Vue的安装：

   • 使用CDN直接引入

     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 生产环境版本，优化了尺寸和速度 -->
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
     

   • 使用下载好的vue.js文件引入

     <script src="../vue.js"></script>
     

3. Vue实例：

   • 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

     const app = new Vue({});
     

   • 然后为Vue实例挂载虚拟节点

     const app = new Vue({
         el:"#app",
     });
     

   • data对象

     const app = new Vue({
         el:"#app",
         data:{
               message:"hello world",
         }
     });
     

     • data 对象中的所有的 加入到 Vue 的响应式系统中，当值发生变化时，视图就会响应式的更新为新的值

   • Vue 实例暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。

     var app = new Vue({
         el: '#app',
         data: {
             message: "hello world"
         },
     });
     app.$watch("message", function(newValue, oldValue) {
         console.log(newValue, oldValue)
     })
     setTimeout(() => {
         app.message = "hello"
     }, 3000);
     

• 生命周期钩子：

  • image
  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
  1. beforeCreate（创建前状态）：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时Vue刚刚被实例化，还不具有组件属性。
  2. create（创建前状态）：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。实例已创建完成，但还未挂载el属性。
  3. beforeMount（模板挂载之前）：在挂载开始之前被调用：相关的 render 函数首次被调用。
  4. mounted（模板挂载之后）：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
  5. beforeUpdate（组件数据更新之前调用）：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
  6. Update（组件数据更新之后调用）：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  7. beforeDestroyed（实例销毁之前调用）：实例销毁之前调用。在这一步，实例仍然完全可用。
  8. destroyed（实例销毁之后调用）：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

4. 模板插值：

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

     <p>{{ message }}</p>
     

     通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不再响应式更新。

     <p v-once>{{ message }}</p>
     

   • 输出HTML：

     双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

     <p v-html="DOM">{{ DOM }}</p>
     

   • 为标签绑定Attribute：

     双大括号语法不能作用在 HTML attribute 上，遇到这种情况应该使用v-bind:attr="value"的语法：

     <p v-bind:class="content">{{ DOM }}</p>
     

     也可简写为:attr="value"。

   • 使用v-on:event="function"指令，监听DOM事件：

     <button v-on:click="fun">按钮</button>
     

     也可简写为@event="function"。

参考文档：Vue.js教程
Vue.js api文档