vue
前端分享会
这个作者很懒,什么都没留下…
展开
-
浅析vuex的原理
8、vuex原理解析vuex的思想:Vuex维护着一个全局的对象,使用到单列数据模式,在这个对象中所有的数据都是响应式的,任意属性进行改变,都会让这个属性所有的依赖进行更新,并且只能通过Mutations进行改变。实现了单向数据流。8.1、vuex的安装vuex和vue0router的安装方式很一样都是通过vue.use()方法进行安装,内部通过调用install方法进行插件的安装。下面看下vuex的install安装函数。/*暴露给外部的插件install方法,供Vue.use调用安装插件*原创 2020-11-14 16:27:41 · 827 阅读 · 0 评论 -
vue-router原理上
7.1、单页面应用和多页面应用7.1.1、单页面应用(SPA)单页面应用就是第一次进入页面时会向服务器请求一个html文件,通过ur的改变实现组件之间的切换,要注意的是url在变化的过程中并没有发送请求去请求新的html文件,既然没有新的html文件为什么页面会更新呢?其实这都是靠s帮我们实现的,当url改变时,js会感知到url的变化,通过这一点,可以用js动态的将页面的内容清除掉,然后将下一个页面的内容挂在到当前页面上,这时候的路由不是由后端来做,而是由前端来实现,判断页面到底该显示哪一个组件后,清原创 2020-11-13 22:02:35 · 329 阅读 · 0 评论 -
Vue响应式系统的基本原理
关于Vue.jsVue.js是一款MVVM框架,通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty,尤大大在Vue.js文档中就已经提到过,这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图 ,下面来一探究竟。4.1、Object.definePropertyO原创 2020-11-07 09:24:59 · 502 阅读 · 2 评论 -
new Vue()深入理解
我们都知道new Vue()将执行Vue的构造函数,进而执行this_init方法,那this,_init在哪里 ,它做了哪些事?先来看看_init函数的实现。3.1、_init函数实现Vue.prototype._init = function (options?: Object) { const vm: Component = this//定义全局变量vm,等于初始化的vue对象 // a uid vm._uid = uid++//当前Vue实例唯一标识 //非生产原创 2020-11-07 09:23:24 · 3162 阅读 · 0 评论 -
Vue初始化前发生了什么
2.1、 定义 Vue 构造函数并执行五个函数import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'原创 2020-11-07 09:21:46 · 271 阅读 · 5 评论 -
详解vue中v-model
6.1、问题探究<template> <div> <div>{{obj.message}}</div> <div><input v-model="obj.message" type="text" @input="change1"></div> <button @click="change">click</button> </div></templa原创 2020-11-06 22:30:19 · 1365 阅读 · 0 评论 -
进阶前端路由hash和history
前端路由&hash模式与history模式首先我们先来说说路由的进化最开始路由就是简单的一个URL,在浏览器输入URL地址向服务器发送请求,服务器会根据这个地址将对应的HTML文件返回给浏览器进行渲染,如果这个页面还用到了外部的js和css资源文件,浏览器将会再发送一次请求,服务器才会将对应的资源返回给浏览器,这样的话我们可以简单的模拟一下,当用户首次访问网站时,输入地址向服务器发送请求,服务器返回对应的html文件让浏览器进行渲染,当用户跳转到第二个页面时,浏览器又会发送请求,让服务器返回原创 2020-10-06 11:28:53 · 558 阅读 · 1 评论 -
在localStorage中存取值的方法
在前端开发中,当我们重新加载页面时我们希望显示到上一次页面的数据,这时我们就要用到LocalStorage,将我们的数据保存到这里,退出页面时将数据保存,重新加载就直接取出我们的数据,下面用个实例来介绍下我们存取值的方法。在一些购物app中我们点击不同的商家就会显示对应商家的基本信息,我们一般通过给每个商家的页面设定一个id,当我们访问某个商店时只要将对应的id返给后端,后端就会给我们对应的信息,下面我们就来实现下。上代码//假设我们的地址http://localhost:8081/?id=1234原创 2020-06-10 20:57:54 · 4292 阅读 · 2 评论 -
vue中子组件修改父组件传入的值问题
在讲vue之前,我们先来了解一下js中参数的传递按值传递什么是按值传递呢?简单来说按值传递就是将一个变量复制给另一个变量,当复制的那个变量发生改变时,原来的变量不会发生改变,举个简单的例子。var a=1;function arr(b){ b=2; console.log(b);//2}arr(a);console.log(a);//1这就验证了我们刚才所说的,这里将变量a复制给了b,相当于将a拷贝了一份,b改变时a不改变引用传递引用传递相对于按值传递适用于更复杂的数据结构,比如原创 2020-06-07 11:34:52 · 1522 阅读 · 0 评论 -
Vue.nextTick工作原理以及应用
最近在做仿饿了吗项目时遇到了一个问题,在mounted阶段通过refs获取到HTMLCollection数据时无法读取他的数据,最后也查了很多资料才发现在mounted阶段,mounted 不会承诺所有的子组件也都一起被挂载,所以在此阶段,dom结构还没加载完,js就执行了,最终用vm.nextTick解决问题,纳闷下面我们来介绍下vm.nextTick解决问题,纳闷下面我们来介绍下vm.nextTick解决问题,纳闷下面我们来介绍下vm.nextTick的工作原理。注:在组件内使用 vm.$nextTi原创 2020-05-29 23:25:01 · 222 阅读 · 0 评论 -
解决使用exclude后activated和deactivated失效问题
在一个项目中如果我们想每次访问一个界面时只访问一次ajax数据,那我们可以使用我们的keep-alive属性,一般我们用来包裹,这样当我们第一次访问某个页面时保存当前页面的ajax数据,但是有时候我们想访问某个页面不保存他的ajax数据,而是重新加载,这时候我们只要单独设置一下这个组件就行,这里要用到我们要讲的exclude属性,然而这样也会带来一个问题,我们都知道,使用keep-alive时vue会给我们多添加两个钩子,activated和deactivated,他们分别在页面重新显示和消失时启动,但是当原创 2020-05-09 21:02:04 · 1435 阅读 · 0 评论 -
vue组件中swiper没有生效或者发生错误
先介绍下自己遇到的问题,当我点击景点图片时,界面会弹出一个轮播图,里面展示的是景点的照片,当我点击轮播图任意地方轮播图会消失重新回到原来界面,但是当我点击景点进去轮播图时,轮播图就出现问题下面的paginationType没作用了,最后查资料才知道当重新加载进入轮播图时会出现swiper宽度计算错误,解决的方式就是加上{observer:true, //修改swiper自己或子元素时,自动初始...原创 2020-05-06 22:38:15 · 1125 阅读 · 0 评论 -
router-link使用详解
router-link组件的属性to、replace、append、tag、active-class、exact、event、exact-active-class。属性介绍1、to(必选参数):类型是string/location//字符串<router-link to="path(路径)">AAAA</router-link>//对象<router-...原创 2020-05-06 21:43:36 · 32509 阅读 · 0 评论 -
页面重新加载和重新显示优化
页面重新加载的优化页面重新加载时,会重新去获取ajax数据,这样如果我多次请求同一个页面就要请求多次ajaxa数据,这样性能就大幅度降低,我们可以采用vue自带的一个属性keep-active,在总vue组件中我们这样做<template> <div id="app"> <keep-alive> <router-view/> ...原创 2020-05-05 18:15:16 · 657 阅读 · 0 评论 -
移动端触摸事件
Touch 事件首先 touch 包含三类事件,它们分别是:touchstart、touchmove、touchend 。touchstart:手指触摸到一个 DOM 元素时触发。touchmove:手指在一个 DOM 元素上滑动时触发。touchend:手指从一个 DOM 元素上移开时触发。这三个事件又分别对应三个相同的触摸列表:touches:正在触摸屏幕的所有手指的一个列表。t...转载 2020-05-01 21:27:01 · 242 阅读 · 0 评论 -
vue中ref与$refs详解
ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs上,如果在普通的DOMM元素上使用,那么就是指向普通的DOM元素。ref的三种用法:1、ref加在普通元素上,用this.refs.name或者this.refs.name或者this.refs.name或者this.refs[‘name’]获取的1是DOM元素<!DOCTYPE html><h...原创 2020-05-01 20:13:03 · 5161 阅读 · 0 评论 -
e.target.innerHtml
在触发DOM上的事件都会产生一个对象,即事件对象(也称event对象),这里用e接收事件对象。事件对象有很多属性和方法,此处的target属性是获取事件目标,即元素DOM对象,然后获取其相应的属性,比如点击事件,e.target就是鼠标点击的对象的父元素,innerHTML就是里面的text内容。...原创 2020-05-01 09:33:51 · 2412 阅读 · 0 评论 -
ajax动态设置页面时出现的问题
当用ajax数据去设置首页的轮播图时,最后会发现图片的顺序和浮点对应不上,比如我当前的图片是第一张,但是浮点却对应着第四张图片,这个问题的原因是什么呢?我们先看看代码<template> <div class="wrapper"> <swiper :options="swiperOption" > <swiper-slide v-for="...原创 2020-04-27 22:03:58 · 126 阅读 · 0 评论 -
vue vue-awesome-swiper首页轮播图的制作
1、首先我们需要安装一个插件,建议安装一个比较老一点的版本,老版本比较稳定npm install vue-awesome-swiper@2.6.7 --save2、在我们的main.js中引入我们的插件引入vue,这个应该在搭建架子的时候引入了import Vue from ‘vue’//引入插件import VueAwesomeSwiper from ‘vue-awesome-swi...原创 2020-04-23 20:13:59 · 292 阅读 · 0 评论 -
1像素边框问题
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题。首选先看一下,pc时代和移动端时代对1px的对比。一、像素的理解 像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时,屏幕能显示的画面的过渡更细致,网站看起来更...转载 2020-04-22 11:02:05 · 1072 阅读 · 0 评论 -
Vue中的css动画原理之——transition
这里以Vue中的transition过渡动画为例介绍Vue中的CSS动画原理。效果如图1所示,通过按钮实现一个div元素的过渡显示与消失。我们先看看大致的结构<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> &l...原创 2020-04-15 10:58:03 · 577 阅读 · 0 评论 -
子组件和父组件相互传值
首先我们理清一个概念:父组件可以向子组件传值,传递的值需要通过属性的形式定义出来,但是子组件不能直接修改父组件传过来的值,子组件可以通过自定义事件向父组件传递想要得到的值,下面我们看一个例子,通过点击数字来改变数字的值并统计它们的和。首先实现父组件向子组件传递值来初始化界面父组件代码:通过":"定义属性count,下面在js中定义局部子组件,并在根组件中注册:创建好子组件count...原创 2020-04-13 17:12:44 · 548 阅读 · 0 评论 -
Vue组件注意点
1、is关键字的使用在父组件中使用子组件时,如过父元素没有规定子元素的类型时可以直接将组件写入,如果像ul,select,tbody,ol等明确子元素的类型时,就要使用我们的is关键字。如:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></ti...原创 2020-04-13 14:08:21 · 129 阅读 · 0 评论 -
Vue列表渲染
v-for给数组做循环 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。同时也可以加上index表示下标。<div id="app"> <div v-for="(item, index) of list" :key...原创 2020-04-12 14:23:07 · 257 阅读 · 0 评论 -
vue计算属性,方法和侦听器效果比较
我们通过一个简单的例子来了解下三者的区别:加入我们在vue中定义了一个人的姓和名,如果我们想把姓和名组合输出怎么办呢?<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"&...原创 2020-04-11 13:40:23 · 207 阅读 · 0 评论