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...
ref()ref() 返回一个包含属性 value 的对象
1234567891011121314import { ref } from 'vue';export default { setup() { const count = ref(0); function increment() {...
指令种类:v-html, v-bind, v-on, v-model, v-slot …
指令语法如下图所示:
动态参数(1)动态参数的值应为字符串或 null(null 会移除该绑定)
(2)动态参数的名称避免使用大写字母,因为会被强制转为小写(someAttr -> someattr)
123<a :[attributeName]="url"> .....
创建应用1npm create vue@latest
通过CDN使用vue这里使用了提供 npm 包服务的 CDN —— unpkg
1<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
DOM 中的根组件模板当根组件没有设置 template 选项时,Vue 将...