文章目录一、组件1. 创建组件2. 引用组件3. 组件之间如何传递参数一、组件1. 创
原创
2022-09-30 10:25:02
375阅读
路由切换，组件自动销毁，想要保留A组件的数据，需要确认A组件路由所在的组件，在该组件中包<router-view> <keep-alive include="N
**作用：**让不展示的路由组件保持挂载，不被销毁。 使用： <keep-alive include="News"> //News为组件名，如果不配置include则默认该组件内的所有路由组件都保持挂载。 <router-view></router-view> </keep-alive> ...
转载
2021-10-16 21:33:00
869阅读
2评论
通过keep-alive的缓存路由组件，切换路由时原来的路由组件中的数据也会和数据一起保存下来。这样就能做到切换路由，不用重新从后台获取数据，
原创
2022-03-01 10:50:56
483阅读
通过keep-alive的缓存路由组件，切换路由时原来的路由组件中的数据也会和数据一起保存下来。这样就能做到切换路由，不用重新从后台获取数据，直接使用刚刚缓存的数据<keep-alive> <router-view></router-view></keep-alive>...
原创
2021-08-07 10:12:55
632阅读
（组件、路由）懒加载 懒加载也叫延迟加载，即在需要的时候进行加载，随用随载 在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，运用懒加载可以将页面进行划分，按需加载页面，可以分担首页所承担的加载压力，减少加载用
转载
2018-04-25 09:38:00
301阅读
2评论
组件通信1.组件通信(1) props $emit解决父子组件层数较少的情况(2) $attrs $listeners 解决组件嵌套多层关系(3)中央事件总线$bus new Vue( )$on() $emit 挂载的同-个实例化对象解决兄弟组件传值5(4) vuex的流程图脑子要有这个概念
2.声明周期的图示
3.路由的使用3.1引入包(两个全局的组件router-link to属性rout
原创
2022-11-16 08:25:10
134阅读
之前写的Vue项目，有个问题困扰了好久。新闻板块有推荐、精华、最新等几个Tab，设想通过切换Tab，改变路由参数（get/news/:tab）去获取对应数据，然后渲染到页面（用的是同一套组件），问题来了：当切换Tab时，数据并没有更新，后来看了Vue-router官网，有这么一句话：提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，
转载
2024-04-16 22:04:30
144阅读
vue
原创
2023-02-11 14:22:56
26阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
原创
2022-07-31 00:12:17
89阅读
书接上文！！！！组件间通信4: v-modelv-model 是 Vue 提供的一个用于双向绑定的指令，它可以方便地在父组件和子组件之间进行双向数据绑定。注意点：v-model 实际上是语法糖，它简化了 value prop 和 input 事件的绑定。当使用 v-model 时，确保子组件正确实现了 input 事件。示例自定义输入框组件<template>
<i
原创
2024-08-07 09:03:14
65阅读
vue2进阶篇：vue-router之缓存路由组件
原创
2022-11-29 16:11:25
356阅读
1.组件拆分1.组件实质上也是一个vue实例，因此组件中也可以使用vue的对象属性，反过来每一个vue实例也是一个vue组件（注：1.唯一不同的是el是根实例的特有选项，2.组件中的data必须是一个函数）；2.如果vue实例中没有template模板的定义，那么vue会把el挂载点下的html作为vue实例的模板；3.模板中如果还有子组件，父组件调用子组件的时候，通过属性的方式进行调用，那么子组
转载
2024-07-12 15:52:11
238阅读
需求分析：首頁面有两个组件,Artist组件和Tag组件，分别对应文章组件和标签组件，点击Tag组件的某项标签，要动态更新Artist组件里的内容，并且路由要传递查询信息首先，要根据Tag组件选中的tid去动态更新articles数据，如何去实现呢？这时候我想到的方法：是把articles数据放在vuex上实现组件共享，点击标签后，Tag组件直接异步请求articles数据，并更新Vuex上的articles,然后再更新路由，同时设置Article组件的articles为Computed属性，这样就
转载
2021-08-13 18:31:27
893阅读
Vue 测试实例 - 菜鸟教程(runoob.com) Hello App! 默认会被渲染成一个 `` 标签 --> Go to Foo Go to Bar
转载
2017-11-28 09:55:00
964阅读
2评论
解构:1：用vue官方脚手架生成基本框架2：安装vue-router element 3:导入vue-router和elementuiimport Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.c
1.0 引入组件
传统方式编写应用
使用组件方式编写应用
1.1 模块
理解：向外提供特定的js程序，一般就是一个js文件
为什么：js文件很多很复杂
作用：复用js,简化js的编写，提高js运行效率
1.2 组件认识
理解： 用来实现应用中局部（特定）功能代码和资源集合（html/css/js/image...）
为什么： 一个界面的功能很复杂
作用：复用编码，简化项目编码，提
原创
2023-12-13 08:27:14
106阅读
路由守卫的参数介绍 import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/home.vue"; Vue.use(VueRouter); const routes = [ { path
原创
2022-09-01 17:49:59
170阅读
前言：应上级要求，搭建一个公司内部的vue组件库，由于临近我预计的离职时间，所以只将流程梳理实践了一遍。假设组件库名称为ui-library。一、使用vue-cli3创建ui-library项目vue create ui-library创建项目时选择自定义模板，我的配置如下 记得vue版本需要选择2.x。ui-library目录如下 二、在根目录添加vue.conf
转载
2023-12-07 22:15:17
58阅读
前面的学习提及vue集成的一种方式，就是直接引入vue的浏览器版本，如vue.esm-browser.js。然后在js模块代码中使用vue的API，如createApp，在HTML中可以使用{{}}来插入vue上下文中的值。进阶的用法是使用vue的组件，使用组件可以提高代码复用性。简单的例子新建一个vue文件新建一个文件，命名myButton.vue，内容：<template>
&
