安装和导入

有多种方式使用Vue：

下载js文件

下载开发版本
下载运营版本
下载完成后，放在html同目录下时，在html中用<script src='vue.js'>引入

在线引用

在html文件内直接引用网址：

1. 开发和学习使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 生产运营环境使用明确的版本：

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

3. 兼容 ES Module 的构建文件：

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

NPM

项目内安装

在前端工程目录控制台输入：

$ npm install vue

之后可在js文件通过以下代码调用：

import Vue from 'Vue'

之后可直接使用Vue类。

vue-cli

还可以通过npm安装vue脚手架工具：

npm install -g @vue/cli

安装完后可在控制台直接创建项目：

vue create hello-world

非常方便，十分推荐，详见：vue-cli创建项目

初学时很奇怪安装方式怎么这么多，学会一种在线引用不就能学了嘛，后来发现每一种都值得了解一下。

Vue 实例

Vue的代码写在js文件或者<script>中，基础结构如下：

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

Vue是安装好的Vue库暴露的全局类，通过自定义编写选项内的内容就可以使用Vue。返回实例——app，让我们也可以在外部进行控制。
在传入参数对象中写各种选项，不同的选项实现不同功能。可用的常用的选项有：

• data：一般存储页面所需的数据变量
• method：一般负责页面需要运行的功能，也可返回数据
• computed：通过方法计算得到所需的变量
• watch：某个数据变量发生改变时执行
• 生命周期函数：运行到某生命周期时执行
  ...
  创建一个最简单的Vue页面，代码是这样：

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

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

内部的message可以方便地在外部的html中显示。

模板语法

在html模板中显示Vue中的数据的主要方式。分为在标签<>内的指令``v-和在外的插值``{{}}。
举例：

<div v-bind:id="'list-' + id">{{ number + 1 }}</div>

其中id和number一般都是data选项中的数据，也可以是method或computed中的数据。