一. 文本插值

普通文本可以使用双大括号 {{ }} ，要想插入 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>