vue 指令

Vue.js指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。它扩展了HTML标签的功能.

Vue指令的作用是通过v-属性名,实现对DOM的响应式加载

v-bind 给标签绑定属性

可以简写: v-bind:属性名 简写为 :属性名

v-bind 可以一次性绑定多个属性

class 与style

class: 给标签设置一个类样式

style: 给标签绑定行内样式

:class 使用方式

1. :class=“变量名” 适用场景:样式的类名不确定,个数确定, 需要动态指定

2. :class=“{类名:boolean值, ….}” 适用场景:样式的类名,个数确定,但是是否使用不确定,类是否实现, 值决定,值为true,使用, false: 不使用

3. :class=“[‘xx’,’‘’,…]” 适用场景:样式的类名,个数都不确定,动态添加类,动态删除类

:style使用方式

:style=”{样式属性名1:变量,样式属性名2:变量2,....}”;

css样式属性名写法: a-b: background-color font-size

:style中样式属性名写法: 1.“a-b” “background-color ” 2.小驼峰: aB backgroundColor 推荐

v-text v-html

v-text: 与{{}} 效果一样的, 对html标签不进行解析,作为普通文本

v-html: 对html标签进行解析

控制标签的显示隐藏

• v-if v-else-if v-else

  v-if 控制标签显示隐藏:

  对dom进行添加与删除操作

  v-if=“true”, 页面添加这个dom元素,v-if=“false”, 页面删除这个dom元素

  注意:

  v-if, v-else, v-else-if之间不能插入其他标签,否则无效

• v-show

  v-show控制标签显示隐藏:

  这个元素永远存在, 控制的dom元素行内样式: display, 隐藏: 给dom元素添加display:none行内样式, 显示: 把display:none 去掉

  v-show效率比v-if高

v-if与v-show的比较:

1. 首先，在用法上的区别：

• v-show是不支持template；

• v-show不可以和v-else一起使用；

1. 其次，本质的区别：

• v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；

• v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；

1. 开发中如何进行选择呢？

• 如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；

• 如果不会频繁的发生切换，那么使用v-if；

v-for

v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，也就是循环指令.其中 items 是源数据的数组，而 item 是迭代项的别名：

普通fori循环 1…n

细节:

in关键字使用of替换

v-for中通过key管理状态

如果没有设置key, 默认使用的数组的下标进行新旧dom对比

如果是设置key, 使用的设置key进行新旧dom的对比, 效率高

实际开发中, 推荐使用for循环, 都设置key, 除非循环只是读取数据,没有修改, 可以不设置key

key: 唯一值, 字符串, 数值, 有id就使用id

v-model 重点

只能在表单元素中使用

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；

:value无法做到双向数据绑定 vue提供v-model进行表单与data中的数据双向绑定

它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

表单元素:

监听的input事件

checkbox,radio,select 监听的change事件

1. 文本类型( 文本框,密码框, 多行文本框)的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；

2. <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；

<input type="checkbox"> : v-model, 绑定的checked属性,

• 如果单个checkbox, v-model, 绑定的checked属性, 绑定的值是 boolean类型, true: 选中,false:没有选中

• 如果是多个相同name的checkbox,绑定的checked属性, 绑定的值是checkbox的value值

  

  v-model: 忽略value,checked,selected属性,这些属性无效

<input type="radio">

v-model, 绑定的checked属性, 绑定的值是checkbox的value值

1. select下拉框

• 如果是单选, v-model绑定的 单个option中的value

• 如果是多选: v-model绑定的 数组,option中的value数组

修饰符:

1. .lazy- 取代 input 监听 改为change 事件,

加.lazy: 修改data中的数据, 是在该文本框失去焦点的时候,才去修改

没有加: 修改data中的数据, 输入内容, 更新

1. .number: 输入字符串转为数字

.number修饰符并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number类型

1. .trim: 去前后空格