Vue
TwoZeroZero
这个作者很懒,什么都没留下…
展开
-
VUE:如何实现组件异步加载?
1. 什么是异步组件?即只在组件需要渲染的时候进行加载渲染并缓存。2. 为什么需要异步加载组件?当项目功能越来越多,所包含的子组件也越来越多,导致页面加载,访问速度过慢,所以需要优化页面加载的性能。3. 异步加载组件方法可以使用懒加载,即 () => import ( 地址)关于路由懒加载:VUE:实现路由懒加载使用require// 全局组件注册Vue.component('Home, function (resolve) { // 这个特殊的 `require`原创 2020-09-28 12:03:10 · 1291 阅读 · 0 评论 -
VUE:实现路由懒加载
安装插件:npm i @babel/plugin-syntax-dynamic-import在babel.config.js文件中配置:plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ], .原创 2020-09-28 11:51:46 · 329 阅读 · 0 评论 -
Vue:如何理解MVVM?
MVVMMVVM:即Model-View-ViewModel的缩写。背景:传统组件,只是静态渲染,通过拼接数据进行渲染,更新需要依赖于DOM操作。而Vue—MVVM:数据驱动视图。只需要更改数据,不需要自己操作DOM,Vue框架本身会根据数据重新渲染视图。Model:数据模型,进行数据的业务逻辑处理;VIew:视图,将数据模型转化为视图;ViewModel:监听数据模型的改变和控制视图行为、处理用户交互,连接Model和View。总结:在MVVM架构下,View 和 Model 之间并没有直原创 2020-09-22 00:01:07 · 196 阅读 · 0 评论 -
Vue:描述Vue的生命周期以及相关面试题
Vue的生命周期Vue实例从创建到销毁的过程,即开始创建,初始化数据,编译模板,挂载DOM,渲染,更新,渲染,卸载等一系列过程。Vue生命周期图示(转载)Vue生命周期钩子即指生命周期函数(事件)Vue生命周期有四个阶段,八个过程create(初始化),mount(挂载),update(更新),destroy(销毁)Vue生命周期往细地说,有八个过程(8个钩子函数):生命周期钩子详细发生beforeCreate在实例初始化之后,数据观测(data observer) 和原创 2020-09-21 21:03:30 · 771 阅读 · 0 评论 -
Vue:兄弟组件间如何通信?
兄弟组件间如何通信?非父子组件间无法直接通信,通过单独的事件中心管理组件间的通信。事件中心:可以单独创建一个Vue的实例对象,来进行事件的监听,触发和销毁。监听Hub.$on('事件名', fn)触发Hub.$emit('事件名', args)销毁Hub.$off('事件名')一、创建事件中心在外部创建一个js文件Hub.jsimport Vue from 'vue'var Hub = new Vue()export default Hub二、借助父组件来引用两个兄弟原创 2020-09-21 01:24:01 · 2906 阅读 · 0 评论 -
Vue:父子组件如何利用props和$emit通信
父组件向子组件传值——利用props子组件怎么接收?通过子组件内部的props接收父组件传递过来的值,可以在模板中使用注意:如果props使用驼峰式命名,则父组件传值的属性需使用短横线。因为HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。<template> <div>{{msg}}:{{title}}</div> </template><script>export defa原创 2020-09-20 22:18:18 · 215 阅读 · 1 评论 -
Vue:v-if 和 v-show 的区别和使用场景
v-if 和 v-show 的区别和使用场景Vue文档中对 v-if 和 v-show 的解释:实例:<template> <div id="app"> <div> <p v-if="msg === 'a'">v-if: a</p> <p v-else-if="msg === 'b'">v-if: b</p> <p v-else>other</p>原创 2020-09-15 23:34:10 · 149 阅读 · 0 评论