Vue知识点笔记（持续更新）

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

安能摧眉折腰事权贵，使我不得开心颜？
——《梦游天姥吟留别》

Vue入门学习专栏

Vue知识点汇总

本文主要记录前端Vue开发中遇到的知识点

1. v-model

刚开始用Vue，不知道v-model是啥意思，官网和博客搜罗一下简单总结如下
v-model作用为双向绑定，相当于同时使用v-bind和v-on

1.1 常用

举例

<input v-model="test">

相当于

<input v-bind:value="test" v-on:value="test = $event.target.value">

自定义组件中使用

<component v-model="test"></component>

相当于

<component v-bind:value="test" v-on:input="test = argument[0]"></component>

test接收的值是事件回调函数的第一个参数，在自定义组件中，需使用$emit触发事件，如下

this.$emit("input", value)

1.2 v-model的其他用法

v-model还可以加后缀.lazy、.trim、.number

• v-model.trim表示去除字符串首尾的空格
• v-model.number表示将数据转换位数值类型
• v-model.lazy表示在每次事件触发后将输入的值与数据进行同步，相当于change事件

注意：.lazy用法时，只有当焦点移出标签区域才会触发事件，有点像延迟同步数据

用法如下

<input v-model.trim="message">
<input v-model.number="message">
<input v-model.lazy="message">

2. 样式优先级

前端代码中，使用样式时经常使用的是类选择器，而样式有时会不止一层，所以需要记住样式的优先级，使用不同级别的样式进行页面样式配置
在使用的时候尽量使用较低优先级，后面可使用更高优先级进行样式的重置

样式的优先级如下，从高到低

• 5级
  !import
  顶级优先级，可重置JavaScript设置的样式，通常不用

• 4级
  style内联样式

• 3级
  id选择器

• 2级
  类选择器、属性选择器、伪类选择器

• 1级
  标签选择器

• 0级
  通配符选择器*、逻辑组合伪类（如:not()）

• 最低优先级
  继承的样式

感谢阅读，祝君暴富！