Vue2入门学习汇总

1.介绍及安装

1.1 介绍

Vue是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

学习vue之前主要掌握的知识：HTML、CSS、JavaScript、TypeScript

兼容性说明：Vue 不支持 IE8 及其以下版本，因为 Vue 使用了 IE8 不能模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

1.2 安装

1.2.1 安装NodeJS

官网地址下载安装 Download | Node.js

1.2.2 安装npm

npm是随同NodeJS一起安装的包管理工具，安装nodejs后，就无需安装，但是npm速度会慢一些，推荐使用淘宝镜像及其命令cnpm，使用如下命令安装淘宝镜像

npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm -v 查看安装的淘宝镜像版本

1.2.3 安装vue

执行如下命令，安装vue的最新稳定版本

npm install vue

安装指定版本的vue

npm install vue@版本号

比如要安装2.6.12版本的vue,执行命令 npm install [email protected]

1.2.4 安装vue命令行工具(CLI)

npm install --global vue-cli

详细使用说明参见：介绍 | Vue CLI

1.3 项目实例

1.3.1 项目创建

cmd cd命令到需要创建项目的目录下，执行 vue create 项目名称 创建vue项目

在F磁盘下myVue文件夹下创建项目名称为bookmanage

注：项目名称不能包含大写字母

 回车，默认Vue2项目模板，然后回车，等待项目初始化完成

 使用VSCode打开项目

 执行命令npm run serve,运行项目

文件目录说明

• node_modules：项目依赖文件夹
• public：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。
• src（程序员源代码文件夹）：
•  asstes：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在asstes文件夹里面的静态资源，在webpack打包的时候，webpack会把静态资源当作一个模块，打包到js文件里面。
•  components：一般放置非路由组件（全局组件）
•  App.vue：唯一的根组件
•  main.js：程序入口文件，也是整个程序当中最先执行的文件
• babel.config.js：配置文件（babel相关）
• package.json：记录项目做什么，有哪些依赖、项目怎么运行
• package-lock.json：缓存性文件 

1.3.2 CLI服务命令

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
这是你使用默认 preset 的项目的 package.json：

 你可以通过 npm 或 Yarn 调用这些 script：

npm run serve
# OR
yarn serve

 1.3.2.1 vue-cli-service serve 

用法：vue-cli-service serve [options] [entry]
选项：
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
除了通过命令行参数，你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。
命令行参数 [entry] 将被指定为唯一入口 (默认值：src/main.js，TypeScript 项目则为 src/main.ts)，而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误 

1.3.2.2 vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]
选项：
  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录的内容
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。
这里还有一些有用的命令参数：

• --modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。
• --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。
• --report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。 

1.3.2.3 vue-cli-service inspect

用法：vue-cli-service inspect [options] [...paths]
选项：
  --mode    指定环境模式 (默认值：development)

你可以使用 vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config。

1.3.2.4 缓存和并行处理

• cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中——如果你遇到了编译方面的问题，记得先删掉缓存目录之后再试试看。
• thread-loader 会在多核 CPU 的机器上为 Babel/TypeScript 转译开启。

1.3.3 开发基础配置

1.3.3.1 vue.config.js

vue.config.js是vue项目的配置文件，专注于vue项目。使用脚手架安装项目的时候并没有创建vue.config.js，所有一般是需要修改webpack的时候才会自己创建一个vue.config.js,然后就可以修改默认的webpack。

配置说明参见：https://cli.vuejs.org/zh/guide/webpack.html

module.exports ={
  lintOnSave: true, // 关闭eslint 默认是true
  productionSourceMap: false, //  不需要生产时的源映射(即.js.map文件不会生成) 默认是true
  // 部署应用包时的基本URL。 默认是/ 。如应用被部署在 https://www.my-app.com/my-app/，则设置publicPath为/my-app/
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',  // ./是当前目录 ; /是根目录
  outputDir: 'dist', // 默认dist 所以这句可以注释掉 
  assetsDir: "static",// 项目打包的静态资源存放目录，默认 "static"
  indexPath: "index.html",// 项目打包的index.html输出路径，默认 "index.html"
  pages: undefined,// 多页应用配置参数，默认 undefined
  // 配置代理跨域
  devServer: {
    open: true, //启动项目自动弹出浏览器
    port: 5200, // 开发运行时的端口
    https: false, // 是否启用 https
    host: '0.0.0.0', // 默认localhost 设置成'0.0.0.0',在同一个局域网下，可以通过http://ip:port/...访问项目
    proxy: { // 拦截所有api开头的请求，请求时删除api（根据自己实际情况来）
        "^/api/.*": {
          target: 'http://127.0.0.1:8090', // 服务器接口地址
          changeOrigin: true, // 是否跨域  
          rewrite: (path) => path.replace(/^\/api/, ''),
        }
    }
  },
   // css全局配置 参见 https://cli.vuejs.org/zh/guide/css.html#css-modules
   //特别说明：配置前先安装好需要的依赖;如：“sass-loader”: “^10.2.0”, “scss”: “^0.2.4”,安装的如果版本不一致会有报错 参见 https://www.npmjs.com/package/node-sass 查看nodejs与node-sass对应版本
   //如果使用scss/sass设置，那么需要在每个vue文件中，需要这样写 全局样式才会生效
   /**
    * sass-loader与node-sass对应版本号
    * sass-loader 4.1.1，node-sass 4.3.0
      sass-loader 7.0.3，node-sass 4.7.2
      sass-loader 7.3.1，node-sass 4.7.2
      sass-loader 7.3.1，node-sass 4.14.1
      sass-loader 10.0.1，node-sass 6.0.1
    */
   css: {
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中、生产环境下默认 true，开发环境下默认 false
    extract: true,
    // 是否开启 css 的 source map 调试，默认 false
    sourceMap: false,
    //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader) 默认{}
    loaderOptions: { 
      scss:{
        // v8 以前的写法 data: `@import @/assets/css/index.scss;`,  	
        // v8 以后的写法prependData: `@import @/assets/css/index.scss;`,       
        // v10 以后的写法
        additionalData: `@import "@/assets/css/common.scss";`// v8中，这个选项名是 "prependData"
      },
      // sass:{
      //   additionalData: `@import "@/assets/css/common.scss";`// v8中，这个选项名是 "prependData"
      // }
    }
  },
  //新增/修改 webpack 的 plugins 或者rules 的简单配置方式使用configureWebpack
  //参见 https://cli.vuejs.org/zh/guide/webpack.html
  configureWebpack:config=>{
    console.log(config);
    if(process.env.NODE_ENV==="development"){
      //开发换进改配置
    }
    else if(process.env.NODE_ENV==="test"){
      //测试环境配置
    }
    else if(process.env.NODE_ENV==="production"){
      //生产环境配置
    }
  },
  //新增/修改 webpack 的 plugins 或者rules 的链式操作 (高级)方式使用chainWebpack
  //参见 https://cli.vuejs.org/zh/guide/webpack.html
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options;
        });
  }
}

1.3.3.2 模式和环境变量

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量： 

vue-cli-service build --mode development

当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。

NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。

例如通过将 NODE_ENV 设置为 "test"，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。

同理，NODE_ENV=development 创建一个 webpack 配置，该配置启用热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是为了在开发的时候能够快速重新构建。

当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 "production" 来获取可用于部署的应用程序。

NODE_ENV

如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。

环境变量

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对：

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

警告 

不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）！

环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

想要了解解析环境文件规则的细节，请参考 dotenv。我们也使用 dotenv-expand 来实现变量扩展 (Vue CLI 3.5+ 支持)。例如：

FOO=foo
BAR=bar

CONCAT=$FOO$BAR # CONCAT=foobar
被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。

环境文件加载优先级

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

模式和环境变量配置示例

 在实际开发过程中我们可能需要开发环境、测试环境和生产环境对应三个不同环境的地址，这里我们在项目根目录中新增.env、.env.development、.env.test、.env.production三个文件，分别对应所有环境、开发、测试、生产不同模式下的环境变量配置

.env

NODE_ENV=development

VUE_APP_API_URL= 'http://127.0.0.1:8080/' // 开发接口域

.env.development

NODE_ENV=development

VUE_APP_API_URL= 'http://127.0.0.1:8080/' // 开发接口域

.env.test

NODE_ENV=test

VUE_APP_API_URL= 'http://127.0.0.1:8089/' // 开发接口域

 .env.production

NODE_ENV=production

VUE_APP_API_URL= 'http://127.0.0.1:9095/' // 开发接口域

然后在package.json中的scrips中配置service命令

 分别执行 npm run serve 和npm run test命令，页面中显示process.env.NODE_ENV值的效果

 

 

1.3.3.3 路由基础配置

Vue路由是指根据url分配到对应的处理程序；作用就是解析URL，调用对应的控制器的方法，并传递参数。Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图。

$route：一般获取路由信息【路径、query、params等等】
$router：一般进行编程式导航进行路由跳转【push|replace】

项目中创建router.js文件，创建路径src/router/router.js

import Vue from 'vue';//引入vue
import VueRouter from 'vue-router';//引入vue-router

Vue.use(VueRouter)//第三方库需要use一下才能用

//定义routes路由的集合，数组类型
//路由懒加载： 当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。
const routes = [
    //路由配置
//   { path: '/login', component: ()=> import('@/views/login/index.vue')},
//   { path: '/index', component: ()=> import('@/views/home/index.vue')}
];

//实例化 VueRouter 并将 routes 添加进去
const router = new VueRouter({
  //ES6简写，等于routes：routes
  routes
});

//抛出这个这个实例对象方便外部读取以及访问
export default router;

然后在main.js中引入路由js文件 

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'//引用router.js

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

1.3.3.4 全局样式设置

样式文件包含sass、scss、css、less等，全局样式的设置方式如下：

 1）main.js中引入

import '@/assets/css/common.scss' // 全局样式

2）vue.config.js 中配置

详情参见 1.3.3.1 vue.config.js中的关于全局css配置的相关注释说明及代码

2.基础知识汇总

2.1 应用实例

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

import Vue from 'vue'//引入vue

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

选项参数包含根组件、路由等的配置，我们可以在入口程序main.js中的代码中看出，在vue实例中调用根组件App.vue,根组件中调用子组件

main.js中的代码：

 根组件App.Vue中的代码：

2.1.1 生命周期

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

挂载阶段：beforeCreate、created、beforeMount、mounted

更新阶段：beforeUpdate、updated

销毁阶段：beforeDestroy、destroyed

• beforeCreate：在该函数执行时Vue实例仅仅完成自身事件绑定和生命周期函数的初始化工作，Vue实例中还没有Data，el，methods相关属性
• created：在该函数执行时Vue实例已经初始化data属性和methods中相关方法，可以在此阶段调取后端数据了
• beforeMount：在该函数进行模板编译，生成虚拟dom
• mounted：在该函数将数据渲染到页面上，生成真实dom
• beforeUpdate：数据更新时触发该函数，该函数执行时Vue实例中data数据变化，但页面数据仍为旧数据，即data数据与页面数据不同步
• updated：数据更新触发，但时机点位于beforeUpdated后，此时页面数据与Vue实例中data数据能够保持一致
• beforeDestroy：该函数执行时，Vue实例中所有数据、methods、component还未销毁
• destroyed：该函数执行时，Vue实例彻底销毁

钩子函数常见的使用场景
1）推荐在created（）中发送请求，对服务端接口进行调用，此时data数据已经创建，可以获取服务端数据对其进行赋值，相比beforeMount（）和mounted(),created（）能更快获取到服务端数据，减少页面loading 时间；

2）在 mounted（）中，Vue将编译好的模板挂在到页面上，此时为真实DOM，可以对DOM进行操作。此时可以做启动定时器、绑定自定义事件、订阅消息等初始化操作。

3）beforeDestory（）可进行清除定时器、解绑自定义事件、取消消息订阅等操作

2.2 模板语法 

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

2.2.1 插值

2.2.1.1 文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

页面输出效果： 

 2.2.1.2 纯HTML

双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用v-html指令

页面输出效果： 

2.2.1.3 属性

双大括号不能在 HTML attributes 中使用，相应的，应该使用v-bind指令

注：v-bind可省略不写，直接:属性值，比如绑定id可以这样写:id="dynamicId"

2.2.1.4 表达式

对于所有的数据绑定，Vue都提供了完全的 JavaScript 表达式支持

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

• 在文本插值中（双大括号）。
• 在任何 Vue 指令attribute（以v-开头的特殊 attribute）的值中。

表达式会被作为 JavaScript ，以组件为作用域，解析执行

运行输出结果：

 在绑定的表达式中，可以使用一个组件暴露的方法，调用函数

绑定在表达式中的方法，在组件每次更新时，都会被重新调用，因此不应该产生任何effect（副作用）。比如改变数据或触发异步操作。

运行效果：

注意事项 

1）在绑定的表达式中，不支持语句 ，以下写法都是无效的

{{ var a = 1 }}

{{ if (ok) { return message } }}

2）受限的全局访问

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中，会暴露常用的内置全局对象，比如Math和Date。
没有显式包含在列表中的全局对象，将不能在模板内表达式中访问。例如，用户附加在window上的 property。然而，你也可以自行在app.config.globalProperties上显式地添加他们，供所有的 Vue 表达式使用。

2.2.2 指令

指令是带有v-前缀的特殊 attribute。指令 attribute 的期望值，为一个 JavaScript 表达式（v-for、v-on和v-slot将会是例外）。使用指令是为了，在其表达式值变化时，响应式的更新 DOM。

以v-if为例：

2.2.2.1 参数

一些指令能够接收一个“参数”，在指令名称之后以:（冒号）隔开，做标识。例如，v-bind指令可以用于响应式地更新 HTML attribute：

 ... 

 ... 

这里href就是一个参数，它告诉v-bind指令，将表达式url的值，绑定到元素的href attribute 上。在缩写中，参数前的一切（例如v-bind:）都会被缩略为一个:字符。

另一个例子是v-on指令，它用于监听 DOM 事件：

 ... 

 ... 

这里的参数是要监听的事件名称：click。v-on也是少部分含有缩写的指令之一，缩写字符为@

2.2.2.2 动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

...

...

这里的attributeName会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的组件实例有一个data property attributeName，其值为"href"，那么这个绑定将等价于v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
...


在这个示例中，当eventName的值为"focus"时，v-on:[eventName]将等价于v-on:focus 

动态参数值限制：动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告 

动态参数表达式限制

动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。例如下面的示例：

...

如果你需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式

当使用DOM 内嵌模板（直接写在 HTML 文件里的模板）时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写：

...  

2.2.2.3 修饰符 

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

...

2.2.3 过滤器

vue允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

{{ message | capitalize }}

过滤器函数接受表达式的值作为第一个参数

以下示例代码中，将字符串转换为大写字符：

 过滤器可以串联：

{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

2.3 样式绑定

数据绑定的一个常见需求场景是操纵元素的CSS类列表和内联样式。因为它们都是attribute，我们可以使用v-bind来做这件事：我们只需要通过表达式计算出一个字符串作为最终结果即可。然而频繁操作字符串连接很闹心，也很容易出错的。因此 Vue 为class和style的v-bind使用提供了特殊的功能增强。除了字符串外，表达式的结果还可以是对象或数组。

2.3.1 绑定class类

2.3.1.1 对象方式

渲染效果：

2.3.2.1 数组方式

渲染效果：

2.3.3.2 组件绑定calss

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖

比如使用HelloWorld的组件，v-bind:class方式同样适用

2.3.2 绑定内联样式

2.3.2.1 对象方式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

渲染效果：

2.3.2.2 数组方式

内联方式的数组是数组对象

渲染效果：

2.3.2.3 自动添加前缀

当你在:style中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性，那么将测试加上各个浏览器特殊前缀，以找到哪一个是被支持的

如 transform

2.3.2.4 多重值

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex

2.4 条件语句

2.4.1 v-if

条件语句包含：

• v-if：v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染
• v-else-if：表示v-if的“else-if 块”
• v-esle：表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别

注意：不推荐同时使用 v-if 和 v-for，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。 

渲染效果：

2.4.2 v-show

另一个用于根据条件展示元素的选项是 v-show 指令
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中，v-show 只是简单地切换元素的 CSS property display。
注意：v-show 不支持