终极目标：掌握和使用Vue（全家桶：Core+Vue-router+Vuex）
本博客目的：记录Vue学习的进度和心得（Vue基础语法）
内容：通过官网说明，掌握Vue基础语法。
正文：
Vue基础语法
一、插值语法
1、Mustache，即双大括号{{}}。 括号里面可以是变量，也可以是简单的表达式。（tips:复杂的表达式不再适合，我们可以考虑使用计算属性，后面会说）（Mustache：胡子）
2、v-once。通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
3、v-html。原始HTML：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用v-html指令。注意：站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击（Cross Site Scripting，攻击全称跨站脚本攻击）。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
4、v-text。与Mustache类似，接受一个string类型。但灵活性不够Mustache，尤其是字符串拼接下。用的比较少。
5、v-pre。跳过这个元素和它子元素额编译过程，用于显示原来的Mustache语法，即原封不动把内容显示出来。
6、v-cloak。当浏览器可能直接渲染出未编译的Mustache语法（可能网页卡了或者什么原因），会不好看，用上v-cloak可以过渡显示得过程，待渲染编译完Mustache语法后，才显示结果。 用得比较少。（cloak：斗篷）
二、绑定属性
当我们不再是简单往HTML元素使用插值语法动态绑定其模板的内容，而是想根据某些需求动态的改变元素属性时，例如动态绑定a元素的href属性等，需要使用绑定属性。在实际开发中，数据都不是简单的绑死的，而是动态由服务器请求来的数据去传到对应的部分，进行渲染的。
1、v-bind指令。作用：动态绑定属性。缩写（一个语法糖）：：（冒号）。注意，Mustache语法是在元素内容里面用。属性绑定时，用v-bind:属性=‘变量名’，这样变量（在程序编译时）就绑定了对应属性。（tips：变量名内如果是有引号译为字符串，没有就译为变量）
2、动态绑定class（class属性）。也可以用v-bind简单绑定。
3、动态绑定class对象语法：也可以绑定为一个对象并把布尔值放在vue实例中的data里面控制对应class是否加入到元素class属性中，如{类名1：布尔值1，类名2：布尔值2}当布尔值1为true时，即把类名1（所代表的的类添加到这个Html元素中去），同样的类名2也是。（tips：直接通过{}绑定一个类；也可以通过判断，传入多个值；与普通类同时存在，并不冲突；如果过于复杂，可以放在一个methods或者computed计算属性里）
4、动态绑定class数组语法：也可以绑定为一个数组，与上述对象语法类似，可以放在一个methods或者computed计算属性里。
5、动态绑定style：多用于组件化开发的定制样式渲染。也是存在对象语法和数组语法。对象语法：{key:value}，与class绑定不一样，style的对象是{css属性名：属性值}。属性值通常是动态变化的，所以属性性一般是变量，在vue实例的data属性里面对其控制，类似渲染模板的意味。数组语法用的比较少，也是相当于先以数组形式进行绑定，然后在vue的data属性定义为对象（tips：变量名内如果是有引号译为字符串，没有就译为变量）
三、计算属性
我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但在某些情况，我们可能需要对数据进行一些转换后再显示，或者需要将多个数据结合起来进行显示。因而可以使用到计算属性computed（在Vue实例中）。
1、在计算属性computed中定义显示数据的属性，然后在对应HTML元素位置调用。有点类似与方法定义，但是和方法不一样。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
2、
四、
原文：https://www.cnblogs.com/xinkuiwu/p/12031107.html