logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

Vue-数据监听-对象监听

之前说到了Object.defineProperty() 用来监听 data 的数据改变,从而实现响应式,但是在回顾definePropety方法博客中,出现了一个问题,那就是我在 改变数据,调用 set() 函数的时候,出现了堆栈溢出的问题,这是因为出现了递归的情况。在这里我们就来看看Vue是怎么解决这个问题的。首先,我们来实现一个简单的数据监听效果,以此来深入理解一下,Vue的数据监听是怎么做

#vue.js#前端#javascript
vue-03-路由-二三级路由跳转

1、新建项目之后,在 components 文件夹下,新建 about 文件夹2、引入二级路由,同样的是在main.js 文件下引入,这四个组件都是在 components/about 这个文件夹下,所以路径要写对//二级路由引入import Contact from './components/about/Contact'import Delivery from './compon...

#vue.js
Vue2中watch与Vue3中watch对比和踩坑

Vue3 中的 watch 是一个函数,接收三个参数,第一个参数是需要被监听的数据( 可以是单个数据,也可以是数组格式的多个数据 ),第二个参数是回调函数,第三个参数则是监听配置项( 深度监听、初始化监听 )。该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深,也就是说即使监听的是一个对象形式的数据,只要对象内部属性发生变化,都能被监听到。当需要在数据变化时执行异步或开

文章图片
#vue.js#前端#javascript
Vue-watch-deep 深度监听

首先明确一个概念,Vue 是可以监听到 多层级数据改变的,且可以在页面上做出对应展示。但是 Vue 提供的 watch 方法,默认是不提供 深度监听的( deep 默认为 false,也就是不开启深度监听)举例这是例子的html 片段:点击对应按钮之后,a 或 b 分别自增1<div id="root">{{numbers.a}}<button @click='numbers.a

#vue.js#前端#javascript
Vue style中的 scoped 属性

用来隔离样式 --Scoped CSS一个是在编译之后,直接在 DOM 节点上给类名增加一个hash后缀,不会在节点上增加自定义属性用来隔离样式,且DOM节点与样式文件展示类名一致--CSS Modules。这样一对比,发现 CSS Modules 是更好用一点哈。所以在。

文章图片
#vue.js#前端#javascript
vue-03-路由-tag属性

在上一章的路由的笔记中,讲到了 router-link 这么个标签,我们在页面上审查元素看到的其实是一个 a 标签,但是我们可以使用 tag 这个属性来设置我们的自定义标签,比如说我想让我们的 router-link 默认不是 a 标签,那么我们只需要在 这个标签上加上 tag 这个属性,将其值设置为你想要的 自定义标签即可。在替换为自定义标签之后,会失去a标签的特性,但是是能进行跳转的 ,同时也

#vue.js
uni-app -- cli创建多环境以及打包问题

最近项目又多又急,还全部都是没接触过的技术,RN,uni-app,上手就要写项目,写的实在是异常艰难,uni-app的项目还好,语法上类似于vue,RN写起来就比较痛苦了,样式都不太好写,调试也不太方便。这里就先记录一下uni-app项目的创建环境变量以及打包的流程,做个记录,方便以后查阅。其实,通过hb编辑器,直接创建uni-app项目是可以的,打包的时候直接使用hb的打包功能就行,但是这样只能

#uni-app
Vue-自定义指令

上面说完了 Vue 的内置指令,了解了这些内置指令的使用及原理,接下来我们来说说 Vue 的自定义指令。自定义指令定义v-show :Vue 的内置指令,通过这个指令能展示和隐藏节点 ,其实也就是Vue底层控制了该节点的 display 属性。自定义指令:在构建项目过程中,虽然我们都是使用的组件形式,但是在某些情况下,我们仍然需要对普通DOM元素进行底层操作,这个时候就会用到自定义指令。自定义指令

#vue.js#javascript#前端
Vue-Vue.set() 的原理及使用

上面刚刚讲完 Vue 监听对象的改变,接下来本应该说说数组的监听过程,但是在这里需要插播一节 Vue.set() ,这是因为 Vue.set() 与对象的连接较为紧密,所以串联在一起方便理解。1、首先,定义一批数据用来渲染到页面上展示<body><div id="root"><h2>姓名:{{student.name}}</h2><h2>

#vue.js#前端#javascript
Vue2-生命周期

之前说完了Vue的基础知识,说了语法、数据代理、数据监听、计算属性、指令、过滤器等等,但是没有涉及到Vue的声明周期,其实之所以把生命周期放在后面讲,是因为,如果最开始讲生命周期,里面涉及到的概念性东西比较多,初学者不容易理解,只能死记硬背。但是在理解了前面的这些基础知识之后,回过头来理解生命周期,就会很方便了。这就是 Vue 官网上的生命周期图,在这里 对每个生命周期以及每个模块都标注了tips

#vue.js#前端
    共 12 条
  • 1
  • 2
  • 请选择