Vue
关注
分享
扫一扫
Vue相关知识
Cirrod
把自己热爱的东西做到了极致就变成了钱
展开
-
Vue---后台管理系统菜单权限控制
实现思路图。原创 2023-03-06 09:15:59 · 1241 阅读 · 0 评论 -
Vue2双向绑定原理
在Vue2中我们可以利用该方法对数据对象（data）使用Object.defineProperty()进行监听data里面属性的变化进行双向数据绑定。封装一个函数用于修改对象已有属性并且能监听该属性的变化，也可以实现不进行属性的修改，实现属性的劫持（Vue2中的数据劫持，劫持对象属性的变化）注意：上面的有个缺陷，就是当属性值也是对象的时候，不能劫持属性值，如{a:1,c:{b:1}}注意，observeObj这个函数，不能劫持对象的新增属性，只能劫持对象已有的属性。1、劫持对象中的某个属性。原创 2022-10-25 21:53:51 · 4247 阅读 · 0 评论 -
Vue---实现点击时组件划入划出
【代码】Vue---实现点击时组件动画划入划出。原创 2022-10-20 14:51:49 · 1445 阅读 · 0 评论 -
解决vue中接收到后端图片路径传值相同
自己搭建的后端接口中更新头像的url返回地址一致，就是修改前和修改成功后的头像地址都是一样的，导致vue的页面头像无法更新。原创 2022-08-02 20:38:01 · 404 阅读 · 0 评论 -
解决组件样式覆盖问题
一.概述①问题: 一个组件的样式会影响另一个组件的样式。②原因:在配置路由时, 两个组件都被导入到项目中,那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同,那么一个组件中的样式就会在另一 个组件中也生效,从而造成组件之间样式相互覆盖的问题。③结论:默认：只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效。④如何解决?手动处理 (起不同的类名) CSS IN JS 二.CSS IN JSCSS IN JS :是使用JavaScript编写CSS的统称,用来解决.原创 2022-04-18 23:39:00 · 2120 阅读 · 0 评论 -
在Vue或者React项目中初始化axios
初始化的request.js代码// 请求模块import axios from 'axios'import store from '../store/index'const request = axios.create({ baseURL: 'http://toutiao.itheima.net' }) // 请求拦截器 // 添加请求拦截器request.interceptors.request.use(function(config) {原创 2022-03-31 21:30:17 · 448 阅读 · 0 评论 -
Vue---Vuex基础知识
一.组件之间共享数据的方式1.父向子传值：v-bind属性绑定2.子向父传值：v-on事件绑定3.兄弟组件之间共享数据：EventBus$on 接受数据的那个组件$emit 发送数据的那个组件 二.Vuex是什么Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。三.使用Vuex统一管理状态的好处①能够在vuex中集中管理共享的数据，易于开发和后期维护②能够高效地实现组件之间的数据共享，提高开发效率③存储在v...原创 2022-03-04 11:38:51 · 1544 阅读 · 0 评论 -
Vue---Vue路由
一.SPA (Single Page Application)* 后端渲染（存在性能问题）* Ajax前端渲染（前端渲染提供性能，但是不支持浏览器的前进后退操作）* SPA (Single Page Application) 单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进的后退操作* SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）* 在实现SPA过原创 2022-02-28 17:01:47 · 580 阅读 · 0 评论 -
Vue---Vue组件
一.现实中的组件化思想体现* 标准* 分治* 重用* 组合二.编程中的组件化思想体现三.组件化开发思想1.组件化规范：Web Components* 我们希望尽可能多的重用代码* 自定义组件的方式不太容易 （html、css、js）* 多次使用组件可能会导致样式等冲突Web Components通过创建封装好功能的定制元素解决上述问题官网：Web Components | MDNVue部分实现了上述规范四.组件注册1.全...原创 2022-02-27 16:52:41 · 705 阅读 · 0 评论 -
Vue---Vue常用特性
一.常用特性概览* 表单操作* 自定义指令* 计算属性* 过滤器* 侦听器*声明周期1.表单操作2.表单域修饰符* number:转化为数值* trim : 去掉开始和结尾空格*lazy ：将input事件切换change事件<input type="number" v-model.number="age">input事件当input输入框内容改变时触发，change事件当鼠标失去焦点时触发3.自定义指令1.为何需要自定义..原创 2022-02-26 20:00:00 · 526 阅读 · 0 评论 -
Vue---Vue基础
一.Vue概述二.Vue的基本使用2.1Vue.js之hello world 基本实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title></.原创 2022-02-25 15:46:51 · 1509 阅读 · 0 评论 -
Vue---实现图片或文件上传
模板代码： <input type="file" ref="file" @change="fileChange" />事件处理函数： fileChange() { // 读取文件对象，并基于文件对象获取blob数据 const file = this.$refs.file.files[0] // 获取文件的url const url = window.URL.createObjectURL(file) //fil原创 2022-02-24 16:40:12 · 432 阅读 · 0 评论 -
Vue---当我们传递给子组件的数据既要使用还要修改的时候可以使用v-model简写
模板中的 $event是事件参数当我们传递给子组件的数据既要使用还要修改时可以简写传递:props:isFollow="article.is_followed"修改:自定义事件@update-is_followed="article.is_followed = $event"简写方式:在组件上使用v-model="article.is_followed"相当于下面的代码value="article.is_followed"@input="article.is_foll.原创 2022-02-22 14:41:09 · 1267 阅读 · 0 评论 -
Vue---this.$nextTick()的理解和使用
1.Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。2.Vue官网nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 $nextTick，则可以在回调中获取更新后的 DOMnew Vue({ // ... methods: { // ... example: function () { // modify data this.message = '原创 2022-02-21 13:51:06 · 979 阅读 · 0 评论 -
Vue---把后端返回的img标签处理成可预览图片
后端返回的文本都是带html的标签，其中img图片点击时是不会有预览效果的</p>\n<p><img src=\"https://img2018.cnblogs.com/blog/1066844/201810/1066844-20181016104201116-766887489.png\" alt=\"\"/></p>\n<p>源码如下：</p>\n<div class=\"cnblogs_code\"><im原创 2022-02-20 15:06:17 · 2259 阅读 · 1 评论 -
Vue--开启路由传参把路由参数映射到组件中
1.路由中const routes = [ { path: '/article/:articleID', name: 'article', component: () => import ('../views/article'), props: true //开启props传参，把路由参数映射到组件的props数据中 }]2.在组件中<template></原创 2022-02-19 21:42:37 · 401 阅读 · 0 评论 -
Vue---在vue路由中配置组件的两种方式
1.引入组件后直接在路由中配置（不推荐，组件属于静态引入，无论组件是否使用，组件都已经加载了，加重渲染性能）import login from '../views/login'const routes = [ { path: '/login', name: 'login', component: login ]2.路由赖加载的方式（推荐，组件属于动态引入，组件需要时再加载组件）const routes = [ {原创 2022-02-19 15:47:54 · 781 阅读 · 0 评论 -
Vue---在vue路径中@的使用
1.@表示项目文件夹src目录'src/index.vue' 等价于 '@/index.vue'2.如果在css代码中则需要在前面加~在css代码中@import 'src/index.css'; 等价于 @import '~@/index.css';原创 2022-02-19 15:29:06 · 2439 阅读 · 0 评论 -
Vue---在vue中路由传递动态参数的使用
一.模板组件中1.通过es6字符串拼接的方式拼接动态参数article.art_id <van-cell class="article-item" :to="`/article/${article.art_id}`"> </van-cell>2.通过对象属性 <van-cell class="article-item" :to="{ //根据路由名称进行跳转 name: 'article', //传递原创 2022-02-19 15:19:49 · 644 阅读 · 0 评论 -
Vue---实现搜索功能的搜索关键词高亮显示
1.模板代码： <div v-html="hightligth(text)"></div>text为自己的文本搜索结果，比如黄某某例子：现在我的搜索关键词为黄，那么搜索结果就是黄某某2.hightligth事件函数处理（this.searchText为关键词，在本例中就是黄） hightligth(text) { const hightligthStr = `<span style="color: red">${原创 2022-02-18 19:25:18 · 1244 阅读 · 0 评论 -
Vue---常用的第三方插件
1.富文本编辑器vue-quill-editor地址：https://github.com/surmon-china/vue-quill-editor#readme// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'.原创 2022-02-15 20:26:09 · 1740 阅读 · 0 评论 -
Vue---Vue中的scope详解以及使用/ddep/解决组件样式不起作用
一.scope 在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加<style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。①我们在组件加了 scoped 之后，组件的根元素的样式会自动添加一个hash值。例子：比如我现在新建了一个名字为homeIndex的vue组件，该组件的根元素为类名为home-container的div<template> <div cla..原创 2022-02-13 14:00:05 · 5932 阅读 · 0 评论 -
Vue---在vue中使用axios的两种方式
1.原型挂载的方式(简单方便，但是不利于接口维护)我们可以把axios请求对象挂载到vue.prototype 原型对象中，然后在组件中通过this.xxx直接访问在main.js中import axios from 'axios'//安装好axios后导入Vue.prototype.$axios = axios//将导入的axios挂载到Vue的原型对象上在组件中使用this.$axios.get('请求路径')2.模块化的方式(推荐)我们把每一个请求都封装成原创 2022-02-10 20:13:21 · 1545 阅读 · 0 评论 -
Vue---Vue工具Devtools的安装与使用
1.在谷歌浏览器打开设置2.点击扩展程序并选择开发者模式3.直接将crx文件（文件在我主页的资源里面）拖到拓展程序页面就行了原创 2022-02-08 13:00:20 · 427 阅读 · 0 评论 -
Vue---过滤器的使用
一、过滤器的作用是什么1.格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等二 .过滤器的使用1.在Vue中过滤器和data、methods、computed是一个级别的，所以它的位置也和它们一样：<script>export default { name: "app", // 数据 data() { return {}; }, //方法 method:{}, //计算属性 ..原创 2022-02-03 19:56:57 · 966 阅读 · 0 评论 -
Vue---侦听器（watch）的使用
一.侦听器的使用1.在Vue中侦听器和data、methods、computed是一个级别的，所以它的位置也和它们一样：<script>export default { name: "app", // 数据 data() { return {}; }, //方法 method:{}, //计算属性 computed:{}, //侦听器 watch:{}};</script>.原创 2022-02-03 14:21:03 · 3139 阅读 · 0 评论 -
Vue---Vue中的compute计算属性里的方法与method里普通方法的区别
一.计算属性的用法1.在Vue中计算属性和data、methods、watch是一个级别的，所以它的位置也和它们一样：<script>export default { name: "app", // 数据 data() { return {}; }, //方法 method:{}, //计算属性 computed:{}, //监听器 watch:{}};</script>原创 2022-02-01 16:25:33 · 1437 阅读 · 0 评论 -
Vue---时间过滤器，时间格式为 年份-月份-日子 小时:分钟:分秒
一.时间过滤器的定义Vue.filter('dataFormat', function(originVal) { //originVal为毫秒数 const dt = new Date(originVal) //获取年份 const y = dt.getFullYear() //获取月份 const m = (dt.getMonth() + 1 + '').padStart(2, '0') //获取日子 const d = (dt.ge原创 2022-01-27 16:19:24 · 833 阅读 · 0 评论 -
Vue导航路由守卫的使用
通过获取本地sessionStorage判断用户是否有权限进入除登录以外的页面router.beforeEach((to, from, next) => {if (to.path === '/login') return next();const token_str = window.sessionStorage.getItem('token');if (!token_str) return next('/login');next();})...原创 2022-01-12 12:50:53 · 222 阅读 · 0 评论 -
Vue中配置axios请求的根路径并配置请求的请求头
import axios from 'axios'// 配置请求的根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' // 为每次请求添加请求拦截器,为请求头添加authorization属性axios.interceptors.request.use((config) => { // console.log(config); config.headers.Authorizat...原创 2022-01-12 13:34:53 · 968 阅读 · 0 评论