官網：Vue.js - 漸進式 JavaScript 框架 | Vue.js
vue3編寫有聲明式和響應式。該文章僅記錄聲明式。vue3聲明式與vue2相同。
一、生命周期
- 創建之前 beforeCreate()
- 已創建 created()
- 掛載之前 beforeMount()
- 已掛載 mounted()
- 銷毀之前 beforeUnmount()
- 已銷毀 unmounted()
二、模板語法
//文本插值
{{ value }}//原始html
<p v-html="value"></p>//屬性綁定
<p v-bind:id="value"></p>
<p :id="value"></p>//布爾型
<button :disabled="isButtonDisabled">Button</button>//綁定多個值
const objectOfAttrs = {id: 'container',class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>//JavaScript 表達式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>//函數調用
<time :title="toTitleDate(date)" :datetime="date">{{ formatDate(date) }}
</time>2.1 內置指令
- v-text 更新元素的文本內容
- v-html 更新元素的innerhtml
- v-show 基于表達式值的真假性，來改變元素的可見性。頁面渲染消耗多，適合頻繁切換顯示。
- v-if 基于表達式值的真假性，來條件性地渲染元素或者模板片段。元素切換消耗多。
- v-else 表示
v-if或v-if/v-else-if鏈式調用的“else 塊”。 - v-else-if 表示
v-if的“else if 塊”。可以進行鏈式調用。 - v-for 基于原始數據多次渲染元素或模板塊。
- v-on 給元素綁定事件監聽器。縮寫@。
- v-bind 動態的綁定一個或多個 attribute，也可以是組件的 prop。縮寫：
- v-model 在表單輸入元素或組件上創建雙向綁定。
- v-slot 用于聲明具名插槽或是期望接收 props 的作用域插槽。
- v-pre 跳過該元素及其所有子元素的編譯。
- v-once 僅渲染元素和組件一次，并跳過之后的更新。
- v-memo 緩存一個模板的子樹。僅用于性能至上場景中的微小優化，應該很少需要。最常見的情況可能是有助于渲染海量
v-for列表。 - v-cloak 用于隱藏尚未完成編譯的 DOM 模板。
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]"><p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p><p>...more child nodes</p>
</div>[v-cloak] {display: none;
}template<div v-cloak>{{ message }}
</div>三、變量定義及使用
聲明式定義和響應式不同，代碼如下。變量是在函數中返回。
<template>
<p>{{ msg }}</p>
<div><ul><li v-for="(item,index) in list" :key="index">{{ item.value }}</li></ul>
</div>
<p ></p>
</template>
<script>
export default{name:'Test',data:function(){return{msg:"test",list:[{id:1,value:test1},{id:2,value:test2},{id:3,value:test3},]}},
}
</script>3.2 計算屬性
?在computed中使用變量名作為方法名，可在模板中使用。計算屬性也可以定義為方法，在methods中定義，但是計算屬性基于它們的響應式依賴進行緩存，只在相關響應式依賴發生改變時它們才會重新求值。
以下代碼中計算屬性now將不再更新，因為Date.now()不是響應式依賴。
<template>
<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 計算屬性的 getterreversedMessage: function () {// `this` 指向 vm 實例return this.message.split('').reverse().join('')},now: function () {return Date.now()}}
})
</script>3.3 監聽
通過 watch 選項提供了一個更通用的方法，來響應數據的變化。
之前使用開源vue后臺框架，相同頁面不同參數的時候，使用監聽處理傳過來的參數，便于多個頁面顯示。
<template>
<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p>
</div>
</template>
<script>
var vm = new Vue({el: '#example',data: {question: '',answer:'',},watch: {// 如果 `question` 發生改變，這個函數就會運行question: function (newQuestion, oldQuestion) {this.answer = newQuestion}},
})
</script>
