Vue
关注
分享
扫一扫
文章平均质量分 64
Vue学习专栏
「已注销」
这个作者很懒，什么都没留下…
展开
-
优化 vue 使用 webpack 打包，出现的缓存问题 及 项目部署问题
vue 项目每一次打包上线，都会有浏览器缓存问题，需要用户手动清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案：缓存问题方法一在index.html文件添加如下代码<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">&.原创 2022-05-18 16:46:09 · 5428 阅读 · 2 评论 -
Vue进阶 - Vue3
Vue3在年后第一个工作日正式发布，官方文档创建（两种）使用vue-cli创建官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --version## 安装或者升级你的@vue/clinpm install -g @vue/cli## 创建vue create vue_test## 启动cd vue_testnpm原创 2022-02-11 17:06:02 · 1075 阅读 · 0 评论 -
Vue进阶 - 路由
理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。基本使用安装vue-router，命令：npm i vue-router应用插件：Vue.use(VueRouter)编写router配置项://引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../component原创 2022-02-06 16:10:01 · 148 阅读 · 0 评论 -
Vue进阶 - vuex
Vuex概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信Vuex使用时机多个组件依赖于同一状态来自不同组件的行为需要变更同一状态Vuex原理图Vuex环境搭建创建文件：src/store/index.js// 引入Vue核心库import Vue from 'vue'// 引入Vueximport Vuex from 'vuex'// 应用Vuex插件原创 2022-02-02 16:21:47 · 1036 阅读 · 0 评论 -
Vue进阶 - 插槽
作用让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件分类默认插槽、具名插槽、作用域插槽使用方式默认插槽// 父组件<Category title="美食"> html结构</Category>// 子组件<template> <div class="category"> <!-- 定义插槽 --> <slot>插槽默认内容<原创 2022-01-10 17:03:01 · 381 阅读 · 1 评论 -
Vue进阶 - 配置代理
方式一在vue.config.js中添加如下配置：devServer: { proxy: 'http://localhost:4000' // 请求地址}说明：优点：配置简单，请求资源时直接发给前端（8080）即可缺点：不能配置多个代理，不能灵活的控制请求是否走代理工作方式：若按照上述配置代理，当请求了前端不存在资源时，那么该请求会转发给服务器（优先匹配前端资源）方式二编写vue.config.js配置具体代理规则：devServer: { proxy: {原创 2022-01-10 14:21:25 · 208 阅读 · 0 评论 -
Vue进阶 - 自定义事件
定义一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）绑定方式一：在父组件中<School @schoolName="getSchoolName" />或<School v-on:schoolName="getSchoolName" />方式二：在父组件中：<School ref="school" />......mounted(原创 2021-12-30 16:44:53 · 603 阅读 · 0 评论 -
Vue进阶 - 组件传参
父子组件传参父传子一般都是需要传动态的值，所以需要v-bind绑定，当然，传递的值也可以是数字、对象、数组等等子组件中接受父页面传过来的值，有几点需要了解：组件实例的作用域是孤立的子组件要显式的用props选项声明它预期的数据示例：父组件// 定义数据data() { return { todos: [ { id: "001", title: "看书", done: true }, { id: "002", tit原创 2021-12-30 16:39:45 · 1007 阅读 · 0 评论 -
Vue进阶 - VueCli相关知识点
不同版本的Vuevue.js与vue.runtime.xxx.js的区别vue.js是完整版的vue，包含：核心功能+模板解析器vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到createElement函数去指定具体内容ref属性被用来给元素或子组件注册引用信息（id的替代者）应用再html标签上获取的是真实DOM元素，应用原创 2021-12-21 17:11:05 · 442 阅读 · 0 评论 -
Vue进阶 - Vue组件
使用步骤定义组件（创建组件）注册组件使用组件（写组件标签）非单文件组件定义组件使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别区别如下：el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器data必须写成函数，避免组件被复用时，数据存在引用关系备注：使用 template 可以配置组件结构。// 创建组件const schoolConstruct原创 2021-12-21 09:56:12 · 533 阅读 · 0 评论 -
Vue基进阶 - Vue生命周期
定义生命周期又名：生命周期回调函数、生命周期函数、生命周期钩子它是Vue在关键时刻帮我们调用的一些特殊名称的函数生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的生命周期函数中的this指向是vm或组件实例对象原理图beforeCreate( 创建前 )在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。created ( 创建后 ）实例原创 2021-12-11 21:25:11 · 841 阅读 · 1 评论 -
Vue - Vue指令进阶
v-bind：单向绑定解析表达式，可简写为:xxxv-model：双向数据绑定v-for：遍历数组/对象/字符串v-on：绑定监听事件，可简写为@v-if：条件渲染（动态控制节点是否存在）v-else：条件渲染（动态控制节点是否存在）v-show：条件渲染（动态控制节点是否展示）v-text作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会<!DOCTYPE html><html lang="en">原创 2021-12-10 21:00:36 · 748 阅读 · 0 评论 -
Vue基础 - Vue数据监测原理
更新时的问题<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2021-12-09 15:39:30 · 1382 阅读 · 0 评论 -
Vue基础 - Vue语法
模板语法Vue模板语法有两大类1、插值语法功能：用于解析标签体内容写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性2、指令语法功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）举例：v-bind:href='xxx'或简写为:href='xxx'，xxx同样要写js表达式，且可以直接读取到data中的所有属性备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子3、示例<!DOCTYPE html>&l原创 2021-12-08 16:14:20 · 1037 阅读 · 0 评论 -
Vue基础 - 样式绑定
对象语法v-bind:class设置一个对象，动态切换class// 样式是否起作用，根据isActive的布尔值是否为true<div :class="{'active':isActive}">xxx</div>:class可以和class共存/*当isActive值为true，isError为false，样式为 static和isActive。当isActive值为false，isError为true，样式为 static和isError。当isActive值为原创 2021-12-06 17:20:54 · 191 阅读 · 0 评论 -
Vue基础 - 计算属性与监听属性
计算属性(computed)定义要用的属性不存在，要通过已有属性计算得来原理底层借助了Object.defineproperty方法提供的getter和setter执行时机初次读取时会执行一次当依赖的数据发生改变时会被再次调用优势与methods实现相比，内部有缓存机制（复用），效率更高，调试方便备注计算属性最终会出现在vm上，直接读取使用即可如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时以来的数据发生变化<!DOCTYPE html>原创 2021-12-06 11:42:01 · 510 阅读 · 0 评论 -
Vue基础 - el - data - MVVM - 数据代理
el与data的两种写法1、el有两种写法new.Vue时配置el属性先创建Vue实例，随后再通过vm.$mount('#root')指定el的值2、data有两种写法对象式函数式如何选择：在使用组件时，data必须使用函数式，否则会报错3、一个重要原则 - 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了<!DOCTYPE html><html lang="en"><head> <m原创 2021-12-05 15:11:23 · 410 阅读 · 0 评论 -
Vue基础 - 初识Vue
Vue是什么Vue是一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用简单应用：只需要一个轻量小巧的核心库复杂应用：可以映入格式各样的Vue插件Vue官网： https://cn.vuejs.org/Vue的特点1、采用组件化模式，提高代码复用率、切让代码更好维护2、声明式编码，让编码人员无需直接操作DOM，提高开发效率3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点搭建Vue开发环境1、引入Vue方式一：下载方式二：CDN 对于制.原创 2021-12-03 20:17:56 · 348 阅读 · 0 评论 -
前端面试题合集（持续更新中......）
HTML、CSS1、元素水平垂直居中• 定位偏移 top，left为50%，margin-left，margin-top自身的-50%• 定位平移 top，left，bottom，right为0，margin为auto• 定位平移 top，left为50%，transform：translate(自身的50%)• 弹性盒 主轴与交叉轴居中• 表格 父block，子table-cell2、C3新特性1 圆角边框：border-radius 2 多背景图：background 3原创 2021-03-30 15:55:44 · 743 阅读 · 0 评论