vue
文章平均质量分 57
屹洲城主
启明星的指引
展开
-
[vue小知识] Vue 数据双向绑定的原理是什么?
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 第一步:需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter 这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据 变化 第二步:compile 解析模板指令,将模板中的变量替换成数据,然后初始化原创 2021-11-06 21:11:48 · 118 阅读 · 0 评论 -
[vue的小知识]mvvm 和 mvc 区别是什么?哪些场景适合?
1.MVVM 基本定义MVVM 即 Model-View-ViewModel 的简写。即模型-视图-视图模型。模型 (Model)指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型 (ViewModel)是 mvvm 模式的核心,它是连接 view 和 model 的桥梁。它有两个方向:一是将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将视图(View)转化成模型(Model), 即将所看到的页面转原创 2021-11-06 20:55:12 · 168 阅读 · 0 评论 -
vue - 打包优化
目录整体介绍路由懒加载什么是路由懒加载路由懒加载中的魔法注释包大小分析去掉 console-logwebpack配置排除打包整体分析打包瘦身引用网络资源具体配置-在生产环境时生效webpack配置externals配置项注入CDN配置到html模板整体小结:整体介绍项目开发完成打包 : 用webpack做打包(把.vue, .js, .less -----------> .js, .css, .html) 在项目中都会原创 2021-11-04 23:32:28 · 484 阅读 · 0 评论 -
vue 中 Radio 单选框 无法选中和被选中 问题
<el-radio v-model="radio" label="1">备选项</el-radio><el-radio v-model="radio" label="2">备选项</el-radio>data () {return { radio: '1' };}要使用 Radio 组件,只需要设置v-model绑定变量,v-model=" radio " 相当于 :value="rad...原创 2021-11-03 00:43:56 · 5388 阅读 · 0 评论 -
vue 自定义指令 ==
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。 v-xxxhtml+css的复用的主要形式是组件你需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令局部注册和使用//1. 创建自定义指令// 全局 / 局部// 2. 在标签上使用自定义指令 v- 指令名注意:// bind 操作样式,不要写js// inserted 可以操作样式,也可以操作dom的行为的js// inserted方...原创 2021-10-27 21:36:59 · 86 阅读 · 0 评论 -
了解 RBAC 权限设计 ===
业务场景公司里有不同的职能部门,都在用同一套系统 ,不一样部门的人员进入系统里面需要操作的事情是不一样的, 必定需要根据不同的员工角色配置不同的权限RBAC权限设计思想一种基于角色的设计思想 给员工配置角色 (一个员工可以拥有多个角色) 给角色配置权限点 (一个角色可以有多个权限点) 员工只要有了角色之后,就自动拥有了角色绑定的所有权限点根据权限设计思想对应业务模块 员工管理 角色管理 权限点管理(它是没有调整的余地的:它会严格与当前系统的.原创 2021-10-27 20:35:36 · 92 阅读 · 0 评论 -
了解 vue组件样式穿透 /deep/ ::v-deep >>> 区别 ===
什么是样式穿透?vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过一些方法,穿透scoped。1. 样式穿透 >>>如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改但如果是sass/less的话可能无法识别,这时候需要使用/deep/和::v-deep选择器。<style scoped> .a { //b是第三方...原创 2021-10-25 22:02:33 · 3504 阅读 · 0 评论 -
前端之源 : 了解Vue => 创建 脚手架 @vue/cli => 搭建项目
目录1. Vue是什么1.1_web里_渐进式1.2_Vue里_渐进式1.3_库和框架 2. @vue/cli和脚手架介绍2.1_脚手架好处2.1_@vue/cli安装2.2_@vue/cli 创建项目2.3_@vue/cli 启动开发服务2.4_@vue/cli 目录和代码分析认识vue-admin-template的目录 /* vue-element-admin */认识src目录熟悉项目的运行机制整体运行方式...原创 2021-10-23 03:12:52 · 620 阅读 · 1 评论 -
如何在vue 中 熟练使用 组件和具名插槽 ====
局部使用 组件1. 创建一个组件 , 并引入2 . 注册3 . 使用全局使用 组件原创 2021-10-21 14:57:31 · 75 阅读 · 0 评论 -
小作业-如何让element中 table的序号延续上一页的序号
给 表格的 第一列 添加 动态属性 和 方法原创 2021-10-20 19:54:14 · 73 阅读 · 0 评论 -
快速了解 vue 侦听器 watch 的使用 ====
可以侦听data/computed属性值改变想要侦听一个属性变化, 可使用侦听属性watch语法: 深度侦听和立即执行语法:immediate立即侦听, deep深度侦听, handler固定方法触发原创 2021-10-19 19:38:11 · 69 阅读 · 0 评论 -
理解svg-icon的工作原理 ====
如何在新项目使用svg-icon组件 步骤1.安装依赖npm i svg-sprite-loader@4.1.32.配置 vue.config.js3.复制/创建文件(1) src/icons(2) 组件(3)utils/validate.js4 .在main.js中引入 import '@/icons'5 .使用格式<svg-icon icon-class="文件名"/>这里的文件名就是在src/icons...原创 2021-10-18 01:40:09 · 151 阅读 · 0 评论 -
了解 Vue中.sync和v-model的区别
v-model你也可以通过model选项来修改v-model的默认行为和prop所以相应的父组件使用v-model的时候的等效操作为:v-model通常用于表单控件,因为这样子组件有更强的控制能力.sync这里绑定的属性名称的更改,相应的属性名也会变化.sync的原理用到了子组件向父组件派发事件的$emit方法。其应用场景为子组件想修改父组件传递的属性sync修饰符的控制能力都在父组件,事件名称也是相对固定的update:xx...原创 2021-10-18 00:54:47 · 200 阅读 · 0 评论 -
一张图 看懂 登录页面 到 主页 的过程 ==>
原创 2021-10-17 18:01:37 · 149 阅读 · 0 评论 -
前端路由的工作原理
什么是路由?目标: 设备和ip的映射关系接口和服务的映射关系路径和组件的映射关系为什么使用路由?目标: 在一个页面里, 切换业务场景单页面应用(SPA): 所有功能在一个html页面上实现前端路由作用: 实现业务场景切换优点: 整体不刷新页面,用户体验更好 数据传递容易, 开发效率高 缺点: 开发成本高(需要学习专门知识) 首次加载会比较慢一点。不利于seo vue-router介绍目标: 如何在Vue项...原创 2021-10-05 22:51:19 · 131 阅读 · 0 评论 -
javascript数组对象转换
<template><div><div>{{arr}}</div>数组转对象:<button@click="btn">点击转换</button><div>{{newObj}}</div><hr><div>{{obj}}</div>对象转数组:<butto...原创 2021-10-05 22:12:19 · 94 阅读 · 0 评论 -
javascript数组转化为树状图案例
<template><div><h2>数组转化成树</h2><button@click="btn(data)">点击生成树状图</button><div>{{tree}}</div></div></template><script>exportdefault{name:''...原创 2021-10-05 22:10:04 · 210 阅读 · 0 评论 -
javascript购物车渲染案例
<template><divid="bigbox2"><divid="box"><h3>我的购物车</h3><ahref="javascript:;"v-for="(obj,index)inlist":key="index"class="fl":class="{fll:...原创 2021-10-05 22:07:55 · 212 阅读 · 0 评论 -
javascript购物车结算案例
<template><div><h1>购物车案例</h1>手机: 价格<inputtype="number"v-model.number="phonePrice">数量<inputtype="number"v-model="phoneNum">小计{{phoneSum}}元<br>电脑: 价格&l...原创 2021-10-05 22:05:53 · 818 阅读 · 0 评论 -
vuex的基本使用
vuex 是什么?vuex 是vue官方提供的独立于组件体系之外的,管理公共数据的工具vuex 在什么场景下使用?1.大型项目2.多个组件之间数据共享如何在项目中使用?1. npm i vuex2. 划分目录结构3. 在main.js中导入并挂载在Vue实例上目录vuex 是什么?vuex 在什么场景下使用?如何在项目中使用?vuex的五个核心:vuex的五个核心:1.state 作用 : 保存公...原创 2021-09-28 21:06:16 · 133 阅读 · 0 评论