Vue
xiaoxicccc
Web前端开发工程师---->码农QAQ
展开
-
Vue双向数据绑定的原理+mvc mvp mvvm设计模式图解
vue特点易用(使用成本低),灵活(生态系统完善,适用于任何规模的项目),高效(体积小,优化好,性能好)Vue是一个MVVM的js框架,但是,Vue 的核心库只关注视图层,开发者关注的只是m-v的映射关系MV*模式(MVC/MVP/MVVM)mv*模式MVCModel View Controller 用户对View操作以后,View捕获到这个操作,会把处理的权利交移给 Controller;Controller会对来自View数据进行预处理、决定调用哪个Model的接原创 2020-09-05 16:00:31 · 417 阅读 · 0 评论 -
Vue计算属性(computed)带案例详解
计算属性 复杂逻辑,模板难以维护(1) 基础例子有的时候我们需要在模板中使用数据a,这个时候就需要用到表达式,但是有的地方我们需要对a数据进行一些简单的处理后才能使用,那么我们就会在表达式中写一些js逻辑运算<div id="example"> {{ message.split('').reverse().join('') }}</div>这样我们的维护就会非常困难,也不便于阅读(2) 计算缓存 vs methods我们就可以在methods里设置一个方法,在模原创 2020-09-05 15:57:18 · 1001 阅读 · 0 评论 -
Vue中的自定义指令(directive)带案例详解
自定义指令自定义指令介绍 directives - 对普通 DOM 元素进行底层操作(1) 自定义指令注册当页面加载时,该元素将获得焦点 (注意:autofocus在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: functi原创 2020-09-04 18:10:23 · 3207 阅读 · 0 评论 -
Vue的vue-router路由导航守卫及其解析
导航守卫一、什么叫导航?导航就是路由正在发生变化二、导航守卫、路由守卫、路由的钩子函数在路由发生变化时会自动触发的一些函数三、守卫有哪些一、全局守卫(通过new VueRouter()生成的这个实例对象去使用) 1.全局前置守卫 beforeEachrouter.beforeEach((to, from, next) => {}) 2.全局后置守卫 afterEachrouter.afterEach((to, from) => { //afterEach 是在原创 2020-09-04 11:45:07 · 999 阅读 · 0 评论 -
Vue项目的现代化(使用Vue-cli脚手架快速搭建Vue项目)
现代化的 vue项目目前为止,我们的vue的讲解都是通过cdn的方式去弄的。而现代化的 vue 项目,用的是构造工具打包工具 npm相关的方法。构建打包工具使用的是webpack可以理解为gulp类似的东西使用vue官方的脚手架工具(@vue/cli)快速搭建现代化的 vue 项目什么叫脚手架呢?快速搭建项目的工具。如何使用全局安装工具$ npm install @vue/cli -g全局安装完成之后,提供了一个vue的命令。使用vue -v 来查看一下脚手架的版本$原创 2020-09-04 11:42:43 · 168 阅读 · 0 评论 -
Vue的生命周期钩子函数详解
生命周期每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载到,只是一个空壳,无法访问到数据和真实的dom,一般不做操作挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里同步更改数据不会触发updated函数,一般可以在这里做初始数据的获取。 做异步ajax,绑定初始化事原创 2020-09-04 11:36:52 · 102 阅读 · 0 评论