【Vue3重点概念总结和实践四】（v-bind() 动态CSS / .stop 阻止事件冒泡 / 自定义修饰符）

目录

1、动态CSS

2、阻止事件冒泡

3、自定义修饰符

4、Vue3 + Vue-cli (1) 基础篇

5、Vue3+ Vue-cli (2) 组件篇

---

1、动态CSS

原题： 

vuejs-challenges/questions/14-dynamic-css-values/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

v-bind()单文件组件的 

这个语法同样也适用于 

文档：

单文件组件 CSS 功能 | Vue.js

2、阻止事件冒泡

原题： 

vuejs-challenges/questions/243-prevent-event-propagation/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀。

.stop 单击事件将停止传递

文档：

事件处理 | Vue.js

3、自定义修饰符

原题： 

请创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值首字母转为大写。

答案：

组件的 v-model 上所添加的修饰符，可以通过 modelModifiers prop 在组件内访问到。在下面的组件中，我们声明了 modelModifiers 这个 prop，它的默认值是一个空对象；

注意这里组件的 modelModifiers prop 包含了 capitalize 且其值为 true，因为它在模板中的 v-model 绑定 v-model.capitalize="myText" 上被使用了。

有了这个 prop，我们就可以检查 modelModifiers 对象的键，并编写一个处理函数来改变抛出的值。在下面的代码里，我们就是在每次  元素触发 input 事件时将值的首字母大写。

子组件：

父组件：

文档：

组件 v-model | Vue.js

4、Vue3 + Vue-cli (1) 基础篇

Vue3 + Vue-cli (1) 基础篇_vue3 vue-cli_小草莓蹦蹦跳的博客-CSDN博客

5、Vue3+ Vue-cli (2) 组件篇

Vue3+ Vue-cli (2) 组件篇_vue3一个根组件写法_小草莓蹦蹦跳的博客-CSDN博客