vue基础（上篇）

[](()v-once

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

[](()v-model

v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用

双向数据绑定

当数据发生变化的时候，视图也就发生变化

当视图发生 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 变化的时候，数据也会跟着同步变化

[](()v-on

用来绑定事件的

形式如：v-on:click 缩写为 @click;

[](()v-bind

v-bind 指令被用来响应地更新 HTML 属性

v-bind:href 可以缩写为 :href;

可以缩写为下面

[](()v-if

条件判断

使用场景：多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素，进行两个视图之间的切换

v-show 和 v-if的区别：v-show本质就是标签display设置为none，控制隐藏， v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。v-if是动态的向DOM树内添加或者删除DOM元素， v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

[](()v-for

循环结构

用于循环的数组里面的值可以是对象，也可以是普通元素

key 的作用

key来给每个节点做一个唯一标识，key的作用主要是为了高效的更新虚拟DOM

[](()自定义指令

[](()介绍

内置指令不能满足我们特殊的需求，Vue允许我们自定义指令

[](()Vue.directive 注册全局指令

[](()Vue.directive 注册全局指令 带参数

[](()自定义指令局部指令

局部指令，需要定义在 directives 的选项 用法和全局用法一样

局部指令只能在当前组件里面使用

当全局指令和局部指令同名时以局部指令为准

[](()修饰符

---

[](()事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符-修饰符是由点开头的指令后缀来表示的

[](()按键修饰符

在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

[](()自定义按键修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名

[](()表单修饰符

• .number 转换为数值

注意点: - 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值 - 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。