基础1234567891011<input ref="myInput" /><script setup> import { ref, onMounted } from 'vue'; const myInput = ref(null); // 必须和模版中的 ref 同名 onMoun...
基本用法123456789<script setup>import { ref, watch } from 'vue';const initVal = ref('');watch(initVal, (newVal, oldVal) => { ...});</script>
侦...
vue3 生命周期图示
注册生命钩子用法1234567<script setup>import { onMounted } from 'vue';onMounted(() => { console.log('now mounted');});</script>
调用 onM...
基础123<input :value="text" @input="event => text = event.target.value" />
用 v-model 简化：
1<input v-model="text" />
类型单行12<p>{{ mes...
v-on:click=”” 缩写为 @click
在內联事件处理器中访问事件参数在內联事件中访问原生 DOM 事件：
向处理器中传入一个 $event 变量123<button @click="warn('message1', $event)">Submit</button>
使用内联箭头函数123<butto...
事件捕获和事件冒泡 是浏览器处理DOM元素事件的两种方式（顺序：先捕获，再冒泡）。
123456<!DOCTYPE html><html> <body> <div>click me</div> </body></html>
事件捕获事件捕获从文档根节点开始，逐级向下传播到目标元素。
点击 di...
基础1<li v-for="(item, index) in items"></li>
可以使用 of 代替 in：
1<li v-for="(item, index) of items"></li>
支持解构语法：
1234567<li v-for="{message...
绑定一个返回对象的计算属性1234567const isActive = ref(true);const error = ref(null);const classObject = computed(() => ({ active: isActive.value && !error.value, 'text-danger': e...
简述在父组件中修改子组件的某些样式，发现不生效，删去<style scoped></style>中的 scoped 后生效。
原因scoped 实现样式隔离的原理为：
编译时，父组件的所有标签、子组件的根标签、以及所有的样式 都会加上特殊的标识；
因为子组件内部的标签都没有此种标识，所以样式就不会生效。
实例不添加 scoped123456789101112<!...
基础computed() 方法接受一个 getter 函数，返回一个计算属性 ref
因为 ref 会在模板中自动解包，所以在表达式中引用无需 .value
12345678910111213141516171819<script setup>import { reactive, computed } from 'vue';const au...
