Vue的基础语法——插值操作，动态绑定，计算属性

一，插值操作

1.Mustache语法

也就是双大括号{{}}的写法，mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式

  
{{message}},妍华!
 
   //插入到标签中

  
{{firstName}} {{lastName}}
  //使用了两个Mustache
  
  
{{counter * 2}}
  //也可以是表达式
  

2.v-once

• 该指令后面不需要跟任何表达式
• 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

  
{{message}}

  
{{message}}

3.v-html

如果直接通过{{}}来输出，会将HTML代码也一起输出。
我们希望的是按照HTML格式进行解析，并且显示对应的内容。

• 该指令后面往往会跟上一个string类型
• 会将string的html解析出来并且进行渲染

4.v-text

• 作用和Mustache相似：都是用于将数据显示在界面中
• 通常情况下，接受一个string类型
  

5.v-pre

用于跳过这个元素和它子元素的编译过程，显示原本的Mustache语法

6.v-cloak

浏览器直接显然出未编译的Mustache标签

二，动态绑定属性

• 使用v-bind指令
• 作用：动态绑定属性
• 缩写（语法糖）：:
  

1.v-bind绑定class

动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。

绑定class有两种方式：

• 对象语法:class后面跟的是一个对象

用法一：直接通过{}绑定一个类

Hello World

用法二：也可以通过判断，传入多个值

Hello World

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类

Hello World

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

Hello World

• 数组语法:class后面跟的是一个数组
  用法一：直接通过{}绑定一个类

Hello World

用法二：也可以传入多个值

Hello World

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类

Hello World

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

Hello World

  
  
  
  
  
{{message}}
  
{{message}}
  按钮
  

2.v-bind绑定style

利用v-bind:style来绑定一些CSS内联样式

在写CSS属性名的时候，比如font-size

• 可以使用驼峰式 (camelCase) fontSize
• 或短横线分隔 (kebab-case，记得用单引号括起来)
  ‘font-size’

绑定class有两种方式：

1. 对象语法

 :style="{color: currentColor, fontSize: fontSize + 'px'}"

style后面跟的是一个对象类型

• 对象的key是CSS属性名称

• 对象的value是具体赋的值，值可以来自于data中的属性

2. 数组语法

style后面跟的是一个数组类型

• 多个值以，分割即可

三，计算属性

对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示需要用到计算属性

计算属性是写在实例的computed选项中的

计算属性基本使用：

  
{{firstName + ' ' + lastName}}
  
{{firstName}} {{lastName}}

  
{{getFullName()}}

  
{{fullName}}

计算属性复杂操作：

  
总价格: {{totalPrice}}

每个计算属性都包含一个getter和一个setter
使用getter来读取，也可以提供一个setter方法（不常用）。
在需要写setter的时候，代码如下：

methods和computed都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？

原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。