![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue系列
公子清
夯实基础,深入框架,node全栈,架构前端,谁的未来不迷茫,就看怎么实践,不忘初心,不惧未来。
展开
-
Vue-条件渲染-层级化解析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-05-24 10:45:49 · 200 阅读 · 0 评论 -
Vue-强制绑定class与style-层级化解析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-05-24 10:41:20 · 345 阅读 · 0 评论 -
Vue-计算属性监视-层级化解析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-05-24 10:35:56 · 196 阅读 · 0 评论 -
Vue-MVVM模式-层级化解析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2022-05-23 09:52:55 · 199 阅读 · 0 评论 -
vue-cli3.0你需要知道的基础
vue-cli3.0基础认知vue cli脚手架帮助我们把webpack等相关配置处理好,我们只需要基于脚手架快速构建一个项目即可(项目中一定包含webpack的相关配置)vue中的脚手架vue-clihttps://cli.vuejs.org/zh/guide/1.安装脚手架(一般安装在全局)$ npm install @vue/cli -g$ yarn global add @vue/cli安装成功后,全局环境下会生成一个$ vue的可执行命令,基于$ vue --version 查看版原创 2020-10-22 16:47:12 · 154 阅读 · 0 评论 -
vue-cli相关配置项
vue-cli脚手架相关配置项vue-cli 相关配置项官网:https://cli.vuejs.org/zh/config/#css-requiremoduleextensionmodule.exports = { //process.env.NOOE_ENV: 环境变量中存储的是开发环境还是生产环境,./是开发本地环境,http://www.baidu.com/是生产环境,也就是正式项目中的线上环境 publicPath:process.env.NOOD_ENV === 'prod原创 2020-10-22 16:44:44 · 228 阅读 · 0 评论 -
安装vue-cli3.0版本指南
安装vue-cli3.0版本操作指南日常使用vue-cli3.0以下版本,随着前端不断更新vue-cli3.0以上版本,那么安装新版本会遇到很多问题,并不是所有人都会一番风顺,应粉丝要求,出3.0以上版本操作指南请先看下鄙人的vue-cli3.0以下版本操作详情,百试不错的详情操作,实践中尝试了很多次错误,才总结出来的真经方法:安装vue错误详情解决办法:https://blog.csdn.net/Josiah_Yuan/article/details/103605963那么vue-cli3.0原创 2020-10-19 13:13:35 · 3523 阅读 · 1 评论 -
vue中模拟v-model的实现原理
vue中模拟v-model的实现原理v-model的渲染(视图更新控制数据的更改):1.把数据中的信息拿到复制给视图上2.监听视图的更新,更新后重新修改数据3.数据更改后,重新控制视图重新渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2020-10-14 16:52:36 · 574 阅读 · 0 评论 -
vue中v-model的实现原理
vue中v-model的实现原理v-model的渲染(视图更新控制数据的更改):1.把数据中的信息拿到复制给视图上2.监听视图的更新,更新后重新修改数据3.数据更改后,重新控制视图重新渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init原创 2020-10-14 16:47:35 · 352 阅读 · 0 评论 -
vue响应式数据实现原理
vue中类似v-model的实现原理v-model的渲染(视图更新控制数据的更改):1.把数据中的信息拿到复制给视图上2.监听视图的更新,更新后重新修改数据3.数据更改后,重新控制视图重新渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2020-10-14 16:45:56 · 342 阅读 · 0 评论 -
vue实践动态轮播图组件
vue实践动态轮播图组件数据更改【=>dom diff -> 把虚拟dom传化为真实的dom ->$nextTick(在回调函数后真实) -> 告知浏览器绘制】分割成3个件,BannerButton,BannerPagination,BannerPlugin注意:组件命名采用驼峰式写法解析关键词作用:template:每一个组件都有一个template,没有template也必须有rand,最起码要指定出我们的视图来data>return : 视图有了,就有数据,原创 2020-07-04 22:21:06 · 603 阅读 · 0 评论 -
axios常规配置项
//常规配置项axios.defaults.baseURL = 'https://127.0.0.1:9999'; //请求服务器具体的地址axios.defaults.withCredentials =true; //在跨域中允许携带凭证axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded';//声明传给服务器的数据,通过请求传给服务器的数据application/x-www-form-urlencod原创 2020-07-04 09:12:31 · 633 阅读 · 0 评论 -
使用ref方式实现组件通讯
refs方式实现组件通讯基于ref子组件传值子组件$parent和$children显示和隐藏只需4步:1.在子组件voteButton中data(){ return { falg = true; }}2.在子组件voteButton里面给div加上v-show="flag"3.在父组件中加上<button @click="handle"></button>按钮标签加上handle方法4.在父组件中methods:{ handl原创 2020-06-19 12:06:30 · 604 阅读 · 1 评论 -
你知道兄弟组件如何通讯传递吗?
发布订阅实现兄弟组件信息传递原理1.#app 里面有voteList,里面有很多响应式数据 ,多次调用了my-vote这个组件,相当于创建了my-vote的实例,父组件通过属性把title传给了props,my-vote里面有数据num=0(多少人参与投票),eventBus=new Vue实例,将eventBus分别通过props传给vote-content和vote-button2. H3:title/num3. vote-content supNum/oppNum/ratio props:原创 2020-06-19 11:26:38 · 358 阅读 · 0 评论 -
通过发布订阅模式子组件给父组件传值
通过发布订阅模式子传父传父发布订阅注册方法:基于自定义事件,把父组件中的某一个方法注册到任务队列中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co原创 2020-06-16 17:46:07 · 295 阅读 · 0 评论 -
深挖vue父传子中的单项数据流
vue单项数据流父传子单项数据流vue的单向数据流:父组件的更新会触发子组件的更新,但子组件的更新不会触发父组件的更新,只能是父到子,父组件可以把信息传给子组件,但是子组件不能传给父组件如果想修改子组件的data:1.把接受到的属性值复制给data,不改属性,改子组件的data2.把prop以计算属性定义<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&原创 2020-06-16 17:12:49 · 249 阅读 · 0 评论 -
彻底弄懂父组件给子组件传值prop
父组件给子组件传值(投票)局部组件实践和组件之间的嵌套:父组件把信息传递给子组件:props属性传递默认传递给子组件的属性值都是字符串格式的,如果需要传递数据的格式是数据本身应该具备的数据,我们需要基于v-bind实现传递(哪怕传递的属性值还是固定)可以把子组件当做一个标签,我们可以设置ID、clsaa, style等内置属性值,这些属性也会传递给子组件,vue会帮我们处理好的,该合并的合并,该覆盖的覆盖,无需我们在props中注册处理`<!DOCTYPE html><原创 2020-06-16 17:08:57 · 1283 阅读 · 0 评论 -
vue实践局部组件需求-投票
vue实践局部组件需求-投票投票局部组件实践和组件之间的嵌套:1.搭建结构(html+css布局)2.在组件标签中拆分成多个局部组件3.删除第一步的搭建结构(html+css布局)代码4.在组件中调取渲染使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-原创 2020-06-10 20:05:20 · 599 阅读 · 0 评论 -
vue基础实践: 局部组件
vue基础实践: 局部组件知识点总结:创建局部组件-注册局部组件-声明组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"原创 2020-06-10 20:01:33 · 159 阅读 · 0 评论 -
vue基础实践:组件命名的规则
vue基础实践:组件命名的规则组件的特点:* - 可复用* - 方便维护* - 每一个vue组件都是一个独立的个体(独立的vm实例):DATA是独立的(不同组件的data应该互不干扰)有完整的生命周期,方法等也是独立的* - 能够实现组件的嵌套:需要掌握组件之间的信息通信//* 全局组件:无需单独引用或者配置,直接在大组件中调取全局组件即可* Vue.component(componentName, options)* + options可以使用的有vm实例具备的一切(D原创 2020-06-09 11:42:52 · 514 阅读 · 0 评论 -
vue基础实践:生命周期钩子函数
vue基础实践:生命周期钩子函数el :'#app' 用来指定当前vm所关联的视图el:'#app', 等价于template: '<h1>{{msg}}</h1>',//指定了template与 el:'#app'没有关系了生命周期函数(钩子函数)beforeCreated 创建实例之前created 创建实例成功 ,(一般在这里实现数据的异步请求)异步发送ajax请求,beforeMount 渲染Dom之前,加载组件第一次渲染(把渲染的结果放到页面之前){{ms原创 2020-06-09 09:41:32 · 188 阅读 · 0 评论 -
vue基础实践:refs
vue基础实践:refsrefs vue框架开发的时候,我们尽可能减少直接操作dom 基于元素给当前元素设置refs,可以把当前元素放到this.$refs对象中,从而实现对DOM的直接操作(只有在mounted及之后才可以获取到这些元素)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width原创 2020-06-09 09:08:34 · 365 阅读 · 0 评论 -
vue基础实践1:双循环,双事件选择显示
vue基础实践1:双循环,双事件选中显示<!-- 选中显示: 两个循环v-for,两个事件v-bandle -->some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。<!DOCTYPE html><html lang="en"><head> <原创 2020-06-09 09:05:30 · 645 阅读 · 0 评论 -
vue基础实践1: 经典选项卡
vue基础实践1: 经典选项卡选项卡方法: 1. vue方法选项卡 2. 事件委托方法性能好点2大经典选项卡思路:1.3个li控制1个div,每次点击li都控制div里面的内容发生变化2.3个li控制3个div显示隐藏`<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi原创 2020-06-05 21:08:55 · 360 阅读 · 0 评论 -
vue基础实践1:class和style数组样式类
vue基础实践1:class和style数组样式类class和style数组样式类 对象方式处理动态的样式; :class="{样式类名:响应式数据...}" 响应式数据为true则有这个样式,反之则没有<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2020-06-04 11:05:35 · 617 阅读 · 0 评论 -
vue基础实践1:vue基础语法
vue基础实践1:vue基础语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-06-03 19:25:14 · 195 阅读 · 0 评论 -
vue基础实践: filter过滤器单词首字母大写
vue基础实践: filter过滤器单词首字母大写多种方式实现单词首字母大写反转单词首字母大写(正则)词首字母大写(第二种方式写一个方法)单词首字母大写(第二种方式vue过滤器)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2020-06-03 19:16:17 · 2136 阅读 · 0 评论 -
vue基础实践1:单选按钮和复选按钮特点
vue基础实践1:单选按钮和复选按钮特点单选按钮和复选按钮特点:1.按照v-model进行分组,单选框准备的数据是一个值,复选框准备的数据是一个数组2.每一个框都有自己的value,谁被选中,数值就是被选中元素的value值;相反值是多少,对应value的元素也会默认被选中;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="原创 2020-06-03 19:11:58 · 529 阅读 · 0 评论 -
vue基础实践1:事件修饰符
vue基础实践1:事件修饰符> v-on (简写@):用来实现事件绑定的指令 v-on:click:xxx等价于@click='xxx' 1.事件触发的时候,需要传递参数信息,把方法加小括号,$event是事件对象 v-on:click='sum($event,10,20)' 2.事件修饰符 常规修饰符:@keydown.prevent/stop = 'xxx' 按键修饰符:@keydown.enter /space/delect/up/right/down/left...='xxx' 键盘码:@k原创 2020-06-03 18:58:47 · 220 阅读 · 0 评论 -
vue基础实践1:for循环
vue基础实践1:for循环v-for :循环动态绑定数据 1.想循环谁就给谁设置v-for 2.循环类似for/for in的语法:v-for='(item,index) in arr'ES6新增for of 循环1.获取的不是属性名是属性值2.不会遍历原型上的公有属性方法(哪怕是自定义的)3.只能遍历可被迭代的数据类型值(Symbol.iteratoer): Array , String , Arguments , NodeList ,Set , Map等,但是普通对象是不可迭代的数据,所原创 2020-06-03 18:51:22 · 296 阅读 · 0 评论 -
vue基础实践4: computed计算属性实例filters的运用
vue基础实践4: computed计算属性实例filters的运用计算属性实例filters的运用动态绑定的值,用v-bond或者:如::id='item.id' :v-model='',如果是静态写死的id='item.id' v-model=''<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content原创 2020-06-03 18:41:29 · 347 阅读 · 0 评论 -
vue基础实践3-computed真实项目中最正规的用法
vue基础实践-computed真实项目中最正规的用法真实项目中,计算属性computed最正规的写法,追求高质量代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ原创 2020-06-03 16:30:15 · 312 阅读 · 0 评论 -
vue基础实践2: computed计算属性实例字母反转
vue基础实践2: computed计算属性实例字母反转计算属性conmputed反转和methods方法对比<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-原创 2020-06-03 12:01:03 · 404 阅读 · 0 评论 -
vue基础实践1: computed计算属性
vue基础实践1: computed计算属性1.计算属性:它不是方法是一个属性,所有在视图中调取的时候不能加括号执行,toUp和DATA中的text一样,都会挂载在实例上,它存储的值是对应的方法返回的结果(getter函数出来的结果)2.计算属性有自己的缓存处理:第一次获取toUp这个属性值,会关联某个响应式数据(text),当第一次结果获取后,会把这个结果缓存下来;后期视图重新渲染,首先看text值是否发生改变,如果发生更改,会重新计算toUp属性值,如果没有更改,则还会拿上次缓存的结果进行渲染原创 2020-06-03 10:57:58 · 204 阅读 · 0 评论 -
vue基础实践1-VUE的指令使用
vue基础实践1-VUE的指令VUE的指令:directive1.都是按照v-xxx处理的,它是规定给元素设置的自定义属性2.当vue加载成功并进行处理的时候,会按照相关的规则解析和渲染视图,遇到对应的指令实现对应的功能。v-model 一般给表单元素设置的,实现表单元素和数据之间的相互绑定1)先把数据绑定表单元素一般把数据赋值给表单元素的value2)监听表单元素的内容改变3)内容改变后,会把对应的数据也改变4)对应的数据改变,视图中所有用到的数据的地方都会重新渲染视图 <=>原创 2020-06-03 10:49:17 · 177 阅读 · 0 评论 -
vue基础实践1-watch监听器(监听响应式数据的变化)
vue基础实践-watch监听器(监听响应式数据的变化)watch监听响应式数据改变(watch中监听的响应式数据必须在data中初始化)= > computed中的setter类似,只不过computed是自己单独设置的计算属性(不能和data中的冲突,而watch只能监听data中有的属性)wacth监听器支持异步操作,computed不支持异步操作,getter需要返回结果,不支持异步获取数据<!DOCTYPE html><html lang="en">原创 2020-06-03 10:29:25 · 532 阅读 · 0 评论 -
vue基础实践2 : V-MODEL先实现把数据绑定到视图层
vue基础实践1 : V-MODEL先实现把数据绑定到视图层vue和react都放弃操作dom<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa原创 2020-06-03 09:55:45 · 344 阅读 · 0 评论 -
VUE系列: vue中npm run dev运行项目自动打开浏览器
npm run dev运行项目自动打开浏览器设置自动打开浏览器// 各种设备设置信息 **host: 'localhost', //主机名 port: 8080, // 端口号(默认8080) autoOpenBrowser: false, //是否自动打开浏览器**//想让浏览器自动打开,只需将false改为true即可,为防止端口号冲突,这里也可以随意更改端口号autoOpenB...原创 2019-12-18 21:52:52 · 824 阅读 · 0 评论 -
VUE系列:vue搭建M端项目流程
思路:安装sass预处理嵌套css,flex布局,flexible手机淘宝适配和fastclick移动300s延迟打开cmd,使用命令行1.切换盘符:e:2.使用vue建立一个项目,具体请看我的随笔博客,vue安装错误详情这一篇3.打开这个项目:cd my-project, 执行npm命令4.安装sass预处理 a,全局安装 vue-cli 输入: npm i...原创 2019-12-18 21:54:38 · 236 阅读 · 0 评论 -
VUE系列: 源码分析-逻辑层
Vue 源码分析-逻辑层预期的效果:监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值。所以直接跟input相关的处理就有3处,但实际上会有连带性的触发,触发watch的input函数的时候,还会触发this.answer对应的依赖处理看看内部是如何处理的:Vue在初始化data的时候,会通过Object.defi...原创 2019-12-17 12:57:38 · 280 阅读 · 1 评论