![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 55
瓜皮司徒
这个作者很懒,什么都没留下…
展开
-
get与post区别
请求报文、响应报文我们发送的http请求,浏览器都会整理成请求报文,发送到服务器。服务器响应的数据,浏览器会以响应报文的形式接受。HTTP请求报文:个HTTP请求报文由四个部分组成:请求行、请求头部、请求空行、请求数据。HTTP响应报文:同样的,HTTP响应报文也由四部分组成:响应行、响应头、响应空行、响应体get 与 post的区别?Get是不安全的,因为在传输过程,数据被放在请求的URL中;Post提交的数据在HTTP包的请求包体中,对用户来说都是不可见的,相对安全。Get传送的数据原创 2021-03-12 12:13:54 · 95 阅读 · 0 评论 -
vue中mixins(混入)的使用
一、来自官网的描述混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内,如果想将一些公共功能,如组件、方法、钩子函数等复用,混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项,在组件中复用。因为vue实例也是对象,所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins,在创建一个原创 2021-01-20 16:12:31 · 75 阅读 · 0 评论 -
vue2与vue3的区别
1. vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x,使用proxy的优势如下defineProperty只能监听某个属性,不能对全对象监听可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以原创 2021-01-20 16:08:37 · 565 阅读 · 0 评论 -
vue修改数据页面不重新渲染
使用vue,遇到几次修改了对象的属性后,页面并不重新渲染一、直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><script&原创 2021-01-20 16:04:26 · 1068 阅读 · 0 评论 -
Vue中的$nextTick()
一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM什么意思呢?我们可以理解成,Vue 在更新 DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新举例一下Html结构<div id="app"> {{ message }} </div>const vm = new Vue({ el: '#app',原创 2021-01-20 07:32:38 · 182 阅读 · 0 评论 -
vue之prop
Prop1 . prop 大小写Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'})<!-- 父组件中 kebab-case 的 --><blog-post post-title="hello!"></blog-post>2 .单项数据流原创 2021-01-20 07:32:55 · 100 阅读 · 0 评论 -
vue中的slot(插槽)
1 、slot 基本用法插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 </div> `, data () { return原创 2021-01-19 17:16:55 · 93 阅读 · 0 评论 -
vue脚手架本地开发跨域请求设置
vue脚手架配置在根目录创建vue.config.js在module.exports中配置devserver的内容devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target:'http://localhost:3000/',//跨域请求资源地址原创 2021-01-19 17:10:36 · 102 阅读 · 0 评论 -
vue-Router实现原理
一、前端路由概念通过改变 URL,在不重新请求页面的情况下,更新页面视图。二、vue-Router两种模式更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式:Hash — 默认值,利用 URL 中的hash("#") 、history-- 利用URL中的路径(/home)如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})m原创 2021-01-19 17:08:05 · 141 阅读 · 0 评论 -
vue路由,路由传参(parmas,query)
一、Vue路由基础用法:1 .安装 npm install vue-router --save2 .main.js中//Vue路由:引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由:引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld from原创 2021-01-19 16:50:21 · 113 阅读 · 0 评论 -
vue之filter
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种:局部过滤器和全局 .原创 2021-01-19 16:40:49 · 101 阅读 · 0 评论 -
vue组件封装
你封装过组件吗??说一下组件封装????你在项目中是如何封装组件的?????以上问题是面试官,最常问到的问题?那么你应该如何回答呢?答: 我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能..原创 2021-01-19 11:57:41 · 107 阅读 · 0 评论 -
vue中Computed、Methods、Watch区别
1.计算属性Computed模板内使用js表达式是很方便的,设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {原创 2021-01-19 11:49:37 · 93 阅读 · 0 评论 -
Vue组件通信(父传子、子传父、兄弟通信)
一.父组件传到子组件父组件是通过props属性给子组件通信的1 . 父组件parent.vue代码如下: <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </template> <sc原创 2021-01-19 11:39:56 · 124 阅读 · 0 评论 -
v-if与v-show的区别
一、实例和组件定义data的区别vue实例中的data属性既可以是一个对象,也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性,只能是一个函数如果为组件data直接定义为一个对象Vue原创 2021-01-19 07:32:29 · 82 阅读 · 0 评论 -
vue常用指令与修饰符
文章目录1. v-text2. v-html3. v-pre4. v-cloak5. v-once6. v-if7. v-elsev-else-if9. v-show10. v-for11. v-bind12. v-model13.v-on事件修饰符1. v-textv-text主要用来更新textContent,可以等同于JS的text属性。<span v-text="msg"></span>这两者等价:<span>{{msg}}</span>原创 2021-01-14 12:01:29 · 113 阅读 · 0 评论 -
vue双向数据绑定
vue双向数据绑定原理原理vue.js是采用数据劫持结合发布者-订阅者模式的方法,通过object.defineproperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染试图具体步骤第一步: observer(obu塞玩)的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile(康普雷)解析模原创 2021-01-08 15:55:42 · 251 阅读 · 0 评论 -
vue 生命周期
概念生命周期是一个组件从创建到销毁的过程。vue 生命周期有四个阶段创建->挂载->更新->销毁beforeCreate 创建前:实例以初始化,data和$el还没有。created 创建后:data 初始化完成,但 $el 还没有。beforeMount 挂载前:$el 已生成,但dom 还没有挂载,不能获取dommounted 挂载后:dom 以挂载,可以正常获取dom,我们一般在这里发送ajax请求。beforeUpdate 更新前:原创 2021-01-06 20:22:24 · 75 阅读 · 0 评论 -
vue 自定义过滤器
过滤器的作用实现数据的筛选、过滤、格式化。过滤器分为两种:局部过滤器和全局过滤器局部 // 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ 名称:function(val){ return val + '处理后的数据' } } })全局 Vue.filter('名称',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) ret原创 2021-01-06 19:52:01 · 85 阅读 · 0 评论 -
vue 自定义指令
自定义指令是什么?它是一个对象,对象的属性名即是指令的名字,对象的值是一个函数第一个参数是指令所在的元素。它分为全局自定义指令和局部自定义指令全局: Vue.directive("focus", { inserted: function (el) { el.focus(); el.style.border = "4px solid pink" }, })局部: directives:{ foucs:{ inse原创 2021-01-06 19:45:45 · 63 阅读 · 0 评论 -
前端面试题总结
文章目录vue 双向数据绑定原理vue虚拟DOM,diff算法组件通信vuexvue-router(路由原理,路由守卫,传参)vue生命周期自定义指令,自定义过滤器自定义组件常用的指令,修饰符vue2和vue3的区别多环境变量对axios的封装(url,axios请求拦截 响应拦截,函数封装 )element-ui/vant-ui按需引入sass配置rem,vw/vh设置wedpack配置(设置跨域,路径别名,打包分析,cdn引入,去掉console.log,单独打包第三方模块,ie兼容,eslint规范,原创 2021-01-06 11:26:42 · 287 阅读 · 0 评论 -
keep-alive
keep-alive是什么?keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。它有什么作用?在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性有什么参数?include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串原创 2021-01-05 21:51:55 · 56 阅读 · 0 评论 -
上传图片
上传图片首先要创键FormData然后将传入的参数添加到实例当中最后在请求接口传参代码演示<van-popup v-model="show0" position="bottom"> <div class="boxtoxiang"> <p @click="paizhao"> // 文件类型 绑定的事件 <van-uploader result-type="file" :after-read='paizh原创 2021-01-05 11:56:33 · 79 阅读 · 0 评论 -
开发一个项目(阐述)
如何开发一个项目首先要根据效果图,观察该项目需要用到的框架是pc或者移动端,与不需要使用到组件创建相对应的宽假,安装需要的组件。移动端配置一下rem,安装对应的插件,让px自动装换城rem自适应布局配置都环境变量利用scss封装一下公式。根据环境变量封装网络模块接口,一开始不会全部封装会先封装几个,其他的等到用到的时候在封装会把一些底部的tabber,头部的返回栏,上拉加载,下拉刷新,点击回到顶部等组件组件封装起来...原创 2021-01-04 18:45:10 · 126 阅读 · 0 评论 -
vuex总结(话术)
什么是vuex ?Vuex 是一个专为Vuex.js应用程序开发的状态管理模式,他由五部分组成:分别是:state,actions,mutations,modulse2 由五部分组成state:数据原创 2021-01-04 15:11:37 · 128 阅读 · 0 评论