Vue2 - 随笔分类 - 香香鲲

Vue3与Vue2的区别（面试题）

摘要：模板指令 1、v-if、v-for优先级区别 3.0依然不建议写在一个元素上但是依然可以同时绑定 Vue2：当在同一个元素上使用v-if时，将优先v-for Vue3：v-if优先，再v-for 2、v-model对的组件使用进行了返工，替换v-bind.sync v-model重新设计了组件中阅读全文

posted @ 2022-09-23 19:46 香香鲲阅读(4523) 评论(0) 推荐(0)

Vue：use函数、插件配置(把axios封装为公共属性)

摘要：同2.0一样use函数接受一个函数或者对象(对象有install函数) 然后会调用这个传入的回调函数给它传参app对象,以此来实现第三方插件 //main.js文件 import { createApp} from 'vue' import App from './App.vue' const a 阅读全文

posted @ 2022-09-22 17:08 香香鲲阅读(268) 评论(0) 推荐(0)

Vue中网络环境配置

摘要：代理配置 vite环境中 //vite.config.js文件中 export default defineConfig({ plugins: [vue()], server: { // port:"8080", // host proxy: { '/api': { target: 'http:// 阅读全文

posted @ 2022-09-22 16:55 香香鲲阅读(112) 评论(0) 推荐(0)

导入ElementUI的方式

摘要：导入方式 1、引入ui框架可以引入多个ui框架但是注意css有可能会冲突 import ElementUI from 'element-ui'; 2、引入全局css整个ui框架的风格 import 'element-ui/lib/theme-chalk/index.css'; 3、把Elemen 阅读全文

posted @ 2022-09-20 21:41 香香鲲阅读(165) 评论(0) 推荐(0)

Vue2：$attrs多层传值

摘要：在不用状态管理vuex的时候，如何让GrandFather与Son通信，我们可以用可以emit一层一层的传递:会显得冗余。 vue2.4之后，提出$attrs、$listeners ,可以实现跨级组件通信。 $listeners官网解说:事件传递 $attrs官网解说:属性传递在组件中绑定可以把阅读全文

posted @ 2022-09-20 21:40 香香鲲阅读(520) 评论(0) 推荐(0)

仓库Vuex

摘要：Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex3.0适用于vue2.0 vuex4.0适用于vue3.0和2.0 引入方式 1、安装 npm i vuex 导入阅读全文

posted @ 2022-09-15 21:09 香香鲲阅读(42) 评论(0) 推荐(0)

Vue2：路由守卫

摘要：全局前置守卫beforeEach beforeEach.((to,from,next)=>{}) 全局后置守卫afterEach afterEach.((to,from)=>{}) 全局解析钩子beforeResolve 路由独享守卫beforeEnter beforeEnter.((to,from 阅读全文

posted @ 2022-09-13 22:37 香香鲲阅读(923) 评论(0) 推荐(0)

Vue2：注册子路由

摘要：const routes = [ { path: '/a', name: 'a', component: () => import("../views/a/index.vue"), redirect: "/a/a1", //用输入的是/a路由帮他重定向到 /a/a1 children: [{ pa 阅读全文

posted @ 2022-09-10 11:21 香香鲲阅读(118) 评论(0) 推荐(0)

Vue2：路由传参（query传参和动态路由传参）

摘要：动态路由传参路由传参有2种方式传递的参数都在路由信息对象中: 路由对应的组件中获取 this.$route 1、query传参 query传参是把参数放在querystring字段中 //2种传参: <router-link to="/xx?name=karen&pwd=123">go</rou 阅读全文

posted @ 2022-09-10 10:15 香香鲲阅读(2555) 评论(0) 推荐(0)

Vue2：router-view / router-link标签、页面跳转

摘要：router-view / router-link标签 router-view:相当于路由网址匹配到的组件会渲染到当前组件的这个标签上(学不学的会路由就看能不能理解这个) <router-view></router-view> router-link:相当于a标签,给我们提供跳转到某个路由的功阅读全文

posted @ 2022-09-09 22:40 香香鲲阅读(910) 评论(0) 推荐(0)

Vue2：异步组件

摘要：什么是异步组件所谓的异步组件就是通过import或者require导入的vue组件。为什么需要异步组件 vue开发过程中，我们会做出特别多的组件，包括login,header,footer,main等等，会使页面打开很慢。异步组件的作用可以避免页面一加载时就去加载全部的组件，从而导致页面访问阅读全文

posted @ 2022-09-09 13:22 香香鲲阅读(4543) 评论(0) 推荐(0)

Vue2：缓存组件keep-alive

摘要：keep-alive 动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件失阅读全文

posted @ 2022-09-09 13:08 香香鲲阅读(702) 评论(0) 推荐(0)

Vue2：动态组件

摘要：动态组件要实现不同组件之间进行动态切换，这时候除了条件渲染，还可以使用动态组件 component 标签的 is属性语法： is后跟组件的变量名决定使用哪个组件来渲染 <component is="Sinabox"></component>==><Sinabox/> <component v-bi 阅读全文

posted @ 2022-09-09 12:52 香香鲲阅读(483) 评论(0) 推荐(0)

Vue2：自定义事件的语法

摘要：Vue提供的技术:某继承Vue的组件有三个功能: 1.触发x组件的a事件: x.$emit("a事件",参数...) 2.给x组件绑定a事件 x.$on("a事件",监听器函数) 3.给x组件解绑a事件 x.$off("a事件",监听器函数) 阅读全文

posted @ 2022-09-09 11:48 香香鲲阅读(76) 评论(0) 推荐(0)

Vue2：中央事件总线bus

摘要：event bus 通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果 1、在vue-bus.js文件中 const install = function (Vue) { const Bus = new Vue({ methods: { emit(even 阅读全文

posted @ 2022-09-08 13:29 香香鲲阅读(816) 评论(1) 推荐(1)

Vue2：Provide/Inject

摘要：Provide/Inject 通常情况下，父组件向孙组件传递数据，可以采用父子props层层传递，也可以使用bus和Vuex直接交互。在Vue2.2.0之后，Vue还提供了provide/inject选项 //父组件 <template> <div> <p>{{ title }}</p> <son 阅读全文

posted @ 2022-09-08 13:24 香香鲲阅读(508) 评论(0) 推荐(1)

Vue2：$root

摘要：$root用法作用：访问根组件中的属性或方法注意：是根组件，不是父组件。$root只对根组件有用。访问父组件的属性或方法 this.$parent 访问子组件的属性或方法 this.$ref 阅读全文

posted @ 2022-09-08 10:46 香香鲲阅读(224) 评论(0) 推荐(1)

Vue2：子组件传父组件-反向传值

摘要：子组件通过调用父组件的方法给父组件传值: 因为通过属性传值是单向的,有时候我们需要子组件的data 数据需要交给父组件使用: 子组件的自定义事件中,用$emit触发事件调用父组件方法给父组件传值 (重点),让父组件监听到自定义事件。过程：通过在子组件上定义自定义事件，在子组件中通过$emit 阅读全文

posted @ 2022-09-08 10:45 香香鲲阅读(978) 评论(0) 推荐(0)

Vue2：将原生事件绑定到组件

摘要：来自官网—— 想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符： <base-input v-on:focus.native="onFocus"></base-input> 在你尝试监听一个类似 <input> 的非常特定的元素时，这并不是个好主意阅读全文

posted @ 2022-09-08 10:40 香香鲲阅读(224) 评论(0) 推荐(0)

Vue2：$refs

摘要：$refs是一个对象，属性名就是绑定在模板中的ref值 <div ref="xx"></div> 1、this.$refs代替了DOM的元素获取操作例： var div= this.$refs.div ==》 var div= document.querySelector("div ") $roo 阅读全文

posted @ 2022-09-08 10:37 香香鲲阅读(517) 评论(0) 推荐(0)

随笔分类 - Vue2