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

一，插值操作

1.Mustache语法

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

<div id="app">

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

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 50
    },
  })
</script>

2.v-once

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

<div id="app">
  <h2>{{message}}</h2>

  <h2 v-once>{{message}}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

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后面跟的是一个对象

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

<h2 :class="{'active': isActive}">Hello World</h2>

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

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

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

<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

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

<h2 class="title" :class="classes">Hello World</h2>

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

<h2 :class="['active']">Hello World</h2>

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

<h2 :class=“[‘active’, 'line']">Hello World</h2>

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

<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

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

<h2 class="title" :class="classes">Hello World</h2>

<div id="app">
  
  <!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>-->
  <!--<h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>-->
  
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
  
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
        //原值取反
      },
      getClasses: function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

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. 数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

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

• 多个值以，分割即可

三，计算属性

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

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

计算属性基本使用：

<div id="app">
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>

  <h2>{{getFullName()}}</h2>

  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    // computed: 计算属性()
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      getFullName() {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

计算属性复杂操作：

<div id="app">
  <h2>总价格: {{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 110, name: 'Unix编程艺术', price: 119},
        {id: 111, name: '代码大全', price: 105},
        {id: 112, name: '深入理解计算机原理', price: 98},
        {id: 113, name: '现代操作系统', price: 87},
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0
        for (let i=0; i < this.books.length; i++) {
          result += this.books[i].price
        }
        return result
        
      }
    }
  })
</script>

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

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

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