Vue-模版语法、指令、
模版语法概述
在了解vue的模版语法之前，我们先回顾下，原生js将数据填充至页面的做法。
原生js拼接字符串
基本上就是将数据以字符串的方式拼接到HTML标签中。（缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得困难）
Vue的模版语法概览：
-插值表达式 -指令 -事件绑定 -属性绑定 -样式绑定 -分支循环结构
差值表达式前面已经介绍过。这里不再赘述。
指令
官方说法：指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
什么是自定义属性？
指令的本质就是自定义属性。
指令的格式以v-开始（比如v-c-cloaloak）
v-cloak
差值表达式渲染到页面时存在抖动问题，使用v-cloak可以解决该问题 解决该问题的原理：先隐藏，替换好值之后在显示最终的值用法分两步：
第一步
// css 提供样式 [v-cloak] { display: none; }
第二步
// html{{ message }}
数据绑定指令：
v-text
填充纯文本，相比插值表达式更加简洁
{{msg}}
另一个例子：
// 相当于第一次学习：{{ msg }}
v-html
填充HTML片段，存在安全问题：本网站内部数据可以使用，来自第三方的数据不可使用
v-pre
填充原始信息。（显示原始信息，跳过编译过程）
{{ this will not be compiled }}
数据响应式
如何理解响应式，Vue是提供双向数据绑定的框架，正常情况下，当数据改变时，页面的内容会更新。这个过程就叫做数据响应式。换句话说，靠数据驱动内容发生了变化。
// htm5中响应式（屏幕尺寸的变化导致样式的变化） // 数据的响应式 （数据的变化导致页面内容的变化）
v-once
只编译一次（显示内容之后不再具有响应式功能）
{{msg}}{{info}}
对比一下两者的区别
双向数据绑定
简单点说，就是后面数据发生变化，页面数据跟着发生变化，反之亦然，他们之间是相互的。
v-model
你可以用 v-model 指令在表单 、