Vue2.x
文章平均质量分 52
仰.
程序员小崔,努力写代码
展开
-
Vue引入子组件之后声明周期执行顺序
注意:在子组件发生变化时才能打印出从子—挂载后的声明周期原创 2022-03-31 17:46:32 · 224 阅读 · 2 评论 -
Vue-router实现路由跳转
(1).router-link1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 2.带参数 <router-link :to="{name:'home', params: {id:1}}原创 2022-03-10 20:53:41 · 1041 阅读 · 0 评论 -
浅谈优化首屏加载的方法
1.路由的懒加载。const routes = [{ path: '/', name: 'login', component: () => import ('../views/Login.vue'), meta: { isNext: false, } },]2.采用CDN线上链接加速。(在public文件中如同以下代码替换组件链接)。<link原创 2022-03-09 14:05:50 · 698 阅读 · 2 评论 -
Vue框架文件目录
进来直接看图原创 2022-03-07 14:44:06 · 389 阅读 · 0 评论 -
Vue中—foreach/map/filter
1.foreach—用来循环遍历数组,(会改变原数组,可以对每一个数据进行同一个操作没有返回值)不能循环数组包含对象。<script>export default { data() { return { Array: [1, 2, 3, 4, 5, 6], }; }, mounted() { let arr = []; this.Array.forEach((item, index, Array) => { //原创 2022-03-05 17:32:01 · 1685 阅读 · 1 评论 -
Vue—修改数据不渲染Dom问题
一、添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><script>export default { data:()原创 2022-02-17 20:12:39 · 2658 阅读 · 0 评论 -
Vue中的$nextTick()
一、nextTick的理解?在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM,简单来说就是当数据更新时,在DOM中渲染完成后,执行回调函数。nextTick本质是一种优化策略二、$nextTick(callback) 使用原理: Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被...原创 2022-02-17 19:24:49 · 654 阅读 · 0 评论 -
Vue——电商后台——项目优化
1.添加进度条 1.cnpm install --save nprogress //安装依赖 2.第二步在router/index.js导入进度条和进度条样式 如果想要在所有进入页面都显示进度条,就使用全局路由钩子, 如果是单个页面就使用, 路由独享守卫 3.//router.js中导入 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 4.//通过路由守卫配置// 进入之前路由元信原创 2022-02-17 16:45:57 · 431 阅读 · 0 评论 -
Vue中的solt插槽
一、概念:插槽就是父组件往子组件中插入一些内容。二、插槽的种类:有三种方式,默认插槽,具名插槽,作用域插槽默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据单个slot (默认插槽 或 匿名插槽)就是没有名字的插槽,一个组件里面只允许存在一个匿名插槽。 <div class="fa"> <h1>父组件</h1> <child>原创 2022-02-16 17:05:15 · 1274 阅读 · 0 评论 -
Vue中v-for中的key
一、作用与原因key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode节点二、场景背后的逻辑场景1: 当我们在使用v-for时,需要给单元加上key如果不用key,Vue会采用就地复地原则:最小化element的移动,并且会尝试尽最大程度在同适当的地方对相同类型的element,做patch或者reuse。如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被原创 2022-02-16 16:07:26 · 1123 阅读 · 0 评论 -
vue使用keep-alive缓存页面优化项目
一、概念keep-alive 是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中二、作用在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性三、原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中/在 render(页面渲染) 时..原创 2022-02-16 15:50:06 · 464 阅读 · 0 评论 -
vue脚手架本地开发跨域请求设置
vue脚手架配置在根目录创建vue.config.js在module.exports中配置devserver的内容devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target:'http://localhost:3000/',//跨域请求资源地址原创 2022-02-16 07:35:20 · 335 阅读 · 0 评论 -
vue路由与路由传参
一、Vue路由基础用法:1 .安装 npm install vue-router --save2 .main.js中//Vue路由:引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由:引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld fr原创 2022-02-14 21:30:29 · 399 阅读 · 0 评论 -
vue自定义过滤器
vue中的过滤器分为两种:局部过滤器和全局过滤器全局过滤器// global-filters是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filters('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })var app = new Vue({ el: '#ap..原创 2022-02-13 20:22:10 · 595 阅读 · 0 评论 -
Vue自定义指令
一、 什么是自定义指令除了核心功能默认内置的指令 (v-model和 v-show),Vue 也允许注册自定义指令,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。二、 如何自定义指令 自定义指令分为全局自定义指令和局部自定义指令⭕1.首先我们来看全局自定义指令 :用Vue.directive来注册。比如一个input自动聚焦的例子:在main.js中写入以下内容:// 注册一个全局自定义指令 `v-focus`Vue.directive(...原创 2022-02-13 19:42:23 · 17235 阅读 · 0 评论 -
Vue中的watch属性
⚪.watch是一个监听属性,可以监听到值的变化,做出相应的反应。图如下:将name属性和对话框绑定,并在对应页面绑定name值,然后在浏览器中测试,页面上数据会随着对话框中输入值的变化而变化。1.监听一个变量,用watch属性可以监听到data中name属性的变化,watch中的name(监控处理函数)对应的是data中的name属性,其中的name有两个参数v1,v2,v1表示当前监听到的值,v2表示上一次监听到的值。 <div id="app"> 用原创 2022-02-11 15:27:23 · 4807 阅读 · 0 评论 -
Vue自定义组件
原创 2022-02-02 17:56:36 · 1200 阅读 · 0 评论 -
Vue中的事件修饰符
1.lazylazy修饰符作用是,改变输入框的值时value不会改变,当光标离开输入框时,v-model绑定的值value才会改变<input type="text" v-model.lazy="value"><div>{{value}}</div>data() { return { value: '222' } }复制代码2.trimtrim修饰符的作用类似于JavaScrip原创 2022-02-02 12:20:02 · 1015 阅读 · 0 评论 -
MVVM和MVC
(1)MVC:是后台的框架模式分为M:(model模型)、V(view试图)、C(controller控制器)(2)MVVM是为了实现MVC中的VMVVM分为:M(model数据)、V(view试图)、VM(viewModel控制数据的改变和控制试图)mvvm<p>Hello, {{ name }}!</p> --View层 --VUE中的单向绑定<input v-model="name"> --View原创 2022-02-02 12:16:51 · 409 阅读 · 0 评论 -
vue中Computed、Methods、Watch区别
1. methods1.1 methods的介绍及其用法Vue配置对象之一,常常用来做绑定事件的回调函数 <div id="app"> <h2>欢迎来到{{name}}</h2> <button v-on:click="showInfo">点我提示信息</button> <button v-on:click="showInfo2>点我提示信息</button>原创 2022-02-02 12:04:17 · 157 阅读 · 0 评论 -
Vuex的知识
Vuex1.vuex :是一个专为vue.js开发的状态管理器,采用集中式存储的所有组件状态,通过vuex我们可以解决组件之间数据共享的问题,后期也方便我们管理以及维护有五个属性分别是: state、getters、mutations、actions、modulestate属性: 存放状态,例如你要存放的数据getters: 类似于共享属性,可以通过this.$store.getters来获取存放在state里面的数据mutations: 唯一能改变state的状态就是通过提交muta原创 2022-02-02 12:00:08 · 120 阅读 · 0 评论 -
Vue组件通信的六种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如props、$emit/$on、vuex、$parent / $children、$attrs/$listen原创 2022-02-02 11:33:45 · 19837 阅读 · 2 评论 -
vue中的diff算法
一、是什么diff算法先来一句概念:diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。换句话diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁其有两个特点:比较只会在同层级进行, 不会跨层级比较在diff比较的过程中,循环从两边向中间比较diff 算法的在很多场景下都有应用,在 vue 中,作用于虚拟 dom 渲染成真实 dom 的新旧 VNode原创 2022-02-02 11:14:46 · 829 阅读 · 0 评论 -
Vue中的虚拟dom
一、什么是虚拟DOM通过js创建一个Object对象来模拟真实DOM结构,这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性,通过vue中的render()函数把虚拟dom编译成真实dom,在通过appendChild()添加到页面中。 二、在vue中如何应用虚拟DOM的定义真实DOM<div id="app"> <p class="p"&g...原创 2022-02-02 11:07:34 · 360 阅读 · 0 评论 -
Vue双向数据绑定的原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步: 需要observer(观察者)对数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile(模板解析器)解析模板指令,将模板中的变量替换成数据,原创 2022-02-01 20:15:25 · 150 阅读 · 0 评论 -
Vue2.x知识大总结
第一章:为何组件的data必须是一个函数、Vue2.x常用指令、v-if与v-show的区别、Vue2.x生命周期后面会持续更新原创 2022-02-01 16:47:35 · 480 阅读 · 0 评论 -
Vue2.x生命周期
简单粗暴的答案直接走起:答: 总共分为8个阶段。创建前/后,载入前/后,更新前/后,销毁前/后。创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象 data 都为undefined,还未初始化。在 created阶段,vue实例的数据对象data有了,$el还没有。载入前/后: 在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data原创 2022-02-01 16:39:28 · 382 阅读 · 0 评论 -
v-if与v-show的区别
一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的三、性能对比v-if有更高的切换消耗;v-show有更高的初始渲染消耗四、使用场景v-if适合运营条件不大可能改变的场景下;v-show适合频繁切换;...原创 2022-02-01 16:36:04 · 638 阅读 · 0 评论 -
Vue2.x常用指令
v-model 多用于表单元素实现双向数据绑定v-for 格式: v-for="(item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动态绑定 作用原创 2022-02-01 16:30:41 · 164 阅读 · 0 评论 -
为何组件的data必须是一个函数
一、实例和组件定义data的区别在组件中data必须是一个函数,否则就会报以下错误:说的是data在每个组件实例中必须是一个函数二、组件data定义函数与对象的区别这里我们模仿组件构造函数,定义data属性,采用对象的形式function Component(){ }Component.prototype.data = { count : 0}创建两个组件实例:const componentA = new Component()const componen.原创 2022-02-01 16:26:26 · 1771 阅读 · 0 评论