1.計算屬性：

使用計算屬性來描述依賴響應式狀態的復雜邏輯。

關鍵字computed:{}//計算屬性，使用的時候和函數方法不一樣，不需要加括號。

簡單來說就是模板方法的復雜邏輯放到了計算屬性中去。

2.計算屬性緩存VS方法：

計算屬性值會基于其響應式依賴被緩存。其僅會在其響應式依賴更新時才會重新計算。方法調用在每次重渲染發生時再次執行函數。

3.class綁定：

class是屬性，可以使用v-bind進行綁定。可以綁定字符串，對象或者數組。

綁定對象以及多個對象的綁定：

綁定對象：

<p :class="{'active':isActive}">css樣式綁定</p>

多個對象綁定：

<div :class='classObject'>isActive</div>
classObject:{'active':isActive,'text-danger':true}

綁定數組【了解即可】：

<div :class="[activeClass,errorClass]"></div>
return{activeClass:'active',errorClass:'text-danger'}

數組中可以是一個，也可以是多個。數組中可以使用三元運算符號。

綁定數組和對象：

<div :class="[{'active':isActive},errorClass]"></div>
return{isActive:true,errorClass:"text-danger"}

ps：數組和對象進行綁定的時候，只能是數組嵌套對象，不能讓對象嵌套數組。

4.偵聽器，偵聽數據的變化：

關鍵字watch。同級的有data，computed，methods，watch。

偵聽器中的方法名有講究，要和data中的屬性名一致。

方法有兩個參數，newValue和oldValue。前者是改變之后的數據，后者是改變之前的數據。

5.表單輸入綁定：

v-model：進行值綁定，也可以使用復選框。

v-model的修飾符：

? ? ? ? .lazy：懶惰的，更改為在每次change事件之后更新數據。

? ? ? ? .number：只接受輸入的數字，其他的不管。

? ? ? ? .trim：獲取的時候去掉前后空格。

6.模板引用獲取dom操作：

前提：內容改變使用模板語法{{msg}}進行插值；屬性改變使用v-bind指令；事件使用v-on。

使用ref屬性進行掛載。掛載結束后引用都在暴露到this.$refs之上，使用this.$refs后可以獲取到ref掛載的dom節點。在獲取到節點之后，可以使用原生js的方法，比如：innerHTML，.value等。?如果沒有特別的需求，不要操作dom。

7.組件組成：

組件的優勢：可復用性，vue中是組件式開發。單文件組件開發。

引入組件的步驟：

? ? ? ? 1.將單文件組件放到components文件夾中。

? ? ? ? 2.在app.vue文件中的<script>使用import...from...引入單文件組件。

? ? ? ? 3.在app.vue文件中的<script>注入組件。export default{components:{[組件名]}}

? ? ? ? 4.在app.vue的<template>中顯示組件。以標簽的形式顯示組件。

【<style scoped>中的scoped有什么作用?

? ? ? ? 答：讓當前樣式只在當前組件中生效。

】

8.組件嵌套關系：

因為vue是組件式開發，所以組件之間進行前端頁面的布局，組件之間可以相互嵌套，?就使用組件引入的部分對組件進行嵌套，誰使用誰嵌套。

9.組件注冊方式：

就是組件的引入方式，分為全局注冊和局部注冊。

組件的引入方式三步：引入，注入，顯示。

全局注冊要在main.js中去注冊。

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

首先導入文件。創建[createApp]并掛載[mount]。

通過creataApp函數來創建一個應用示例，從vue導入createApp。應用實例必須在調用了mount()才會渲染，該方法接受一個參數，可以是一個dom元素或者是一個Css選擇器字符串。

公共資源：src目錄下的assets文件夾作用是存放公共資源，如圖片。

【注意：組件的注冊要在創建[createApp]和掛載[mount]中間寫】

局部注冊的組件要單獨放在components文件夾中。