Vue基础语法记录(1)

---

一、Mustach（双花括号）

二、插值操作

1.v-once不允许被修改

2.v-html将内容解析为html的格式

2.v-text会被覆盖不好用

3.v-pre不去解析直接显示出来

4.v-cloak

setTimeout(function(){……}, 1000)时，页面会先渲染了{ {message}}，js被卡住了。那么v-cloak可以在被卡住的时候什么都不显示。

---

以上操作都是针对Mustach的，去动态决定内容，但属性也需要动态决定。

三、v-bind

1.基本使用方法

2.绑定class实现点击后切换颜色

3.绑定class数组

上下两个h2标签效果是一样的，就是你可以用数组的形式给他几个类，用的很少。

4.绑定style（对象语法）

注意在使用样式时的引号，以前的写法是没有的，现在要把它当成字符串是要加上的，而动态的那个值本身就解析为字符串所以又没加。（大概如此理解吧）

5.绑定style（数组语法）

用的很少

四、计算属性（希望数据经过某种变化再显示出来）

1.简单使用

四种写法得到一样的效果

computed调用几次都执行一次是有缓存的，methods调用几次执行几次，没有缓存，特别是当需要展示的数据要经过for循环的处理时，用计算属性更加合理。computed的function（）取名字不要取动词的名字。
再举例一个应用场景：
其中ES6的语法更加简单了：

2.计算属性get和set方法

fullName是一个属性，但是{}本身也是一个对象，所以fullName属性对应是一个对象。这个对象完整写法有set和get方法，但是set一般都是空的，没有set方法，是一个只读属性，一般删除set方法。既然只有get方法就可以也省略掉get：写法像注释掉的那段一样。

使用set的例子：