Vue.js 的介绍：

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
开发模式 MVVM：Model，View ，VM （ViewModel）

Vue.js的基本结构代码和插值表达式

<!-- 1. 导入Vue的包 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
  <div id="app">
  <!-- 这里用 {{}} 即为插值表达式 -->
    <p>{{ msg }}</p>
  </div>
  <script>
 <!-- 2. 创建一个Vue的实例 -->
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，就可以把数据渲染到页面上，不在需要手动操作DOM元素
      }
    })
  </script>
</body>

Vue的指令

v-text：会覆盖元素中原本的内容，但如果使用插值表达式，则只会替换自己的占位符，而不会把整个元素内容都清空
v-html：会将其中的内容以HTML的标签解析出来
v-bind：绑定属性内容，可以在其中写合法的js表达式，可以缩写为 :要绑定的属性，如 :title="mytitle + '123'”

v-on：绑定事件机制，可缩写为 @，如 @click="show"，show为事件名，可在methods属性中写明方法的具体内容

事件修饰符：

  .stop         阻止冒泡
  .prevent    阻止默认事件
  .capture    添加事件侦听器时使用事件捕获模式
  .self       只当事件在该元素本身（比如不是子元素）触发时触发回调
  .once       事件只触发一次

v-model：用于双向数据绑定，可以实现表单元素和 Model 中数据的双向数据绑定

注： v-model 指令只能运用在表单元素中
v-for（key属性）：（1）用于迭代数组

<ul>
  <li v-for="(item, index) in list">索引：{{index}} --- 姓名：{{item.name}} </li>
</ul>

（2）迭代对象中的属性

<div v-for="(value, key, index) in Info">{{value}} --- {{key}} --- {{index}}</div>

（3）迭代数字

    <p v-for="i in 10">这是第 {{i}} 个P标签</p>

注：2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
key 属性能够跟踪每个节点的身份，从而重用和重新排序现有元素

v-if和v-show：
v-if 的特点：每次都会重新删除或创建元素
v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

注：一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

Vue中使用样式

1. 使用 class 样式

数组
<h1 :class="['red', 'thin']">这是一个H1标签</h1>
数组中使用三元表达式
<h1 :class="['red', 'thin', isactive ? 'active' : '']">这是一个H1标签</h1>
数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个H1标签</h1>
直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个H1标签</h1>

2. 使用内联样式

直接在元素上通过 :style 的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个H1标签</h1>
将样式对象，定义到 data 中，并直接引用到 :style 中
- 在data上定义样式：
  data: { h1Style: { color: 'red', 'font-size': '40px', 'font-weight': '200' } }
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
  <h1 :style="h1Style">这是一个H1标签</h1>
在 :style 中通过数组，引用多个 data 上的样式对象
- 在data上定义样式：
  data: { h1Style1: { color: 'red', 'font-size': '40px', 'font-weight': '200' }, h1Style2: { fontStyle: 'italic' } }
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
  <h1 :style="[h1Style1, h1Style2]">这是一个善良的H1</h1>