一、Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。
Vue 函数在执行的时候，需要接收一个选项对象作为参数。后续我们会在该选项对象中添加多个属性来对当前的 Vue 实例进行配置。

  1. const vm = new Vue({
  2.     // ... 
  3. })

上例代码中的 vm，接收到的就 new Vue()返回的实例对象。所有的 Vue 应用中都是通过这个实例对象来管理整个项目的。

  • 选项对象包含的大类有什么?
    • Data(数据)
    • DOM
    • 生命周期钩子
    • 资源
    • 组合
    • 其他

      二、data数据

      data 属性是 Vue 中很重要的一个配置项，我们可以通过 data 来设置应用中的数据：
      1. new Vue({
      2. data() {
      3.    return {
      4.        msg: 'Hello World',
      5.        num: 100,
      6.        // ...
      7.    }
      8. }
      9. })
      data 属性的值是一个 function，该方法中需要返回一个对象，对象中用来设置当前应用需要用到数据。
      在上例中，我们定义了两个数据：msg 和 num。如果需要，我们还可以继续在该对象中定义更多的数据。

      三、数据渲染

      数据有了，下一步就是将数据渲染到页面中了。Vue 想要将数据渲染到页面节点中，有两个步骤：
  1. 指定 vm 解析的页面视图的范围（指定 Vue 实例的挂载节点）；
  2. 在视图节点中通过 mustache 模板语法来实现数据与节点的绑定；

    1、el 挂载节点

    Vue 和原生 JS 中的数据渲染完全不一样。
    在 Vue 中，我们不再需要依次获取每一个需要渲染数据的节点，而是直接通过 el属性指定 Vue 实例的挂载目标节点。

    挂载目标节点：

    挂载目标节点指的是页面中真实存在的一个节点，我们也把它称作容器节点。所有 Vue 相关的视图都要放在这个容器节点中，只有在 Vue 容器范围内的节点，才能使用 Vue 的语法。
    1. <div id="app">
    2.  <!-- Vue 实例的作用范围 -->
    3. </div>
    4. <script src="./js/vue.js"></script>
    5. <script>
    6.  const vm = new Vue({
    7.      el: '#app'
    8.  })
    9. </script>
    上例代码中，我们指定了 #app 节点为 Vue 实例的挂载节点。也就表示，当前 vm 实例对象的有效作用范围，就是 #app 内的所有节点。只要是在 #app 范围内所有节点，我们都可以通过 mustache 模板语法来实现数据渲染。

    2、mustache 模板语法

    在 Vue 中，我们将“数据渲染到节点”的过程，称为“数据绑定”。数据绑定最常见的形式就是使用 mustache 模板语法 (双大括号) 的文本插值。
    1. <div id="app">
    2.  <h1>Message：{{msg}}</h1>
    3.  <span>{{num}}</span>
    4. </div>
    {{}} 是 Vue 中数据绑定的固定语法格式，{{}} 中的变量名，就是 data 中我们需要渲染的数据的属性名。
    代码解析完成后，{{msg}} 所在位置就会解析成 data 中 msg 的值“Hello World”。 同理，{{num}} 所在位置就会解析成 data 中 num 的值 100。
    模拟渲染后的页面代码参考如下：
    1. <!-- 渲染完成之后的结构-->
    2. <div id="app">
    3.  <h1>Message：hello world</h1>
    4.  <span>100</span>
    5. </div>

    模板语法中的 JS 表达式

    在前面的例子中，我们在 {{}} 语法内都只是绑定了简单的数据值。但实际上，Vue 的 {{}} 和 ES6 中的模板字符串 ${} 一样，内部支持所有的 JavaScript 表达式。
    示例代码：
    1. <!-- 做运算 -->
    2. <p>{{ num + 1 }}</p>
    3. <!-- 三目运算符 -->
    4. <p>{{ num > 0 ? '正数' : '负数' }}</p>
    5. <!-- 方法调用 -->
    6. <p>{{ msg.split('').reverse().join('') }}</p>
    不支持的语法：
    1. <!-- 这是语句，不是表达式 -->
    2. <p>{{ var a = 1 }}</p>
    3. <!-- 流控制也不会生效，请使用三元表达式 -->
    4. <p>{{ if (ok) { return message } }}</p>
    如果不会判断什么样的代码是 JS 表达式，我们也可以这样来理解：
    如果一段代码执行完成后，会返回一个最终的结果，那么这段代码就是一个 JS 表达式，就可以用在 **{{}}** 中。如果一段代码执行完成后，我们无法很明确的判断出它是否会返回一个最终结果，那么这段代码就不是一个 JS 表达式，就不能用在 **{{}}** 中。

    四、监听事件

    数据有了，数据也渲染好了，下一步就是事件的处理。
    Vue 给 el 挂载节点范围内的所有标签身上都提供了一个 v-on:事件类型 的特殊属性来设置事件的监听。
    示例代码：
    1. <div id="app">
    2.  <h1>Message：{{msg}}</h1>
    3.  <span>{{num}}</span>
    4.  <button v-on:click="num++">+1 按钮</button>
    5. </div>
    Vue 中的事件类型和原生 JS 一样，click 表示鼠标单击事件。我们也可以根据需求，将 click 换成其他任何类型的事件。