渐进式JavaScript框架。
（对比：jQery是一个JS库）

渐进式：在原有项目中，可以先尝试引入一两个组件，可以当插件用，也可以用来开发整个项目。
（对比Angular）

一、插值表达式/小胡子语法/mustache语法：{{}}

其实就是个模板，读取data中的数据并且展示出来

<div id="dog">
    {{ name }}
</div>

<script>
  const vm = new Vue(
    el:'#dog',
    data:{
      name:'旺财;
    }
  )
</script>

注意：

1.不能使用data中不存在的数据
2.{{}}中可以写表达式，例如{{1+1}}、{{[a, b, c].join('-')}}、{{ok? 1: 2}}
3.{{}}中不能出现JS的关键字，比如for什么的
4.不能在属性中使用，例如<h1 title="{{msg}}"></h1>是错误的，只能在标签的内容中使用

data中的数据，可以在插值表达式中使用，也可以在指令中使用
插值表达式不能在指令或者是属性中使用

二、vue指令（Directives）

带有v-前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性。
指令不会单独存在，都是绑定在标签上的，为标签增加一些特殊的行为。

v-bind: 可以让html的属性使用data中的数据（属性中又不能使用插值表达式，那么怎么使用data中的数据呢睡吧。使用频率很高，可以简写成:）

上面说过差值表达式不能在属性中使用，如果要在属性中使用data中的数据，那么就要使用v-bind指令了。

//可以缩写为<h1 :title="msg">你好</h1>
<h1 v-bind:title="msg">你好</h1>
<script>
  const vm = new Vue({
    el:'#dog',
    data:{
      msg:'东莞去吗'
    }
  })
</script>

v-model:用在表单元素上，实现和data中的数据双向数据绑定（v-model会忽略所有表单的value、checked、selected特性的初始值）

<div id="dog">
  //v-model取代了value属性
  <input type="text" v-model="msg">
</div>

<script>
   const vm = new Vue({
    el:'#dog',
    data:{
      msg:'hello world'
    }
  })
<script>

<div id="dog">
  <select v-model="role">
    <option value="1">亚瑟<option>
    <option value="2">安其拉<option>
    <option value="3">菠萝<option>
  </select>
  <p>{{ role }}</p>
</div>
<script>
  var vm = new Vue({
    el:'#dog',
    data:{
      role:2
    }
  })
</script>

v-text:读取data中的数据，并且修改当前元素的innerText（textContent）属性

<div id="dog">
  <h1 v-text="msg">这里的内容不会显示，因为被覆盖掉了</h1>
</div>
<script>
  const vm = new Vue({
    el:'#dog',
    data:{
      msg:'nihaoma'
    }
  })
</script>

v-html:修改当前元素的innerHTML属性，标签可以生效这样子（永远不要用在用途提交的内容上）

v-on:用来注册事件（简写为@）

v-on:事件名称 = '事件函数'

<div id="dog">
   <!-- <button v-on:click="mClick">click me</button> -->
   <button @click="mClick">click me</button>
</div>

<script>
  const vm = new Vue({
    el:'#dog',
    data:{
      ...
    },
    methods:{
      mClick(){
        console.log('你点了我')
      }
    }
  })
</script>

v-for:用于重复的渲染某一个元素

基本用法

v-for="item in list"，item表示数组中的每一项，list表示data中的数据。

<div id="dog">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
</div>

<script>
  const vm = new Vue({
    el:'#dog',
    data:{
      list:['a', 'b', 'c', 'd']
    }
  })
</script>

带下标模式

v-for="(v, i) in list" | v-for="(item, index)"（）