![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 62
神奇大叔
这个作者很懒,什么都没留下…
展开
-
vue provide和inject
1、provide export default{ provide:{ key:value }, provide(){ return { key:value } } } 2、inject export default{ inject:["key"], inject:{ x:"provider中的key" } inject:{ x:{ from:"provider中的key", default:"默认值"原创 2021-05-30 14:13:26 · 445 阅读 · 0 评论 -
vue 将文档外的实例添加进文档内中
适用于将第三方库的内容添加进文档内(1)创建组件构造器 let Profile=Vue.extend(组件实例/{实例配置项});(2)挂载组件 let comp=new Profile() 将在文档之外渲染,还需走(3)步 comp.$mount() 将组件对象挂载到任意元素会替换元素内的内容,不需走(3)步 comp.$mount(document.createElement('div')); $mount(实例/选择器)(3)若在文档外渲染,$el为当前组件原创 2021-06-03 21:23:12 · 164 阅读 · 0 评论 -
vue Vue.observable返回一个响应对象
Vue.observable 让一个对象可响应,Vue内部会用它来处理data函数返回的对象。 也可以作为最小化的跨组件状态存储器 使用: let ob=Vue.observable(object) 返回的对象可以直接用于渲染函数和计算属性内,会在发生变更时触发相应的更新和vue3.0区别: 在Vue 2.x中,被传入的对象会直接被Vue.observable变更,所以如这里展示的,它和被返回的对象是同一个对象。 在Vue 3.x中,则会返回一个可响应的代理,而对源对象直接进行变更仍然是不原创 2021-06-02 21:15:39 · 478 阅读 · 0 评论 -
vue 强制替换元素/组件而不是重复使用
作用: 完整地触发组件的生命周期钩子 触发过渡方法: key的特殊主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes 如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。 而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素。场景: <transition> <span :key="text">{{ text }}</span> 当te原创 2021-05-30 20:27:10 · 477 阅读 · 0 评论 -
vue $实例变量/方法、Vue.全局属性/方法、原型prototype来组件之间获取数据
$parent 可以获取父元素对象,在子组件中修改会影响父组件 可以this.$parent.$parent链式调用取父组件之上的组件 (1)获取父组件的方法/计算属性 在子组件的函数中: this.$parent.方法名(); this.$parent.计算属性; 计算属性只会执行一次 ...原创 2020-02-27 16:05:05 · 2443 阅读 · 0 评论 -
vue Vue.extend和extends模板选项
1、Vue.extends 使用基础Vue构造器,创建一个“子类”。参数是一个包含组件选项的对象。 (1)创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: '原创 2021-05-30 13:50:27 · 1614 阅读 · 0 评论 -
vue app.config配置自定义错误捕捉、全局变量、自定义元素
const app = Vue.createApp({})1、处理组件渲染方法执行期间以及侦听器抛出的未捕获错误 app.config.errorHandler = (err, vm, info) => { // 处理错误 // `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子 } 2、为Vue的运行时警告指定一个自定义处理函数,开发模式下有效 app.config.warnHandler = function(msg, vm, trace) { /原创 2021-05-22 22:27:52 · 1959 阅读 · 0 评论 -
vue 自定义插件
vuex 插件1、Vue.use(xx); (1)实质是:调用xx.install(Vue) (2)在new Vue()之前使用2、语法let xx={ install:function(Vue) { (1)定义的指令和混合mixin可直接使用 (2)Vue.x定义的方法或变量只能在插件中使用 (3)Vue.prototype.$xx,定义的方法或变量,在全局th...原创 2020-03-03 22:24:39 · 1817 阅读 · 1 评论 -
vue 渲染函数生成组件、函数式组件
1、创建 Vue.component('组件名', { render: function (createElement) { createElement用来创建虚拟dom即VNode return createElement( 'div', 标签名|组件名,或resolve('...')的一个async函数 { 可选,若无可直接在此写第三个参数 class: {...}, `v-bind:class`相同,接受一个字符串、对象或字符串和对象组成的数组原创 2021-04-02 22:29:39 · 1199 阅读 · 0 评论 -
vue mixins混合配置
1、mixins在vue示例化对象中混入(1)混合属性,能将mixin内对象的内容混合进入vue中相同属性的内容,相同不会覆盖(2)在main.js中vue实例化对象,和data同级添加(3)mixins:[{对象}]; 因为vue实例化对象中data形式为对象,所以可以直接对象混入在组件中混入(1)let xx={data:function( return {键值对})}(...原创 2020-03-03 20:49:50 · 501 阅读 · 0 评论 -
vue 在组件自定义标签上赋属性inheritAttrs和$attrs
默认的属性传递给组件,会赋值在组件的根元素上赋值在组件自定义标签上: (1)组件的选项中设置 inheritAttrs: false export default { inheritAttrs:false, } (2)使用$attrs,在自定义标签上使用 <template> <label> <input v-bind="$attrs" > </label&g原创 2021-03-17 11:03:23 · 868 阅读 · 0 评论 -
vue 使用自定义的字体风格文件
1、在app.vue的css中引入 @font-face { font-family: xx; src: url(../static/font/DS-DIGIT.TTF); }2、使用 font-family:xx;3、若报错,配置完下方步骤后重启在build/webpack.base.conf.js中的module:{rules:[]}中添加文件对应后缀的匹配规则如:...原创 2020-10-26 20:03:17 · 488 阅读 · 0 评论 -
vue 组件递归、组件相互依赖问题
1、设置组件name名称2、在模板中直接使用 <名称 /> xx-Yy的名称要写成<xxyy />3、使用时传入参数的方式和组件在其他组件中使用相同,注意递归终止条件 <xx :props="props"> 倘若组件需要传参数代码示例:数据:list: [{ name: "经济", children: [{ name: "如家" }, { name: "7天" }]}, {原创 2020-08-10 20:39:40 · 1159 阅读 · 0 评论 -
vue vue-touch移动端手势
1、安装 cnpm install vue-touch@next --save2、引入 在main.js中 import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) v-touch可以是自定义名称3、使用: Vue.use注册的name名称,默认改标签为div <v-touch (1)替换标签 tag="要变成的标签名称,默认为div" (2)定义手势 @事件原创 2020-08-05 14:57:31 · 8159 阅读 · 2 评论 -
vue 图片懒加载和懒加载原理
在真实图片得到之前,展示懒加载设置的图片1、安装 cnpm i vue-lazyload -S 2、main.js import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: '图片路径/gif路径/引入图片对象', attempt: 1 }) 3、使用 只需要将:src变成v-lazy即可 <原创 2020-06-01 20:22:40 · 1142 阅读 · 0 评论 -
vue 捕获组件渲染错误钩子
(1)获取url的/路径 $route.path原创 2020-05-24 15:08:54 · 573 阅读 · 0 评论 -
vue 歌词适配
1、显示当前播放歌词 (1)将请求来的歌词资源中的时间点全存进数组里 (2)配合循环指令,遍历请求来的资源,将当前播放资源的当前播放时间和资源中播放时间点 做对比,如果当前播放时间大于等于请求资源中的时间点,并且小于下一个歌词的时间点,就播放代码示例:组件: }, mounted(){ const LRCUrl = this.HOST + "/v1/restserver...原创 2020-02-21 11:33:27 · 1931 阅读 · 0 评论 -
vue 异步引入组件
// 异步操作const LRC = Vue.component("lrc",(resolve)=>require(["../components/LRC"],resolve))在引入组件的script中操作原创 2020-02-21 10:57:37 · 2361 阅读 · 0 评论 -
vue elementUi库环境搭建
1、安装 cnpm i element-ui -S2、在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);3、设置按需加载 cnpm install babel-plugin-component -D4...原创 2020-02-17 10:20:21 · 160 阅读 · 0 评论 -
vue 路由高亮模式(即给页面路由名称添加样式)
路由高亮模式将当前所在路由名称包括父路由的名称变成红色 第一种: 在主入口文件App.vue的style中设置 .router-link-active{ color:red; } 第二种: 1、在总路由js文件中,和routes同级 linkActiveClass:'xx', 2、在主入口文件App.vue的style中设置 .xx{...原创 2020-02-16 16:59:34 · 1111 阅读 · 0 评论 -
vue 路由对象属性
更多路由属性查看官网this.$route.path 类型: string 字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。this.$route.params 类型: Object 一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。this.$route.query ...原创 2020-02-16 16:28:22 · 1320 阅读 · 0 评论 -
vue 路由守卫
在main.js中,通过引入路由文件后,通过该对象使用相当于路由的生命周期1、全局前置守卫 (1)router.beforeEach 注册一个全局前置守卫,在进入到其他路由之前调用 router.beforeEach((to,from,next)=>{ to是去到的路由对象 from是正要离开的路由 next来执行去到下一个路由的操作,调用next后才能跳转到下一个路由 next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 c原创 2020-07-28 14:37:04 · 675 阅读 · 0 评论 -
vue vue3.x中vue-router
import { useRouter, useRoute } from 'vue-router'import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'import { RouterLink, useLink } from 'vue-router'1、setup访问$router和$route export default { setup() { const router = useRouter()原创 2022-02-14 16:43:52 · 700 阅读 · 0 评论 -
vue vue-router路由
路由 1、安装 cnpm install vue-router -S 2、在main.js中引入 import VueRouter from 'vue-router' Vue.use(VueRouter) 3、在main.js中创建路由 const router=new VueRouter({ routes:[ //不是routers { pa...原创 2020-02-16 10:39:49 · 1325 阅读 · 0 评论 -
vue 跨域处理究极版
如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*': { target: 'http://localhost:30...原创 2020-02-15 22:53:00 · 172 阅读 · 0 评论 -
vue axios解决跨域
axios解决跨域 1、在config中的index.js文件中 将proxyTable后的内容修改为: proxyTable: { '/local_api':{ target: 'http://localhost:3000', pathRewrite: { '^/lo...原创 2020-02-15 22:50:38 · 125 阅读 · 0 评论 -
vue axios拦截器处理post请求中添加qs处理参数问题
Axios拦截器 (1)在发送之前和接收之前的一些判断 (2)参数为当前网络请求信息 (3)config.method为请求方法 (4)config.data为请求url 1、在main.js中使用 // 添加请求拦截器 Axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 r...原创 2020-02-15 22:03:39 · 2598 阅读 · 2 评论 -
vue filter过滤器
过滤器 1、与data同级 filters:{ xx:function(value) { return value+x } } 其中:value为|前面的值 2、在要过滤的文本后面 {{"str"/数值| xx}}代码示例:<template> <div> {{"hh 20" | fil}} {{"这...原创 2020-02-15 20:23:46 · 136 阅读 · 0 评论 -
vue 自定义指令
自定义指令:全局指令: 1、在main.js中创建 2、引入的Vue库来调用 Vue.directive('名称',{ 钩子函数,第一个形参为放置位置的标签,即dom, 通过js的方式来操作标签 }) 补充js样式: 获取焦点搭配input使用,在钩子函数中,el形参.focus(),可实现页面锁定光标的作用 其中钩子函数: (1)bind:...原创 2020-02-15 18:08:38 · 669 阅读 · 0 评论 -
vue 组件过渡动画
搭配标签消失/出现(v-show、v-if)的淡入淡出效果1、在要过渡的标签外层包裹 <transition name='x> xx </transition>(1) 在style中写: //设置淡出,以及淡出时间 .x-enter,.x-leave-to{ opacity:0; } .x-enter-to,.x-leave{ o...原创 2020-02-15 17:17:52 · 2368 阅读 · 0 评论 -
vue 生命周期函数
组件声明周期函数 在script中与data同级使用 beforeCreate 组件创建前 created 组件创建后 beforeMount 组件渲染前 mounted 组件渲染后 beforeUpdate 组件状态更新前 updated 组件状态更新后 beforeDestroy 组件销毁前,调用vm.$destroy()后 destroyed 组...原创 2020-02-15 15:53:05 · 495 阅读 · 0 评论 -
vue 插槽、内联模板、text/x-template模板
插槽(父组件向子组件分发内容) 内容分发效果 vue2.5版本以上,template可换成任意元素 1、在另一个组件A(父组件)中引入B(子组件) <B>xxx</B> 2、在组件B中 <slot></slot> 即会显示A组件中xxx的内容,原slot标签中的内容会被覆盖具名插槽 1、即组件B中的slot命名 &l...原创 2020-02-15 15:39:24 · 3148 阅读 · 0 评论 -
vue 访问根示例、ref操作dom、限制组件暴露内容expose
访问根示例 1、在main.js中,与components同级,添加data属性 data:{键值对} 2、则在App.vue中导入过的所有子组件都能访问 一般在computed计算属性中 computed:{ 函数中{ this.$root.键名获取 } }ref 1、在元素标签上 ref='xx' 2、在函数中 this.$refs.xx...原创 2020-02-15 14:47:44 · 1285 阅读 · 0 评论 -
vue props扩展-参数验证
props参数验证 不符合设定参数形式,会报警告但不会终止程序 1、验证参数类型 将原本的props:[xx]替换成 props:{ 参数名:首字母大写的类型 } 2、设置参数默认值(即不传参数也能显示) props:{ 参数:{ type:参数类型, default:默认值(只能设置基本数据类型) } } 设置复杂类型参...原创 2020-02-15 11:32:47 · 374 阅读 · 0 评论 -
vue 切换组件保持之前状态keep-alive、Component动态组件、is属性解决标签内部标签限制
切换保持组件当前状态 <component :is='变量'></component> 切换组件: (1)变量的值即为组件名,使用时需在data属性中声明,且不加/ (2)变量的值为哪个组件名即代表哪个组件 保持当前组件状态(即切换组件,再切换回去时,还是上次操作组件的状态) <keep-alive> <compo...原创 2020-02-15 10:32:53 · 4691 阅读 · 0 评论 -
vue 组件之间传递数据、事件监听hook、$emit验证
组件之间传递数据 父组件向子组件 (1)在父组件中,在子组件的标签上写上键值对,可以传递多个键值对 (1)将变量作为值传递,得使用v-bind解析 (2)使用v-bind+v-model,可以实现父组件实时传递数据 (2)子组件接收,在script中和data同级 props:['键名1','键名2',...] (3)子组件使用 {{键名}}...原创 2020-02-14 22:39:30 · 994 阅读 · 0 评论 -
vue 创建组件、组件选项、require.context全局自动注册组件
创建自己的组件 (1)template中只能存在一个根容器 (2)script中的name是当前组件的名称,为可选项 (3)在data中存放全部初始化状态 (4)style为template的样式 (5)在style标签中添加scoped,表示样式只渲染当前组件 (6)将style标签中的 lang='css'修改成lang='less',即变成less样式,不写默认为css ...原创 2020-02-14 21:50:11 · 290 阅读 · 0 评论 -
vue 表单元素和组件中v-model应用、自定义v-model、watch监听
表单与侦听器 1、v-model 放在input等输入框标签内 v-model='变量' (1)在表单元素,如input标签中设置v-model='变量' (2)在data中初始化变量,则input中的内容即是该内容 (3)变量可提取出来,{{变量}},则会实时获取input中的内容 (4)若要等到回车/焦点消失,变量中的内容才是输入框中的内容,改成v-mod...原创 2020-02-14 21:24:49 · 3111 阅读 · 0 评论 -
vue v-bind添加类名、style属性、动态参数
v-bind添加类名 1、通过v-bind:class='xx'标签添加类,可通过如下形式,动态改变添加的类名是否存在,即'对象' 1、:class='{类名:布尔值}' 2、:class='[类名1,类名2]' (1)此方法需先在data中声明类名和类名对应的值 (2)[]内还可以写三元运算符来判断添加类名 (3)[]内还可以嵌套{},按照[{类名:布尔值},...原创 2020-02-14 18:13:04 · 2266 阅读 · 0 评论 -
vue 计算属性和方法
计算属性 用于简单运算的,并且多次使用的方法 (1)计算属性最终效果和在methods里声明方法是一样的 (2)与函数的区别;多次访问计算属性会立即返回之前的计算结果,而调用方法将总会再次执行函数。 使用: 1、与data同级 computed:{ es6语法或键值对函数 } 2、调用计算属性 在template中 {{函数名}}方法 (1)与dat...原创 2020-02-14 16:59:26 · 1357 阅读 · 0 评论