Vue
文章平均质量分 60
微 光
纵有疾风起,人生不言弃
展开
-
vue生命周期
1、创建vue实例,Vue(); 2、在创建Vue实例的时候,执行了init(),在init过程中首先调用了beforeCreate钩子函数; 3、同时监听data数据,初始化vue内部事件,进行属性和方法的计算; 4、以上都干完了,调用Created钩子函数; 5、模板编译,把data对象里面的数据和vue语法写的模板编译成HTML。编译过程分三种情况:1)实例内部有template属性,直接调用,然后调用render函数去渲染;2)没有该属性调用外部html;3)都没有抛..原创 2021-03-12 18:44:49 · 94 阅读 · 0 评论 -
VUE双向绑定
1、什么是setter、getter ? 答:首先,别误以为他们就是一会要说的get、set,我们先看一句定义: 对象有两种属性:(1)数据属性,就是我们经常使用的属性(2)访问器属性,也称存取器属性(存取器属性就是一组获取和设置值的函数) 再看一行代码: log打印出来的如下: 数据属性就是a和b; get和set就是关键字 它们后面各自对应一个函数,这个函数就是上面所讲的,存储器属性。 get对应的方法称为getter,负责获取值,它不...原创 2021-03-12 18:40:48 · 405 阅读 · 2 评论 -
Proxy和Object.defineProperty区别
Proxy的意思是代理,一般称作拦截器,可以拦截对象上的一个操作。用法如下,通过new的方式创建对象,第一个参数是被拦截的对象,第二个参数是对象操作的描述。实例化后返回一个新的对象,当我们对这个新的对象进行操作时就会调用我们描述中对应的方法。new Proxy(target, { get(target, property) { }, set(target, property) { }, deleteProperty(target, property) {原创 2020-11-24 11:41:41 · 1148 阅读 · 0 评论 -
虚拟DOM与Diff算法
虚拟DOM什么是虚拟DOM?虚拟DOM(Virtual Dom),也就是我们常说的虚拟节点,是用JS对象来模拟真实DOM中的节点,该对象包含了真实DOM的结构及其属性,用于对比虚拟DOM和真实DOM的差异,从而进行局部渲染来达到优化性能的目的。真实的元素节点:<div id="wrap"> <p class="title">Hello world!</p></div>VNode:{ tag:'div', a原创 2020-09-07 15:50:13 · 256 阅读 · 0 评论 -
vue开发规范——方法声明顺序
- components - props - data - created - mounted - activited - update - beforeRouteUpdate - metods - filter - computed - watch...原创 2019-07-12 11:34:15 · 1552 阅读 · 0 评论 -
Vue中ref的使用
在jq时代,我们首要任务就是学习选择的使用,因为选择可以极其方便帮助我们获取节点查找dom,因为我们要通过dom展示处理数据。而在Vue中,我们的编程理念发生了变化,变为了数据驱动dom;但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点;<body> <div id="app"> <inp...原创 2019-05-20 20:15:46 · 889 阅读 · 0 评论 -
Vue自定义指令
v-on 、v-model、v-show等指令,在操作 dom 时使用了 ref 属性,其实指令也是操作dom 的一种方式,但有时,这些指令并不能满足我们的需求,因此 vue 允许我们自定义指令来操作 dom<body> <div id="app"> <p v-color>123131321</p> <...原创 2019-05-20 20:12:08 · 246 阅读 · 0 评论 -
Vue / keep-alive组件
keep-alivekeep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素<keep-alive> <loading></loading></keep-laive>当组件在keep-alive内被切换时组件的activated、d...原创 2019-03-29 16:54:43 · 7885 阅读 · 0 评论 -
vue中watch的详细用法
https://www.imooc.com/article/70010原创 2019-03-12 17:49:45 · 352 阅读 · 0 评论 -
vuex存值与取值
组件内取值 computed: { value() { return this.$store.state.userData.xxx; } },组件内存值methods: { fn() { this.$store.commit('setValue',xxx) }...原创 2019-01-03 18:09:41 · 19870 阅读 · 0 评论 -
解决vue组件中给body设置样式不起作用的简单办法
给template中的第一个div设置如下样式 .body-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow-y: auto; background-color: #000;}原创 2018-12-29 18:44:12 · 9657 阅读 · 2 评论 -
为什呢vue组件中的data必须是函数?
类比引用数据类型Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;关于JS中的数据类型:https://blog.csdn.net/Web_J/article/details/86352432javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作...原创 2019-01-12 11:31:37 · 2330 阅读 · 0 评论 -
vue中$set的使用场景
场景1:通过数组的下标去修改数组的值,数据已经被修改了,但是不触发updated函数,视图不更新,export default { data () { return { items: ['a', 'b', 'c'] }; }, updated () { console.log('数据更新', ...原创 2019-01-12 15:04:24 · 7507 阅读 · 0 评论 -
Vue中的路由钩子函数
在路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。总体来讲vue里面提供了三大类钩子,两种函数1、全局钩子2、某个路由的钩子3、组件内钩子两种函数:1.Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/2.V...原创 2019-02-18 15:42:59 · 1395 阅读 · 0 评论