一. 文本插值

普通文本可以使用雙大括號 {{ }} ，要想插入 HTML，需要使用 v-html 指令。

<template><h1>Message: {{ state.msg }}</h1><p>{{ state.count + 1 }}</p><p>{{ state.rawHtml }}</p><p v-html="state.rawHtml"></p>
</template><script setup>
import { reactive } from 'vue'const state = reactive({msg: 'Hello World!',count: 3,rawHtml: '<a href="https://www.baidu.com">百度一下</a>'
})
</script>

二. 條件渲染

v-if 指令用于條件性地渲染一塊內容。這塊內容只會在指令的表達式返回真值時才被渲染。

v-show 指令會在 DOM 渲染中保留該元素，只是會切換元素上 display 的 CSS 屬性。

<script setup>
import { ref } from 'vue'const type = ref("C")
</script><template><p v-if="type === 'A'">A</p><p v-else-if="type === 'B'">B</p><p v-else>C</p><p v-show="type === 'A'">A</p><p v-show="type === 'B'">B</p><p v-show="type === 'C'">C</p>
</template>

三. 列表渲染

v-for 指令可以基于一個數組來渲染一個列表，需要使用 item in items 形式的特殊語法，其中 items 是源數據的數組，而 item 是迭代項的別名。v-for 也支持使用可選的第二個參數表示當前項的位置索引。

<script setup>
import { reactive } from 'vue'const items = reactive([{title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'
}])
</script><template><ul><template v-for="(item, index) in items">			//列表<li v-for="(value, key, idx) in item">			//對象{{ index }}.{{ idx }}  {{ key }}: {{ value }}</li>		  </template></ul>
</template>

四. Attribute 綁定

雙大括號不能在 HTML attribute 中使用，想要響應式的綁定一個 attribute，應該使用 v-bind 指令，可以簡寫為 :。

v-bind 指令將元素的 attribute 與組件的屬性進行綁定，如果綁定的值是 null 或 undefined，那么該 attribute 將會從渲染的元素上移除。

<template><p v-bind:id="state.id" :class="state.class">單一屬性綁定</p><button :disabled="state.isButtonDisabled">點擊一下</button><p v-bind="state.objectOfAttrs">多個屬性綁定</p><p :[state.attributeName]="state.id">動態參數名</p>
</template><script setup>
import { reactive } from 'vue'const state = reactive({attributeName: 'id',id: 'container',class: 'wrapper',isButtonDisabled: true,objectOfAttrs: {id: 'container',class: 'wrapper',}
})
</script>

五. class 與 style 綁定

Vue 專門為 class 和 style 的 v-bind 用法提供了特殊的功能增強。除了字符串外，表達式的值也可以是對象或數組。

<template>
<p class="static" :class="{ active: isActive, 'text-danger': hasError }">綁定對象</p>
<p :class="classObject">綁定一個返回對象的計算屬性</p>
<p :class="[isActive ? activeClass : '', errorClass]">綁定數組</p><p :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">樣式多值</p>
</template><script setup>
import { ref, computed } from 'vue'const isActive = ref(true)
const hasError = ref(false)const classObject = computed(() => ({active: isActive.value && !error.value,'text-danger': hasError.value
}))const activeClass = ref('active')
const errorClass = ref('text-danger')</script>

六. 事件綁定

Vue 使用 v-on （簡寫為 @）指令來監聽 DOM 事件，并在事件觸發時執行相應的 JavaScript。

<template><p> {{count}} </p><button @click="add"> Add 1 </button><!-- <button @click="count++"> Add 1 </button> -->
</template><script setup>
import { ref } from 'vue'const count = ref(0)const add = (event) => {count.value++console.log(event.target)		// 通過enent.target訪問DOM元素
}
</script>

七. 表單輸入綁定

在前端處理表單時，使用 v-model 指令將表單輸入框的內容同步給 JavaScript 相應的變量。

<script setup>
import { reactive } from 'vue'const state = reactive({input: '',textarea: '',checked: true,checkedNames: ['John', 'Mike'],picked: 'two',selected: 'A',
})
</script><template><p>輸入框：{{ state.input }}</p><input v-model="state.input"/><p>多行文本:{{ state.textarea }}</p><textarea v-model="state.textarea" /><p>單一復選框：{{ state.checked }}</p><input type="checkbox" v-model="state.checked" /><label for="checkbox">{{ state.checked }}</label><p>多個復選框：{{ state.checkedNames}}</p><template v-for="item in ['Jack', 'John', 'Mike']"><input type="checkbox" :value="item" v-model="state.checkedNames" /><label :for="item">{{ item }}</label></template><p>單選按鈕: {{ state.picked}}</p><template v-for="item in ['one', 'two']"><input type="radio" :value="item" v-model="state.picked"/><label :for="item">{{ item }}</label></template><p>選擇器：{{ state.selected}}</p><select v-model="state.selected"><template v-for="item in ['A', 'B', 'C']"><option>{{ item }}</option></template></select>
</template>