vue.js
文章平均质量分 61
vue.js知识模块。
页神建辑-思而后学
总是让我做自我简介,真不知道介绍什么好了~~~~~
展开
-
vue2计算属性内的get/set解析
在计算属性内,get/set字面意思是获取和设置操作,计算属性值根据依赖变量的值在get内return,set则是值改变时需要执行的区域。常规的computed写法,如果b变量在某个地方被更改的话,会报错。原创 2023-04-13 15:10:42 · 1172 阅读 · 1 评论 -
vue-mixins混入模式的理解与使用
vue的minxins混入特性了解与记录。原创 2022-09-25 22:51:37 · 494 阅读 · 1 评论 -
vue-computed计算属性
vue-computed计算属性计算属性官方文档场景解释:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example">{{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难原创 2021-01-06 21:26:10 · 176 阅读 · 0 评论 -
vue-进入/离开&列表过度
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡。·条件渲染(使用v-if)·条件展示(使用v-show)·动态组件·组件根节点☆一个基础例子:<button v-on:click="show=!show">toggle</button> <transition name="fade"> <p v-if="show" style="width:100px;height:40px;原创 2021-01-04 22:32:27 · 190 阅读 · 0 评论 -
vue $refs操作Dom
vue $refs操作DomVue本身不提倡支持js获取与操作dom,但有时不得不这么做,因此refs便为此而准备,但它仅仅是一个直接操作子组件的应急方案—避免在模板或计算属性中使用refs便为此而准备,但它仅仅是一个直接操作子组件的应急方案—避免在模板或计算属性中使用refs便为此而准备,但它仅仅是一个直接操作子组件的应急方案—避免在模板或计算属性中使用refs。<div ref="demo" class="container">Lorem ipsum dolor sit amet con原创 2021-01-04 21:32:07 · 1098 阅读 · 0 评论 -
vue内slot插槽学习以及$slots集使用
vue内自定义组件时不可避免碰见slot,会使用slot 知道slot是组件插槽,可以用来根据名称在组件的指定dom节点插入指定内容,使用很方便。默认插槽<test-btn> <span>it</span></test-btn>test-btn组件内:<template> <div> <span>learn</span> <slot><原创 2020-12-08 23:51:35 · 16106 阅读 · 4 评论 -
vue router-view解析
在vue项目中,我们经常会见到router-view标签,在实际渲染后的页面里并不存在router-view,是一个有路由占位符功能的存在,可以在指定位置渲染出指定的组件。<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div></template>按照官方文档的说法,组件是一个functional组件,渲染原创 2020-12-08 22:02:01 · 598 阅读 · 0 评论 -
vue-vuex状态管理使用详解
vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。什么情况下我应该使用 VuexVuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是,如原创 2020-11-29 12:14:54 · 196 阅读 · 0 评论 -
vue-provide/inject用法
#provide/inject2.2.0新增类型:provide:Object | () => Objectinject:Array | { [key: string]: string | Symbol | Object }注:provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。如果你熟悉 React,这与 Reac原创 2020-11-26 22:06:13 · 219 阅读 · 0 评论 -
vue-$bus使用解析
$busvue中解决父子组件间通信及事件相关的事务可以使用props&$ emit,那么解决跨级、兄弟、无相关关系组件间通信问题如何解决呢?方法有很多,这里讲解其中一种-$bus。$bus作为vue中的一个中央事件总线bus,可以作为一个简单的组件传递数据。vue-bus使用安装npm install vue-bus引入main.js中引入import Vue from "vue";import VueBus from "vue-bus";Vue.use(VueBus);原创 2020-11-17 22:36:33 · 2584 阅读 · 0 评论 -
vue-$nextTick使用详解
$nextTick概念:https://segmentfault.com/a/1190000012861862https://www.jianshu.com/p/a7550c0e164f转载 2020-11-11 23:06:43 · 1191 阅读 · 0 评论 -
vue内父子组件通信、事件传递及多层嵌套组件如何传递事件
父子组件通信父组件向子组件传值 - props组件A<template> <div> <b :option="option"></b> <div></template><script>import B from "b";export default { components:{ B }, data(){ return { option:[] } }}</script&原创 2020-11-03 22:33:46 · 6639 阅读 · 0 评论 -
vue-watch监听功能(侦听器)详解&使用
Vue内watch侦听器详解watch是vue内部提供的一个用于侦听功能的更通用的方法,其用来响应数据的变化,通过特定的数据变化驱动一些操作。vue官方文档解释当需要在数据变化时执行异步或开销较大的操作时,这个方式最有用。<template> <div></div></template><script> export default { data(){ variable:null, }, watch:{ //原创 2020-11-04 23:10:26 · 87513 阅读 · 0 评论