vue
vue框架的一些理解
wudunkai
一个热爱前端的学习者
展开
-
vue的插槽slot的使用与理解
插槽的理解插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot>表示,父组件可以在这个占位符中填充任何模板代码,如HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。vue的slot主要分三种,默认插槽,具名插槽,作用域插槽;默认插槽// 它允许你像这样合成组件// 父组件<navigation-link url="/profile"> your profile</na原创 2021-11-19 15:50:16 · 837 阅读 · 0 评论 -
vue中Watch 和 Computed 的区别是什么?
Watch 和 Computed 的区别监听属性watch:1.不支持缓存,数据变,直接会触发相应的操作;2.watch支持异步;3.监听的函数接收两个参数,第一个参数是最新的值,第二个参数是输入之前的值;4.当一个属性发生变化时,需要执行对应的操作;一对多;5.监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数;6.详解watch中immediate、handler和deep属性 - handle:watch中需要具体执行的方法原创 2021-11-19 11:44:54 · 170 阅读 · 1 评论 -
vue3.0 深度选择器>>> 和 /deep/ 和 ::v-deep 被弃用
//警告例子<style lang="scss" scoped>/deep/ .main{ height: 520px;}>>> .main{ height: 520px;}::v-deep .main { height: 520px;}</style> //正确例子<style lang="scss" scoped>:deep(.main){ height: 520px;}</style>>原创 2021-07-07 17:10:22 · 2581 阅读 · 2 评论 -
vue项目及vite中引入预处理全局scss文件
vite中引入预处理全局scss文件vue项目及vite中引入预处理全局scss文件vue项目中引入vite2中引入vue项目中引入const path = require('path');module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [path.resolve(__dirname, 'src/assets/glo原创 2021-06-28 11:16:25 · 4395 阅读 · 0 评论 -
阐述MVVM响应式数据原理代码
vue是采用数据劫持配合发布者-订阅者模式的方式,通过Object.definerProperty()来劫持各个属性的setter和getter,在数据变动时,发布消息给依赖收集器,去通知观察者,做出对应的回调函数,去更新视图。代码实现如下:html代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=原创 2020-05-12 10:33:25 · 183 阅读 · 0 评论 -
MVVM响应式原理
几种实现双向绑定的做法数据=>视图视图=>数据目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。实现数据绑定的做法有大致如下几种:发布者-订阅者模式(ba...原创 2020-05-08 15:44:35 · 545 阅读 · 0 评论 -
vuex--使用vuex-persistedstate持久化保存数据及配置哪些state需要持久化存储
vuex默认情况下数据存储在内存,刷新浏览器后数据变成初始状态vuex-persistedstate可以让vuex中的数据持久保存在sessionstorage或localstorage中,刷新后不会变成初始状态引入依赖 npm i -S vuex-persistedstate使用import Vue from 'vue'import Vuex from 'vuex'import persistedState from 'vuex-persistedstate'export def.原创 2020-08-21 11:27:08 · 2491 阅读 · 2 评论
分享