vue2
文章平均质量分 75
nunumaymax
铁杵磨成针
展开
-
Vuex的使用
Vuex是 Vue 的共享状态管理,小型项目使用 store模式 即可,中大型项目需要使用 VueX。mapState, mapGetters :写在computed中;mapMutations, mapActions :写在methods中。state: 变量;getters: state的计算属性;mutations: 同步;actions: 异步。state: 如果在模块中定义,则为局部的state;getters: 如果在模块中定义,则为局部的getters;原创 2023-06-09 18:04:03 · 6050 阅读 · 0 评论 -
vue的路由-vue router(二)
全局守卫:beforeEach: 全局前置守卫;: 路由解析之前;afterEach: 全局后置守卫;单个路由独享守卫::路由进入之前;组件级守卫::路由进入之前;:路由更新之前;:路由离开之前。原创 2023-04-07 17:38:52 · 482 阅读 · 0 评论 -
vue的路由-vue router(一)
用 Vue + Vue Router 创建单页应用非常简单:通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。原创 2023-03-24 16:50:39 · 502 阅读 · 0 评论 -
vue自定义指令 - v-load
懒加载是一种网页性能优化的方式,它能极大的提升用户体验。图片一直是影响网页性能的主要元凶,现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源,那么可能等图片加载出来用户也早就走了。所以进入页面的时候,只请求可视区域的图片资源。减少资源的加载,页面启动只加载首屏的图片,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。原创 2023-01-12 17:53:20 · 382 阅读 · 0 评论 -
vue watch 监听不到数据变化
对父组件传进来的数组进行监听,发现数组的数值改变了,但是watch却没有监听到原创 2022-11-21 11:59:45 · 3133 阅读 · 0 评论 -
vue的自定义过滤器 - Filter
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。双花括号插值和v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号(|)指示。即过滤器是用来格式化数据的一个函数。过滤器不会修改原始数据,它的作用是过滤数据,就是对数据进行加工处理并返回处理后的数据,比如做一些数据格式上的修改,状态转换等。局部过滤器:组件内有效;全局过滤器:所有组件共享。局部过滤器就是在一个组件的选项中定义本地的过滤器,只有该组件可以用。原创 2022-09-09 18:30:21 · 3362 阅读 · 0 评论 -
开发vue插件
vue 项目开发过程中,经常用到插件,比如原生插件 vue-router、vuex,还有 element-ui 提供的 notify、message 等等。这些插件让我们的开发变得更简单高效。那么 vue 插件是怎么开发的呢?vue 插件的本质;Vue.extend() 全局方法;如何手动挂载 Vue 实例;Vue.use() 的原理;如何打包成 umd 格式;什么是 Vue插件?它和 Vue组件 有什么区别?“插件通常用来为 Vue 添加全局功能。”“组件。转载 2022-09-08 12:41:00 · 3400 阅读 · 0 评论 -
vue的函数式组件
我们可以把函数式组件想象成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTMLStateless(无状态):组件自身是没有状态的;Instanceless(无实例):组件自身没有实例,也就没有this。由于函数式徐建拥有拥有这两个特性,我们就可以把它用作高阶组件(High order components),所谓高阶,就是可以生成其他组件的组件。函数式组件没有实例,事件只能由父组件传递。.........原创 2022-08-30 17:11:17 · 2719 阅读 · 0 评论 -
vue的渲染函数 - render
简单的说,在vue中我们使用模板HTML语法来组建页面的,使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。 ............原创 2022-08-24 12:04:33 · 3994 阅读 · 0 评论 -
vue-danmak 弹幕交互组件
是一个基于 vue 的弹幕交互组件,易上手,还可自定义修改弹幕的样式,因此推荐在vue中实现弹幕效果时使用。更多内容请参考:vue-danmaku官方文档。原创 2022-08-02 22:56:26 · 3585 阅读 · 1 评论 -
vue自定义指令 - v-real-img
注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片;在网络慢的时候,加载图片多的时候,可以达到占位图的效果;--转载 2022-08-02 11:39:07 · 397 阅读 · 0 评论 -
vue项目- img的src动态赋值
在做vue项目的时候,遇到了对img的src动态赋值,检查过图片路径没有错误,但是却加载不出来的问题。在网上查了下发现,原因是。,需要在路径前面添加。原创 2022-07-15 20:11:45 · 3874 阅读 · 0 评论 -
vue的自定义指令 - Directive
vue除了提供了默认内置的指令外 (例如:v-model 和 v-show),还允许开发人员根据实际情况自定义指令,它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作的时候。Vue自定义指令和组件一样存在着 全局注册 和 局部注册 两种方式。注册全局指令的方式,是通过 Vue.directive( id, [definition] ) 方法:2. 局部注册通过在vue实例中添加 directives 对象数据,可以注册局部自定义指令。我们还是以全局注册的案例为例,通过注册一个 v-foc原创 2022-07-08 11:23:33 · 2961 阅读 · 0 评论 -
vue的混入 - Mixins
混入 (mixins):是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。在src目录下创建一个 mixins 文件夹,文件夹下新建一个 hello.js 文件,作为之后的 混入对象 。前面我们说了 mixins 是一个 js对象 ,所以应该以对象的形式来定义 hello.js 。在对象原创 2022-07-07 14:52:16 · 590 阅读 · 0 评论 -
vue中引入echarts
vue中引入echarts并使用准备工作全局引用局部引用准备工作安装echarts npm install echarts -S全局引用首先在main.js中引入echarts,将其绑定到vue原型上:转载 2021-12-14 20:55:25 · 14211 阅读 · 0 评论 -
解决Vue数据更新但视图不更新的问题
vue中改变数据视图不更新在开发中我们处理数据时会遇到数据更新了,但视图并没有更新,这种情况往往是数据嵌套层数过多导致的问题,下面给大家提供一种解决办法。data () { return { obj: { item1: { arr:['苹果', '香蕉', '梨子', '猕猴桃'] }, item2: { arr:['火龙果', '水蜜桃', '百香果', '脆枣'] },转载 2021-12-23 23:07:15 · 2834 阅读 · 0 评论 -
Vue中导入文件import和导出文件export的用法
Vue中导入文件import的用法前言一、语法二、使用场景1.在某个.vue文件,或js文件(例如index.js或者router.js)中引入vue组件2.在某个.vue文件中引入css3.引入工具类3.1 引入单个方法3.2 引入成组的方法总结前言html文件中,通过script标签引入js文件;vue中通过import xxx from xxx的方式导入文件,不光可以导入js文件,还可以css文件等多种类型的文件。一、语法import xxx from xxxfrom前的:“xxx”原创 2022-02-22 15:10:46 · 10528 阅读 · 3 评论 -
Vue中引用路径的配置
VUE中引用路径的配置引用components目录下的子组件举例解决方法引用assets目录下的文件举例解决方法在vue项目开发中经常引用JS、CSS、IMG文件,当项目较大时文件层级很多,导致路径很长,我们可以通过在bulid > webpack.base.conf.js 设置简便的引用路径。引用components目录下的子组件举例在父组件中引入子组件:import HelloWorldSon from '../components/HelloWorldSon'import Hello原创 2022-02-22 11:34:10 · 3083 阅读 · 0 评论 -
vue事件总线 - EventBus
在vue组件中,常见的有父子组件通信,兄弟组件通信等,但是如果两个页面没有任何引入和被引入关系,除了使用 vuex 来处理组件之间的数据通信,还可以考虑vue中的 事件总线(EventBus) 来通信。在vue中可以使用 EventBus 来作为 沟通桥梁 的概念,就像是所有组件共用相同的事件中心,可以向该中心注册 发送事件 或 接收事件,所以组件都可以上下 平行地 通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”。因此,我们通常情况下,还是会使用更完善的 vuex 作为状态管理中心,原创 2022-07-05 21:00:25 · 397 阅读 · 1 评论 -
vue的依赖注入 - Provide/Inject
关于Vue组件的通讯方式如下:vue官网建议,在正常情况下,上述方式已经能满足绝大多数甚至所有的业务需求,对于应用程序代码应优先使用它们处理。然而,还有一种主要为 高阶插件/组件库 提供的用例办法,即 provide / inject (这对选项需要一起使用)。通常情况下,父组件向孙组件传递数据,可以采用父子 props 层层传递,也可以使用 bus 和 vuex 直接交互。但其实,我么还可以使用 provide / inject 选项。这对选项允许 一个祖先组件向其所有子孙后代组件注入一个依赖,不论组件层转载 2022-07-05 17:47:41 · 869 阅读 · 0 评论 -
vue2.x的一些知识点总结
使用true-value和false-value,可以将布尔值进行隐性的转换。2. v-model的原理可以解析为:二、组件传值1. 绑定事件的命名必须大写错误写法:my-event(这样写会导致该方法无效)正确写法:myEvent2. .sync修饰符可以变更从父组件传到子组件的值,对prop进行 双向绑定:父组件:子组件:此时,msg在父组件和子组件中的值都变更为 new message。通常用于tab切换:总结对vue2.x一些项目中遇到的知识点进行总结。........原创 2022-07-05 12:00:28 · 250 阅读 · 0 评论 -
vue插槽 - slot
Slot 通俗的理解就是 “占坑” ,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑,替换组件模板中slot位置,并且可以作为承载分发内容的出口。定义两个组件 :index.vue 和 navLink.vue然后在index.vue组件中引用navLink.vue组件。index.vuenavLink.vue如下图所示:当组件渲染的时候,slot标签的位置会被替换为 链接。插槽内可以是普通文本,html标签,组件。插槽可以获取到index.vue组件里的内容:如果原创 2022-07-05 11:03:44 · 4240 阅读 · 0 评论