语法

vue.js 的语法，基本上是基于 js + html + css ， vue 的语法更多提现在其指令、生命周期钩子函数和特殊的函数上。

下面我们使用 空白练习页 中的代码来分析一下 vue 的语法

<div id="app">
  <p>{{ msg }}</p>
  <input v-model="msg" />
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        msg: 'Hello RCC'
      }
    }
  })
</script>

这个例子中，包含了两部分重要的元素：HTML 页面 DOM 元素 '#app' 和 SCRIPT Vue 对象。

<div id="app">
  <p>{{ msg }}</p>
  <input v-model="msg" />
</div>

这个是页面 DOM 元素部分

  var vm = new Vue({
    el: '#app',
    data() {
      return {
        msg: 'Hello RCC'
      }
    }
  })

这个是 Vue 对象部分

Vue 最神奇的地方就是将页面 DOM 元素和对应的数据双向绑定起来，实现了数据改变自动修改页面 DOM 元素。关于 Vue 是如何实现这个双向数据绑定的功能，可以参考 #TODO

下面我们会发现，我们平时讨论的 Vue 语法，基本上都是指类似 v-model 和 Vue 对象里面的函数和 API 内容。

一、实例

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

参考文档: Vue 实例

二、模版语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

参考文档: Vue 模板语法