Vue 必备学习知识点

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型。无论是简单还是复杂的界面，Vue 都可以胜任，可以说是我们高效开发用户界面的一大利器。

1、Vue 实例

要使用 Vue，我们首先要实例化 Vue 来声明一个 Vue 应用。具体语法格式如下。

var vm = new Vue({
  // 选项
})

<div id="app">
    <p>{{message}}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message: "我的第一个Vue应用"
        },
        methods: {
            printMessage: function() {
                console.log(this.message)
            }
        }
    })
</script>

可以看到，在 Vue 构造器中有一个 el 参数，它是要挂载的 HTML 元素的 id。上面实例的 id 为 app。接下来的 data 用于初始化数据，methods 用于定义函数方法，Vue 通过使用{{}} 将 js 定义的数据显示在了 HTML 中。

2、Vue 组件

每个 Vue 应用又由很多个 Vue 组件组成。一般来说，每个页面都是应用的一个组件，页面中需要被重复用的的部分也会单独拆分成一个组件。

模版语言：我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，叫做单文件组件。Vue 的单文件组件分为三块：template 标签中是模版，用来写 HTML；script 标签中写的是 js，负责定义数据和方法；style 标签中写的是 CSS，负责给模版中的 HTML 添加样式。

组件之间可以进行嵌套，比如组件 A 要引用组件 B，可以把组件 B 的文件引进来，并在组件 A 的 components 中加入组件 B。

组件通信：引用其他组件时，如果两个组件之间的数据需要被对方知道，我们就需要组件之间的通信了。比如当前页面是 A 组件，它引用了 B 组件。A 组件需要知道 B 组件中定义的数据，那么它们就需要通信。

生命周期：除了组件的模板语言和通信，我们还要了解 Vue 组件完整的生命周期，它指的是创建组件、初始化数据、编译模板、挂载 DOM、渲染、更新、再次渲染、卸载等一系列过程。在这些过程的前后我们都要执行相应的方法，这些方法就叫做钩子函数。

3、指令

指令是 Vue 为开发者提供的模板语法，它可以辅助开发者渲染页面的基本结构，完成相关数据的处理工作。Vue 官网是这样定义的。一个指令的本质是模板中出现的特殊标记，让处理模板的库知道需要对这里的 DOM 元素进行一些对应的处理。

v-if

如果我们想对是否存在 HTML 元素进行条件判断，就可以使用 v-if 指令。如果条件是 true 则元素存在，若条件是 false 则移除这个元素。我们经常把它用在组件的隐藏和显示上。v-if 指令具体又包括 v-if ，v-else-if , v-else。我们通过一个简单的案例来学习应用一下它。

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

程序中的 “type” 值，是在 data 中定义的值，初始化为 “C”，在上面这段程序中，我们通过 v-if 来判断 type 的值，以此控制最终显示在界面上的 div 是哪一个。

第一个 div 的意思就是：“如果 type 的值等于 A，就展示对应的内容 A”。第二个同理：“如果 type 等于 B，就展示内容 B”，第三个 div 也是如此。最后一个 v-else 代表的含义是：“如果以上三种情况都不满足，那么就展示内容 Not A/B/C”。

v-show

与 v-if 较为相似的就是 v-show。当我们需要根据条件来控制是否展示某元素时，经常会使用 v-show 指令。它初始化的值就是 true 或 false，如果为 true，则表示展示元素，如果为 false，就直接不展示元素。

<div id="app">
    <div v-show="show">
      lalalalala
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  }
})
</script>

v-for

在元素需要循环展示的时候，我们会选择使用 v-for 指令。v-for 的核心思想就是用 for 循环遍历元素。

<div id="app">
  <ol>
    <li v-for="s in students">
      {{ s.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    students: [
      { name: 'zhangsan' },
      { name: 'lisi' },
      { name: 'wangwu' }
    ]
  }
})
</script>

v-bind

当页面上 HTML 标签的属性需要用到 data 里定义的数据时，我们就需要用 v-bind 指令将数据的值拼接到属性里了。示例如下。这时候的 class 是一个动态值，我们需要判断 isActive 的值来决定最终 class 是 active 还是 default，从而控制呈现样式。

<div id="app">
  div v-bind:class="{ isActive?'active':'default' }"></div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

v-on

v-on 的指令呢，主要用于给元素绑定事件监听器。最常见的应用场景就是与 button 相结合，绑定它的 click 事件，只有这样我们点击时才会触发相应的方法。

v-on 还可以更简略地用 @来表示，这样我们不需要写全 v-on 也能绑定和触发点击事件。

<div id="app">
  <button @click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

v-model

v-model 指令可以在表单控件元素上创建双向数据绑定。对于一些可输入或可选择的表单控件，当用户在页面上操作时，data 属性的值会跟着变化；当 data 属性的值发生变化时，页面上显示的内容也会同时变化。

4、计算、监听属性

compute 计算属性

当我们通过对已在 data 里定义好的值进行计算监听的时候，就可以通过 compute 计算出我们想要得到的新的值的结果。这里要注意的就是，最终得到的值不可以在 data 中初始化定义。

通过 click 事件来触发 count 加 1 的操作。这里我们对 doubleCount 进行计算，它是 count 的 2 倍。可以看到，通过 compute 的监听计算，当 count 的值发生变化时，doubleCount 自动变为了 count 的 2 倍。

<template>
<div id="app">
  <button @click="count += 1">增加 1</button>
  <p>这个按钮被点击了 {{ count }} 次。</p>
  <!-->使用由compute计算得出的变量：doubleCount<-->
  <p>count的2倍是{{doubleCount}}</p>
</div>
</template>
<script>
export default {
  data() {
    return {
      count:1
    }
  },
  computed: {
    // 每当 count 改变时，这个函数就会执行
    doubleCount() {
      return count*2
    }
  }
}
</script>

执行结果如下。

watch 监听

属性watch 用于值的监听，它与 compute 的不同之处在于，它监听的值必须要在 data 中进行初始化，才能通过 watch 来响应 data 数据的变化。

5、路由配置

当我们打开一个网站，经常会跳转到其他的页面。“路由”的作用就是控制页面的地址和显示页面的关系。比如百度新闻 news.baidu.com 是一个网站，页面中会有很多可以点击的新闻。

比如点击 坚定不移走中国特色金融发展之路

这些网址和要显示的网页之间的一一对应关系，就是由前端开发人员配置的，而这个操作就叫做路由配置。简单概括一下路由配置的流程：先定义一个网址，然后再配置这个网址对应的网页。那么用户只要打开这个网址，就会看到我们配置好的网页了。

6、Vue 整合其他依赖

Vue 作为一个可拓展的框架，还可以和第三方依赖一起整合使用。比如常见的依赖有 UI 组件库 element-UI；发送 HTTP 请求的依赖 Axios 等等。它具有非常强大的整合能力，给我们的开发工作提供了极大的便利，让我们可以用优质的代码开发更全面的项目。