VUE3基础学习（二）模板语法，简单响应式，计算属性-CFANZ编程社区

说明：Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。

一、模板语法

{{}}使用

<span>Message: {{ msg }}</span> {{}} 标识的数据将会从数据中获取，同时每次 msg 属性更改时它也会同步更新。

v-html

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

若想插入 HTML，你需要使用 v-html 指令

Attribute 绑定

<div v-bind:id="dynamicId"></div>

简写 <div :id="dynamicId"></div>

布尔型 Attribute

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为[真值]或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他[假值]时 attribute 将被忽略。

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

template

<div v-bind="objectOfAttrs"></div>

使用 JavaScript 表达式

注意：仅仅支持简单的表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

二、响应式

如下例子：

<script>  
export default {  
    created() {  
    // 生命周期钩子中创建  
    },  
    unmounted() {  
    // 最好是在组件卸载时    
    },  
    data() {  
        return {  
            count: 1  
        }  
    },  
    methods :{  
        increment(){  
        this.count ++  
        console.log(this.count)  
        }  
    },  
  
// `mounted` is a lifecycle hook which we will explain later  
mounted() {  
    // `this` refers to the component instance.  
    console.log(this.count) // => 1  
    this.increment()  
    }  
}  
</script>  
  
<template>  
    <div>    
        <span>Count is: {{ count }}</span>  
        <button @click="increment">{{ count }}</button>  
    </div>  
</template>

1、 data 选项来声明组件的响应式状态 2、要为组件添加方法，我们需要用到 methods 选项。

计算属性

说明：模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。这时候我们需要用计算属性了。实例：

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}

template

<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>

计算属性与方法对比

如上同样用方法也可以实现，但其中有什么区别么？

<p>{{ calculateBooksMessage() }}</p>

// 组件中
methods: {
  calculateBooksMessage() {
    return this.author.books.length > 0 ? 'Yes' : 'No'
  }
}

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。