【vue学习】—基础语法（插值操作、属性绑定、计算属性）

1. 插值操作

1.1 mustache语法

mustache语法，简单来说就是{{}}语法，并且数据是响应式的

<div id="app">
    //mustache语法
    <h2>{{message}}</h2>
  </div>
  
  <script src="../js/vue.js"></script>

  <script>
    let app = new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
  </script>

1.2 v-once

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

我们在原来的标签上加上v-once指令

 <div id="app">
    <h2 v-once>{{message}}</h2>
  </div>
  
  <script src="../js/vue.js"></script>

  <script>
    let app = new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
  </script>

然后打开浏览器，输入app.message = ‘vue.js’，发现页面上的值并没有改变，这就是v-once的效果。

1.3 v-html

有时候，我们从服务器里请求来的数据本身就是html代码，如果我们直接通过mustache语法来展示，会将html代码也一起展示，但是我们希望的是按照html格式解析，并展示相应内容，此时可以用v-html指令

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

<div id="app">
    <h2>{{link}}</h2>
    <h2 v-html="link"></h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
  const app = new Vue({
    el:'#app',
    data:{
      link:'<a href="www.baidu.com">百度一下</a>'
    }
  })
  </script>

效果如下：

1.4 v-text

• v-text和mustache作用基本一致
• v-text通常情况下，接受一个string类型

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

  <script src="../js/vue.js"></script>
  <script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'v-text测试'
    }
  })
  </script>

效果如下：

1.5 v-pre

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

比如下面的代码：

• 第一个h2元素的内容会被编译解析出来
• 第二个h2元素的内容会直接显示{{message}}

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

  <script src="../js/vue.js"></script>
  <script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'v-pre测试'
    }
  })
  </script>

效果如下：

1.6 v-cloak

由于某些原因，比如网络加载原因或者数据渲染较慢，浏览器可能直接显示出未编译的mustache标签。

例如：

<div id="app">
    <h2>hello {{name}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
 setTimeout(()=>{
   const app = new Vue({
     el:'#app',
     data:{
       name:'zhangsan'
     }
   })
 },3000)
  </script>

此时页面的效果就是这样：

上面的显示效果显然是不好的。但是我们如果加上 v-cloak 指令,并设置样式，在没有渲染之前，页面就不会出现未渲染好的内容和标签：

<style>
  [v-cloak]{
    display: none;
  }
</style>

<h2 v-cloak>hello {{name}}</h2>

2. 绑定属性

前面介绍的指令是将值插入到我们的模板内容中，但是，除了内容需要动态决定外，某些属性我们也希望来动态决定，比如动态绑定a标签的href属性、img标签的src属性或者一些其他标签的class属性等等，此时，就需要用到这个指令：v-bind

v-bind：

• 作用：动态绑定属性
• 语法糖：：(冒号)
• 预期：any (with argument) | Object (without argument)
• 参数：attrOrProp (optional)

2.1 基本使用

通过Vue实例中的data绑定元素的src和href：

<div id="app">
    <a :href="url">vue官网</a>
    <br>
    <img :src="img" alt="">
  </div>
  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el:'#app',
      data:{
        url:'https://cn.vuejs.org/',
        img:'https://cn.vuejs.org/images/logo.png'
      }
    })
  </script>

效果如下：

2.2 绑定class属性

有时候，我们希望可以动态的切换class属性，比如：

当数据为某一状态时，字体显示红色

当数据为另一状态时，字体显示黑色

绑定class的两种方式：

• 对象语法
• 数组语法

2.2.1 对象语法

含义:class后面跟的是一个对象

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

<h2 :class="{'active':isActive}">hello world</h2>

• 用法2：可以通过判断，传入多个值

<h2 :class="{'active':isActive,'line':isLine}">hello world</h2>
...
data:{
        isActive:true,
        isLine:true
      }

效果如下:

<h2 class="active line">hello world</h2>

• 用法3：和普通的类同时存在，并不冲突

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

//属性
<h2 class="title active line">hello world</h2>

• 用法4：如果过于复杂，可以放在computed或者methods中

<div id="app">
    <h2 class="title"  :class="classes">hello world</h2>
  </div>
  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el:'#app',
      data:{
        isActive:true,
        isLine:true
      },
      computed:{
        classes(){
          return {avtive:this.isActive,line:this.isLine}
        }
      }
    })
  </script>

2.2.2 数组语法

含义：class后面跟的是一个数组

• 用法1：直接通过[ ]绑定一个类

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

• 用法2：可以传入多个值

 <h2 :class="['active','line']"></h2>

• 用法3：和普通的类同时存在，并不冲突

<h2 class="title" :class="['active','line']"></h2>

//属性
<h2 class="title active line"></h2>

• 用法4：如果过于复杂，可以放在computed或者methods中

<div id="app">
    <h2 :class="classes"></h2>
  </div>
  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el:'#app',
      computed:{
        classes(){
          return ['active','line']
        }
      }
    })
  </script>

2.3 绑定style属性

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

• 绑定方式1：对象语法

:style后面跟的是一个对象类型，其中，对象的key是CSS属性的名称，对象的value是具体赋的值

<div id="app">
    <h2 :style="{color:curColor,fontSize:fontSize+'px'}">hello world</h2>
  </div>
  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el:'#app',
      data:{
        curColor:'red',
        fontSize:14
      }
    })
  </script>

• 绑定方式2：数组语法

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

<div id="app">
    <h2 :style="[curColor,fontSize]">hello world</h2>
  </div>
  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el:'#app',
      data:{
        curColor:{color:'yellow'},
        fontSize:{fontSize:18+'px'}
      }
    })
  </script>

3. 计算属性

3.1 什么是计算属性

我们知道，在模板中可以直接通过插值语法来显示data中的数据，但是某些情况下，我们需要对数据进行一些处理，或者将多个数据结合起来显示。

例如：我们有firstName和lastName两个变量，需要显示完整的名称，我们可以直接用

{{firstName}}{{lastName}}

这样的插值语法来显示。

但是如果多个地方都需要显示完成的名称，我们就需要写很多个这样的代码。

其实，我们可以将上面的代码写成计算属性。

<div id="app">
    <h2>{{fullName}}</h2>
  </div>
  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el:'#app',
      data:{
       firstName:'van',
       lastName:'shu'
      },
      computed:{
        fullName(){
          return this.firstName+'.'+this.lastName
        }
      }
    })
  </script>

3.2 计算属性的复杂操作

 <div id="app">
    <h2>总价是:{{totalPirce}}</h2>
  </div>
  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el:'#app',
      data:{
       books:[
         {name:'java编程思想',price:100,num:10},
         {name:'并发编程的艺术',price:50,num:10},
         {name:'netty实战',price:10,num:100}
       ]
      },
      computed:{
        totalPirce(){
          let total = 0
          // for(let i = 0;i< this.books.length;i++){
          //   total+=this.books[i].price*this.books[i].num
          // }
          for(let book of this.books){
            total+=book.price*book.num
          }
          return total
        }
      }
    })
  </script>

3.3 计算属性的getter和setter

每个计算属性都包含了一个getter和一个setter。在上面的例子中，我们只是用getter来读取值，在某些情况下，也可以使用setter来设置值，代码如下：

 <div id="app">
    <h2>{{fullName}}</h2>
   <h2>{{firstName}}</h2>
   <h2>{{lastName}}</h2>
  </div>
  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el:'#app',
      data:{
       firstName:'van',
       lastName:'shu'
      },
      computed:{
        fullName:{
          get(){
            console.log('调用了get')
            return this.firstName+'.'+this.lastName
          },
          set(newVal){
            console.log('调用了set')
            const names = newVal.split('.')
            this.firstName = names[0]
            this.lastName = names[1]
          }
        }
      }
    })
  </script>

然后在console里输入 app.fullName=‘zhang.san’，会调用set方法，然后显示会调用get方法。

3.4 计算属性的缓存

我们可能会考虑一个问题：

methods和computed看起来都可以实现我们的功能，但是为什么会多出一个计算属性呢，直接都使用methods不就可以了？

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

<div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>

  </div>
  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el:'#app',
      data:{
       firstName:'van',
       lastName:'shu'
      },
      methods:{
        getFullName(){
          console.log('调用了getFullName')
          return this.firstName+'.'+this.lastName
        }
      },
      computed:{
        fullName(){
          console.log('调用了fullName')
          return this.firstName+'.'+this.lastName
        }
      }
    })
  </script>

结果如下，会发现，计算属性只调用了一次，但是方法却调用了三次。