vue核心知识点

 

vue.js的两个核心是什么

1.数据驱动也叫双向数据绑定

Vue.数据观测管理在技术实现上,利用的是ES5Object.defineProperty和存储器属性：getter和setter，可称为基于依赖收集的观测机制。核心是VM，保证数据和视图的一致性

2. 组件系统

1.模板(template)：模板声明了数据和最终展现给用户的DOM之间的映射
2.初始数据(data)：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有状态
3.接受外部参数(props)：组件之间通过参数来进行数据的传递和共享
4.方法(methods)：对数据的改动操作一般都在组件的方法内进行
5.生命周期钩子函数(lifecycle hookss)：一个组件会触发多个生命周期钩子函数，最新版本对于生命周期函数名称改动很大
6.私有资源(assets): Vue.js当中将用户自定义的指令、过滤器、组件统称为资源，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用

vue几种常用的指令

• v-if: 根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建
• v-show: 根据表达式的真假判断，切换元素的display CSS属性
• v-for: 循环指令，基于一个数组或者对象渲染一个列表，vue2.0以上必须配合Key使用
• v-bind: 动态绑定一个或多个特性，或一个组件prop到表达式
• v-on：用于监听指定元素的DOM事件，比如点击事件和绑定事件监听器
• v-modle：实现表单传输和应用状态之间的双向绑定
• v-pre：跳过这个元素和它的子元素的编译过程，可以用来显示Mustache标签，跳过大量没有指令的节点会加快编译
• v-once: 只渲染元素和组件一次，随后重新渲染，元素/组件及其所有子节点将被视为静态内容并跳过，这可以优化更新性能

v-if和v-show的具体区别

• 共同点：v-if和v-show都能动态显示DOM元素
• 区别：
  • 编译过程：v-if是真正的条件渲染，因为它会确保在切换过程中条件块内事件监听器和子组件适当被销毁和重建。v-show的元素始终会被渲染并保留在DOM中，v-show只是简单切换元素的css属性display
  • 编译条件：v-if是惰性的，v-show不管在什么条件下，元素总会被渲染，并且只是简单的css切换
  • 性能消耗：v-if有更高的切换消耗。v-show有更高的初始渲染消耗
  • 应用场景：v-if适合运行时条件很少改变时使用。v-show适合频繁切换

vue常用修饰符

v-on 指令常用修饰符

• .stop 调用event.stopPropagation() 禁止事件冒泡
• .prevent 调用envent.preventDefault() 阻止事件默认行为
• .capture 添加事件侦听器使用capture模式
• .self 当事件是从侦听器绑定的元素本身触发时才触发的回调
• .{keyCode | keyAlias} 只当事件从特定键触发时才触发回调
• .native 监听组件根元素的原生事件
• .once 只触发一次回调
• .left 只当点击鼠标左键触发
• .right 只当点击鼠标右键触发
• .middle 只当点击鼠标中键触发
• .passive 以{passive: true} 模式添加侦听器

v-bind 指令常用修饰符

• .prop 被用于绑定DOM属性
• .camel 将kebab-case特性名转换成camelCase
• .sync 语法糖，会拓展成一个更新父组件绑定值的v-on侦听器

v-model 指令常用修饰符

• .lazy 取代input监听change事件
• .number 输入字符串转为数字
• .trim 输入首尾空格过滤