![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
一只金牛座的崽
这个作者很懒,什么都没留下…
展开
-
vue中通过注册方法动态调用组件
文件结构├── src│ ├── components│ │ ├── dynamicCreation│ │ │ ├── index.js│ │ │ ├── index.vue│ └── main.jsindex.jsimport PerfectInformation from "./index.vue";import Vue from "vue";const InformationConstructor = Vue.extend(Perfect原创 2022-02-11 17:49:09 · 585 阅读 · 0 评论 -
vue中缓存页面 keepAlive使用
vue中缓存页面 keepAlive使用原创 2022-06-21 19:37:11 · 257 阅读 · 1 评论 -
vue和nuxt.js设置多个layout(页面公共内容布局)
vue和nuxt.js设置多个layout(页面公共内容布局)原创 2022-06-21 19:22:22 · 2152 阅读 · 2 评论 -
曝光埋点IntersectionObserver
曝光埋点IntersectionObserver封装成一个指令import Vue from "vue";Vue.directive("exposure", { // 指令的定义 inserted: function (el, binding) { const ioCourse = new IntersectionObserver( (entries) => { entries.forEach((i) => { //conso原创 2022-03-23 14:54:14 · 373 阅读 · 0 评论 -
Vue之filter过滤器
全局定义在main.js中Vue.filter("myfilter", function (value) { return value + 10; // 返回处理后的值});组件中使用 <div>{{ num | myfilter }}</div>在方法中使用var myFilter = Vue.filter("myfilter");myFilter(7)组件中定义组件中定义 filters: { handleNum(val) {原创 2022-03-01 16:40:58 · 415 阅读 · 0 评论 -
Vue之定义props
props props: { num: { type: [Number, String], //支持多种类型 default: 0, //默认值 }, arr: { type: Array, default: function () { return []; }, required: true, //是否必须 }, },原创 2022-03-01 15:45:31 · 923 阅读 · 0 评论 -
二维码qrcode插件
文章目录一、canvas绘制二、图片格式三、svg格式npm install --save qrcode一、canvas绘制import QRCode from "qrcode";//选择二维码添加的元素const child = this.$el.querySelector(".child");QRCode.toCanvas(value, options, (error, canvas) => { if (error) { throw error; } chil原创 2021-10-11 14:09:53 · 1188 阅读 · 0 评论 -
vue 组件通信
文章目录一、props(父传子)二、emit(子传父)三、$children(父传子)四、$parent(子传父)五、ref(父传子)六、provide(父传孙)七、$attrs(父传子/父传孙)父传子父传孙八、$listeners(孙传父)九、eventBus(兄弟组件)十、vuex一、props(父传子)父组件<button @click="props">props</button><child1 class="child" :action="action"&g原创 2021-10-11 14:08:37 · 162 阅读 · 0 评论 -
Vue之computed
$computed计算属性传参将计算属性的返回值改为函数,再进行传值操作 <h3 :zzc="test(1)"></h3> export default { computed: { test () { return function (value) { const state = { 1: 'zz', 2: 'cc'原创 2020-12-21 16:39:26 · 96 阅读 · 0 评论 -
vue之路由应用场景
router路由配置 { path: "/me", name: "Me", component: Me }, { path: "/you/:location/:id?", name: "You", component: You },当前页面跳转this.$router.push({ name: "You", params: { location: "offline" } }); //name不可以区分大小写this.$router.p原创 2020-08-31 17:00:55 · 619 阅读 · 0 评论 -
Vue之nextTick应用场景
$nextTick this.$nextTick(() => { 处理数据 })Vue中DOM更新是异步的。在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM原创 2020-08-28 18:35:22 · 352 阅读 · 0 评论 -
vue+element实现分页功能
1原创 2019-12-11 19:22:32 · 915 阅读 · 0 评论 -
vue生命周期各阶段详情分析(子父组件执行顺序)
vue生命周期beforeCreate 实例初始化 this指向实例 不能访问 data computed watch methods上的方法和数据created 实例创建完成可以访问 data computed watch methods的方法和数据 未挂载到DOM,不能访问到el属性和el属性和el属性和ref属性内容为空数组beforeMount 在挂载开始之前被调用,会找...原创 2020-04-25 19:26:37 · 394 阅读 · 0 评论 -
Vue之watch监听
watch1.监听属性方法 data(){ return{ datas:{ name:'www', age:12 } } }, computed: { getName: function() { return this.datas.name } }, watch:{ datas:{ handler:function(){ console.log('对象内原创 2020-08-28 18:20:09 · 124 阅读 · 0 评论