GAARA

文章目录三.基础Web基础优化1.使用gzip压缩网页大小什么是gzip?在express中开启gzip压缩2.使用浏览器缓存来提高页面加载速度3.使用CDN从服务器中获取数据4.使用谷歌浏览器的Performance面板来查找性能瓶颈5.参考博文三.基础Web基础优化1.使用gzip压缩网页大小什么是gzip?gzip是GNUzip的缩写,用于UNIX系统文件的压缩,在http协议上的gzip编码是一种用来改进web应用程序性能的技术web服务器(比如阿帕奇,nginx)和客户

文章目录二.在Webpack层面对Vue项目进行优化1.使用webpack对图片进行压缩vue项目中的图片处理如何使用image-webpack-loader压缩图片?2.减少ES6转成ES5的冗余代码为什么会出现冗余代码?解决冗余代码的方法原理插件3.提取公共代码为什么要提取公共代码?配置插件4.使用模板预编译5.提取组件的CSS6.优化SourceMap打包后用于线上环境的代码出现bug时不好定位和调试解决方法:sourceMap解决不好调试代码的问题7.构建结果输出

文章目录零.前言一.在Vue代码层面对Vue项目进行优化1.分场景使用v-if和v-show面试题:v-if和v-show的区别?使用场景2.分场景使用computed和watch面试题:computed和watch的区别?使用场景3.为v-for添加数组的item作为key值,并避免同时使用v-if面试题:v-for为什么要添加key?面试题:v-for为什么要使用数组的item作为key而不是index?面试题:v-for和v-if的优先级哪个更高?4.仅仅用于数据展示的组件不

文章目录1.在vue中使用v-for,未添加key时可能会出现的问题示例出现的原因2.v-for加上key,并以item作为唯一key值代码v-for为什么要加上key?注意事项3.v-for的key值使用数组的索引index会造成什么影响?原因例子1.在vue中使用v-for,未添加key时可能会出现的问题示例html:

watch和computed的异同相同点都是观察页面数据变化的不同点computed只能当依赖的数据变化时才会计算,当数据没有变化时会读取缓存数据watch每次都需要执行函数,适用于数据变化时的异步操作methods,computed和watch的定义和用法回顾computed计算属性,会根据所依赖的数据,动态显示新的计算结果并缓存该计算结果computed的值在getter执行后缓存,若所依赖的数据发生改变会重新调用getter来计算最新结果watch是一个对data数据的监听

sync的一个使用场景element-ui 的dialog对话框示例代码中:https://element.eleme.cn/#/zh-CN/component/dialog 这是一段信息

文章目录介绍出现背景sync的一个使用场景介绍出现背景sync的一个使用场景element-ui 的dialog对话框示例代码中:https://element.eleme.cn/#/zh-CN/component/dialog 这是一段信息

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.messa

1.$router和$route的区别?回答$router是VueRouter的实例,相当于一个全局的路由对象里面包含很多个属性和子对象,比如history,和常用的跳转链接this.$router.push$route对象表示当前的路由信息,包含了当前URL解析得到的信息,包含当前的路由,参数和query对象等等补充1.$router常用api:① this.$router.push('hash 地址') 跳转到指定 hash 地址，并增加一条历史记录② this.$router.go

一.vue3快速上手1.vue3带来了什么?性能的提升源码的升级更好地支持Typescript新的特性特性1.Composition API(组合API)特性2.新的内置组件特性3.其他改变2.vitevite是新一代前端构建工具,有如下优势[使用vite创建一个vue3项目:`create-vite-app vue3_vite`](https://blog.youkuaiyun.com/x550392236/article/details/120323139)对比:使用脚手架vue-cli创建

0.参考FeHelper的下载过程2022-02-22 FeHelper插件的安装1.找资源,下载crx文件在这里插入图片描述2.打开谷歌浏览器的扩展程序页chrome://extensions/,把crx文件拖动到此页3.重启浏览器,打开一个vue项目,可以看到F12多了一个vue栏,同时插件图标那里有vue图标亮起,即安装成功

1.下载在iconfont官网上下载选好的项目中的图标,解压获得一个文件夹,复制其中的文件到vue项目的assets/iconfont文件夹下2.引入在main.js中引入import '@/assets/iconfont/iconfont.css'/3.使用在需要的template标签中使用 热映电影

声明式导航在浏览器中，点击链接实现导航的方式，叫做声明式导航使用场景在网页中点击链接实现网页的切换；在Vue项目中点击切换组件声明式导航新老版本的写法1.使用a标签实现网页切换电影影院我的2.使用router-link实现声明式导

:data定义成一个函数的好处是可以让每个实例可以维护一份被返回对象的拷贝,若是对象,则会影响到其他实例

产生原因因为store是存储在运行内存中，当浏览器刷新时，会重新加载vue实例，store也会重新赋值解决方法https://blog.youkuaiyun.com/guzhao593/article/details/81435342将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中用sessionStorage来保存state里的数据...

共同点示例不同点1.手段2.编译过程3.编译条件4.性能消耗5.使用场景

例子<div id="app"> <div v-for="item in arr" v-if="item.flag"> {{item.phone}} </div></div><script type="text/javascript"> new Vue({ el:"#app", data:{ arr:[ { flag:true, phone:'apple' },

computed:　　　　当一个属性受多个属性影响的时候就需要用到computed　　　　最典型的栗子： 购物车商品结算的时候watch:　　　　当一条数据影响多条数据的时候就需要用watch　　　　栗子：搜索数据...

#### Vuex定义Vuex是vue的状态管理模式,用于管理vue组件的可变化状态#### vuex五大特性state,getters,mutations,action,module##### statevuex中的基本数据##### gettersstate中派生出的数据##### mutations同步更改vuex中的store中的状态##### actions异步更改状态##### modulestroe分割模块

vue.js通过数据劫持结合发布者-订阅者模式,通过Object.defineProperty()劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发相应的监听回调函数

html<div id="app"> <input type="text" v-model="msg" v-on:keyup.enter="fn"/></div>jsvar app = new Vue({ el: '#app', data: { msg:'' }, methods:{ fn(){ alert(this.msg);//文本框输入内容后回车,弹出框就弹出输入内容 } }})...

场景使用命令:npm i -S axios后,再次运行vue项目,出现题述报错解决输入如下命令:npm install --save

0.总结项目中的data写成函数的形式并必须带返回值的原因是:1.若组件中的data是一个普通对象,所有使用该组件(组件是一个可以多次用的实例)的都引用同一个data,会造成数据污染(即:一改皆改);2.而组件中的data被封装成一个函数时,在实例化组件时调用的仅仅是函数生成的副本1.Vue实例中的data和组件化项目中的data//组件化项目的datadata() { return { };//Vue实例中的datanew Vue({ el:"#app",

1.iconfont官网将图标添加到项目2.在我的项目中的Font class 复制代码://at.alicdn.com/t/font_xxxxx.css3.本地项目的index.html中导入<link rel="stylesheet" href="//at.alicdn.com/t/font_xxxxx.css">4.在vue组件中引入例:Footer.vue中<i class="iconfont icon-yingyuan"></i>...

1.在待导入的路由文件中导出组件(留出对外接口)示例:导入个人中心:center.jsexport default ({ path: '/center', name: 'center', component: () => import ('../../views/Center/Center.vue')})2.index.js中引入路由index,jsimport Vue from "vue";import VueRouter from "vue

总结ref的功能1:在普通的dom元素上使用ref属性,则引用指向的就是dom元素console.log(p,this.$refs.p);//输出结果一样ref的功能2:与真实组件配合console.log(this.this.$refs.hello.name)例子<div id="app"> <p ref="p">shijie</p> <nihao ref="hello"></nihao></div>&

总结1.数组绑定多个classhtml: :class="['yanse','ziti']"css: .yanse{} .ziti{}2.数组包含对象绑定classhtml: :class="[{yanse:flag},'ziti']"js>data: flag:true/false3.数组包含方法绑定classhtml: :class="[biankuangShow(),'ziti']"js>methods: biankuangShow(){}4.数组绑定多个style

1.v-for实现多层嵌套遍历代码<div id="app"> <div v-for="(item,index) in person"> 我叫{{item.name}},我每天上午: <!-- 注:item.daily是把item取出来给第二层用 --> <div v-for="(items,indexs) in item.daily"> {{items.am}}

文章目录0.概要1.事件冒泡和事件捕获1.1.事件冒泡例子1.2.事件捕获例子2.阻止冒泡和阻止默认行为例子0.概要1.阻止冒泡:@click.stop=‘fn’2.阻止浏览器的默认行为:@click.prevent=‘fn’3.事件捕获:@click.capture=‘fn’1.事件冒泡和事件捕获1.1.事件冒泡例子html:<div id="app"> <div id="car" @click="type('车')"> <div id="benzcar

1.自定义v-orangeVue.directive('orange', { inserted: function(el) { console.log('el', el);//输出:<h1 v-orange>我是文本</h1> el.style.backgroundColor = "orange"; }})var vm = new Vue({ el: "#app"});

1.全局过滤器代码<body> <div id="app">{{msg | daxie}}</div> <!-- 注意是"|"不是"||" --></body><script> Vue.filter('daxie', (i) => { return i.toUpperCase()//输出HELLO }) var vm = new Vue({ el: "

文章目录问题:解决:问题:<body><div id="app"> <div v-for="item in arr" :key="item"> <h1>{{item}}</h1> </div> <button @click="change">改变数组</button></div><script> var app = new Vue({ el: "#app",

vue ui 打开可视化页面安装依赖>开发依赖>less-loader,安装依赖>开发依赖>less,重启项目目的是为了能使用<style lang="less" scoped></style>

应用上电脑下载插件Vetur,重启vs code

Element-UI介绍Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。设计原则一致性 Consistency与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。反馈 Feedback控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。效

设置vuev-bind:classv-bind:stylev-bind:classv-bind:style

发现问题设置两个组件.不能全部显示出现原因用单标签的时候，只会显示第一个组件改成双标签后，就会显示两个组件了。代码html<div id="app"> <!-- 多标签 --> <!-- <my_component1></my_component1> <my_component2></my_component2> --> <!-- 单标签 --> &l

文章目录methods属性的使用用途语法示例htmljs效果methods属性的使用用途给 Vue 定义方法语法var vm = new Vue({ methods:{ // 在此时定义方法，方法之间使用逗号分隔 方法名:function(){}});示例html<div> {{msg}} <span><button @click="add(3)">点击</button></sp

文章目录1.双向绑定实现思路代码htmljs效果2.事件绑定实现思路代码htmljs效果1.双向绑定实现思路代码htmljs效果2.事件绑定实现思路代码htmljs效果

<div class="money"> $<input type="text" v-model="dollar">=¥ <input type="text" v-model="yuan"></div>