vuejs之动态组件、修饰符、混入mixins、内置组件、路由懒加载 |
您所在的位置：网站首页 › number修饰可数还是不可数 › vuejs之动态组件、修饰符、混入mixins、内置组件、路由懒加载 |
|
动态组件
import 你的组件 from "路径"
export default {
data(){
return {
你的组件
}
}
}
修饰符
事件修饰符[掌握]
.stop===阻止事件冒泡 .prevent===阻止默认行为 语法 @事件类型.stop=“函数” 阻止事件冒泡 @事件类型.prevent=“函数” 阻止浏览器默认行为 @事件类型.stop.prevent=“函数” 阻止事件冒泡和浏览器的默认行为 键盘修饰符[掌握].enter === 回车键 .space === 空格键 .up ===上键 .down===下键 .left===左边 .right===右边 表单修饰符[掌握]v-model.lazy=“值” 把底层input事件改成change v-model.number=“值” 只能输入数字 v-model.trim=“值” 去掉首尾的空格 sync修饰符[了解]是子组件修改父组件的值一种简写 混入mixins[了解]–不建议开发中滥用缺陷: 命名冲突 滥用的话后期很难维护 不好追溯源，排查问题稍显麻烦 不能轻易的重复代 //作用:提取组件的公共部分 import xx from "混入" export default { mixins:[x,y,z,ccc] } 内置组件– slot: 插槽 匿名插槽 具名插槽 作用域插槽 – component: 通过 :is 动态挂载组件 动态组件 把组件当成数据 – transition: 写动画 // 进入动画的过程 和 离开动画的过程 .名字-enter-active, .名字-leave-active { transition: opacity .5s; } // 动画开始的瞬间 和 结束的瞬间 .名字-enter, .名字-leave-to { opacity: 0; }-keep-alive :缓存组件[掌握] include:包含 exclude:除开 max:最多缓存组件个数 你需要缓存的组件 v-model的底层原理[面试]可以实现数据双向绑定? 表单元素绑定value的值 表单元素添加input的事件 表单元素给父组件自定义事件input 懒加载 路由懒加载—解决首屏加载时间[掌握] { path:"路由", component:()=>import("组件的路径") }注意:第一次进来要加载组件和加载很多次组件不需要懒加载 组件懒加载(异步组件)[了解] components: { //组件懒加载 异步组件 用到了之后哉加载这个组件 NumberInput: () => import("@/components/NumberInput.vue"), } MVVM[面试]是一种架构模式,vue的底层就是这种模式 M:model数据模型层 提供数据 V:View视图层 页面展示 VM:ViewModel层,是M和V之间桥梁 M->V:数据改变了,页面跟着变. 数据进行挟持 Object.defineProperty V->M:页面变了,数据跟着变,对节点进行监听事件 虚拟DOM[面试]是一个js对象,和真实dom一样的.存储在内存中. 数据变了,先更新虚拟dom,虚拟dom通过diff算法和真实dom进行对比(同层对比),替换变化的地方. v-for需要key,就是提供给虚拟dom对比使用,优化性能. |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |