![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue基础
文章平均质量分 69
九九nine9
这个作者很懒,什么都没留下…
展开
-
全局组件、全局指令、v-model是语法糖、vue2响应式的缺点
全局组件局部组件:在父组件中导入的这个MyCom组件,只能在当前组件中使用import MyCom from './MyCom'export default { components: { MyCom } }全局组件:在main.js中导入import MyCom from './Mycom'// Vue.component(组件名,组件)Vue.component('MyCom', MyCom)全局指令局部指令export default { directives:原创 2022-05-15 21:07:02 · 395 阅读 · 0 评论 -
一些零碎的知识点
(1)vue-router 3.x版本更新了一个特点,如果编程时导航跳到了相同的路径,会报一个错误:NavigitionDuplicated导航重复,vue-router限制我们不能两次跳转到同一路径,可以通过this.$router.push(patch).catch(e=>e)解决这个报错(2)element-ui 给提供的功能 this.$confirm$开头的方法就地位高一些,一般就是组件自带的$store , $refs , $router , $route , $nextTick原创 2022-05-15 19:45:47 · 430 阅读 · 0 评论 -
elementUI基本使用总结
常见的vue技术栈组件库● 移动端(Vant, Cube-UI, NutUI )● PC端 ( element-ui, Ant Design of Vue, iView)● 小程序: uniapp组件库的基本使用流程根据项目的实际情况,进行技术选型: 用什么技术栈,用什么组件库去对应的官方上查文档遇到困难时:a. 在官网上找 常见问题(一般在网页的最底部)b. 在社区/搜索引擎 找答案c. 去提issue ,面对面直接向组件的作者提问d. 改源码小结● vue技术栈有很原创 2022-05-14 20:55:02 · 2233 阅读 · 0 评论 -
Vuex-辅助函数map
Vuex-辅助函数mapState来使用公共数据当访问某个数据项嵌套太深了,用mapState把公共数据(vuex.store) 映射 到本组件内部的计算属性中mapState的使用步骤映射// 1. 导入辅助函数mapState,它是在vuex中定义的一个工具函数。// es6 按需导入 import { mapState } from 'vuex' import { mapState } from 'vuex'computed: { // 说明1: ...对象 是把对象展开,合并原创 2022-05-14 20:05:37 · 532 阅读 · 0 评论 -
Vuex基本介绍及语法总结
组件之间通信方案序号组件关系数据通信1父子关系子传父:props ; 父传子:$emit2非父子关系eventBus: $on + $emit3非父子关系vuexVuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件的状态,解决多组件数据通信。要点:vue官方搭配,专属使用 (类似于:vue-router),有专门的调试工具集中式管理数据状态方案 (操作更简洁)data() {原创 2022-05-12 21:10:16 · 603 阅读 · 1 评论 -
history和hash模式区别
路由模式设置修改路由在地址栏的模式router/index.js中:const router = new VueRouter({ routes, mode: "history" // 打包上线后需要后台支持})history和hash模式区别:它们都实现页面的跳转功能(跳转页面)它们的区别体现在3个方面:a.外观 : history模式的path路径不带#号,hash有#号b.原理 : hash模式使用onhashchange , history使用pushState , 导致原创 2022-05-12 20:17:12 · 327 阅读 · 0 评论 -
路由守卫之全局前置守卫与全局后置守卫
全局前置守卫pageA -----守卫----> pageB路由跳转之前, 会触发一个函数语法:router.beforeEach((to, from, next) => {})案例:在跳转路由前, 判断用户登陆了才能去<我的音乐>页面, 未登录弹窗提示回到发现音乐页面实现:● 在router/index.js 路由对象上使用固定方法beforeEach// 路由守卫// 每次页面跳转,都会执行这个回调router.beforeEach((to,原创 2022-05-12 19:41:51 · 642 阅读 · 0 评论 -
单页应用和多页应用、路由、 window.onhashchange、路由使用、vue-router、router-view、router-link、router-link-exact-active
单页应用和多页应用、路由、 window.onhashchange、路由使用、vue-router、router-view、router-link、router-link-exact-active、页面跳转传参、vue路由传参的方式、路由-重定向、路由404、编程式导航、this.$router.push('/路由路径')、路由嵌套 children......原创 2022-05-11 20:40:27 · 645 阅读 · 0 评论 -
同桌bug之this指向
错误示范:mounted() { window.onhashchange = function(){ console.log(window.location.hash) const { hash } = window.location if (hash === '#/index') { this.comName = 'MyIndex' } else if (hash === '#/movie') { this.comN原创 2022-05-11 15:36:58 · 101 阅读 · 0 评论 -
找到代码的两种方法
找到代码的两种方法(1)在elements中找(2)用vue调试工具原创 2022-05-11 10:48:57 · 1454 阅读 · 0 评论 -
生命周期函数父组件和子组件8个钩子函数执行顺序
生命周期函数父组件和子组件8个钩子函数执行顺序打开页面时如图所示,先执行父组件的beforeCreate ,created ,beforeMount ,再执行子组件的beforeCreate ,created ,beforeMount ,然后执行子组件的mounted ,最后执行父组件的mounted子组件里更新由父传子的数据时销毁子组件...原创 2022-05-10 11:46:32 · 80 阅读 · 0 评论 -
组件进阶-props校验、动态组件、组件进阶-keep-alive组件、指定缓存、默认插槽slot、具名插槽、作用域插槽、自定义指令
组件进阶-props校验props校验普通格式: props: [“propA”, “propB”]。没有类型检查高阶格式:props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true原创 2022-05-09 19:36:01 · 445 阅读 · 0 评论 -
vue组件生命周期、axios、$refs使用、nextTick
vue组件生命周期一个组件从 创建 到 销毁 的整个过程就是生命周期生命周期函数(钩子函数)vue 框架内置函数,随着组件的生命周期,自动按次序执行作用:特定的时间点,执行某些特定的操作场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据阶段!!!:● 初始化 → 创建组件 → beforeCreate 、created● 挂载 → 渲染显示组件 → beforeMount 、mouted● 更新 → 修改了变量 → 触发视图刷新 →原创 2022-05-08 19:30:32 · 622 阅读 · 1 评论 -
vue组件化开发、vue组件封装使用步骤、scoped实现组件的私有样式、vue组件通信、父传子、子传父
vue组件化开发组件是可复用的 Vue 实例, 封装标签, 样式和JS代码vue组件分类:页面组件页面下的功能组件组件化开发 :一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能● 封装的思想,把页面上 可重用的部分 封装为 组件,从而方便项目的 开发 和 维护一个页面, 可以拆分成一个个组件,一个组件就是一个整体, 每个组件可以有自己独立的 结构(template) 样式(style) 和 行为(script) (html, css和js)小结● 现代前端开发原创 2022-05-07 20:57:24 · 1026 阅读 · 3 评论 -
动态class、动态style、计算属性、过滤器filters、监听器watch、深度监听
动态class目标用v-bind给标签class设置动态的值语法● 格式1:<标签 :class="变量" />● 格式2:<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />○ 如果布尔值为true,就添加对应的类名说明:可以和静态class共存<style> #app{width:500px;margin:50px auto;border:3px solid red;} .box{原创 2022-05-07 20:11:48 · 1584 阅读 · 1 评论 -
哪些年同桌遇到的bug③
[Vue warn]: Error in v-on handler: “TypeError: “name” is read-only”methods: { del(idx) { this.list.splice(idx, 1) }, add() { const { good, list } = this // 1.判断 const { name, price } = good if (name == '') return原创 2022-05-05 20:46:38 · 295 阅读 · 0 评论 -
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API安装:vue-devtools学习和调试vue必备之利器 - 官方插件安装:打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作2.进入扩展程序菜单 => 把vue-dev-tool-5.3.crx文件拖入网页中进行添加安装3.安装完成后,固定显示插件Vue基本概念Vue是什么vue是一个渐进式的javascript框架库: 封装的属性或方法 (例axios.js, jquery.js), 框架: 拥有自己的规则和元素, 比库强大原创 2022-05-04 10:14:30 · 946 阅读 · 0 评论