Vue基础教程

Vue简介

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue起步

Vue安装

1、下载安装

我们可以在 Vue.js 的官网上直接下载 vue.min.js，在本地创建一个.html文件，并通过 <script> 标签引入。下载Vue(vuejs.org/js/vue.min.…).

2、使用 CDN 方法

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

3、npm安装

使用 npm 安装需要先确认本地已安装Node环境。

npm install vue

一个简单的 Vue.js 案例

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <h1>Hello, 欢迎来到{{name}}</h1>
        <h2>当前课程是：{{course}}</h2>
        <h2>当前日期是：{{getDate()}}</h2>
      </div>
    </body>
    <script src="./vue.min.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: '#app',
        data: {
          name: "慕课网",
          course: "Vue基础入门"
        },
        methods: {
          getDate() {
            const date = new Date()
            return date.toLocaleDateString()
          }
        }
      })
    </script>
</html>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  Hello, my name is {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Vue!'
  }
})

通过上述两段代码我们已经成功创建了第一个 Vue 应用！现在data属性中数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们可以打开浏览器控制台，并通过修改app.message来验证这一点。

除了通过{{}}的方式，我们还可以像这样来绑定元素特性：

<div id="app2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app = new Vue({
  el: '#app2',
  data: {
    message: '欢迎学习 Vue! 基础教程'
  }
})

这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例中的 message 属性保持一致”。他们之间是响应式的，message 的改变会同时作用到 title 上。

条件与循环

在开发中我们经常会遇到根据状态来控制按钮显示隐藏的需求。这在Vue中很容易实现：

<div id="app">
  <p v-if="add">
    <button>添加</button>
  </p>
  <p v-if="delete">
    <button>删除</button>
  </p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    add: true,
    delete: false
  }
})

在 Vue 项目中，可以通过v-for来实现列表的循环：

<div id="app">
  <ol>
    <li v-for="item in music">
      {{ item.name }}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    music: [
      { name: '青花瓷' },
      { name: '阳光总在风雨后' },
      { name: '十年' }
    ]
  }
})

处理用户输入

Vue 项目中使用用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<div id="app">
  <p>{{ age }}</p>
  <button v-on:click="addAge">添加一岁</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    age: 20
  },
  methods: {
    addAge: function () {
      this.age = this.age + 1
    }
  }
})

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

生命周期函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

Vue具有以下生命周期函数：

1、`beforeCreate` 表示实例被创建之前。

2、`created` 表示实例被创建之后。

3、`beforeMount` 表示实例被挂载之前。

4、`mounted` 表示实例被挂载之后。

5、`beforeUpdate` 表示实例更新之前。

6、`updated` 表示实例更新之后。

7、`beforeDestroy` 表示实例销毁之前。

8、`destroyed` 表示实例销毁之后。

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

总结

刚才我们简单介绍了 Vue 核心最基本的功能。Vue的安装、渲染、条件语句、循环、事件绑定、数据双向绑定、生命周期函数。在接下来的章节中，我们将更加深入的学习Vue框架的应用。

Vue