Vue
关注
分享
扫一扫
vue使用
前端-小鑫
这个作者很懒，什么都没留下…
展开
-
vue 动画
三种使用方式：1.Name使用方式 fade为name自定义名称.fade-enter-active 进入时 .fade-leave-active 离开时 .fade-enter 进入过渡 .fade-leave-to 离开过渡<template> <div id="tran"> <input type="button" value="动画" @click="change()" /> <transition n.原创 2021-07-30 15:57:41 · 114 阅读 · 0 评论 -
vue-uses的使用和详解
添加插件全局功能添加全局方法或者 属性 添加全局资源：指令/过滤器/过渡等 通过全局混入来添加一些组件选项 添加 Vue 实例方法，通过把它们添加到Vue.prototype上实现 一个库，提供自己的 API，同时提供上面提到的一个或多个功能添加全局方法let myPlugin = {};myPlugin.install = function (Vue, options) { Vue.myPluginMethods = function () { conso..原创 2021-07-26 17:10:03 · 255 阅读 · 0 评论 -
vue中is的作用和用法
动态切换不同组件<html lang="en"><body> <div id="app"> <!-- <custom-part1 v-show="isShow"></custom-part1> <custom-part2 v-show="!isShow"></custom-part2> --> <component :is="isShow"&g原创 2021-07-26 17:06:24 · 468 阅读 · 0 评论 -
vue中keep-alive的使用及详解
使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们场景：按钮控制组件是否显示，显示的组件内部进行样式更改（例如点击按钮改变颜色），当子组件显示时，按钮控制改变颜色后，父组件控制子组件显示隐藏，每次切换子组件（销毁，创建）样式无法进行保存，加上keep-alive后，子组件样式更改，切换显示隐藏后样式依旧存在<!--父组件 --><template> <div id="example"> <!-- <BB v-原创 2021-07-26 17:05:05 · 670 阅读 · 0 评论 -
VUE 生命周期
VUE 生命周期beforeCreate 实例创建前状态 created 实例创建完成状态 beforeMount 挂载之前的状态 mounted 已经挂载的状态 beforeUpdate 数据更新前 updated 数据更新后 componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 activated 进入当前与activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等（注：仅仅用于keep-alive） de原创 2021-07-26 17:03:59 · 156 阅读 · 0 评论 -
vue-router 基本使用
下载npm install vue-router创建路由：引用组件方式：常规引用 import 名称 from "地址" 无懒加载 vue 路由异步加载 resolve => (require(["地址"], resolve)) es 异步加载 () => import("地址")子组件：children例子：新建router文件夹以及对应新建indx.js文件import Vue from 'vue'import Router from 'vue-r.原创 2021-07-26 15:48:11 · 337 阅读 · 0 评论 -
vue中使用vuex(超详细)
vuex中，有默认的五种基本的对象个人理解：state : (初始化数据) getter (输出给外界数据) mutation (定义的方法，必须同步) action (输出给外界方法，可异步) module（每一个js 文件都可以包含state getter mutation action四项，统一进行管理）下载 npm install vuex --save 以下使用仅是初步使用，如需封装可自行再次封装使用方式1.新建一个store.js文件import Vue from '原创 2021-07-26 13:06:59 · 6413 阅读 · 0 评论 -
Vue中的watch与computed
计算属性computed :支持缓存，只有依赖数据发生改变，才会重新进行计算 不支持异步， 如果computed属性属性值是函数，那么默认会走get方法，有get 和set 不能再data中定义属性watch：不支持缓存，数据变 支持异步 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值； 属性变化，执行多个操作 可以再data中定义watch与computed使用场景watch事件交互 computed数据计算和字符处理computed使用...原创 2021-07-23 17:20:39 · 253 阅读 · 0 评论 -
vue卡槽
插槽大体分为：默认插槽 具名插槽 作用域插槽默认插槽显示父组件传递的标签或值，子组件必须使用slot。否则无效 父组件标签中有内容或标签，则子组件(solt 显示父组件的内容)，反之父组件标签中无内容或标签，显示子组件slot中的标签或内容（概括：父组件内有值,一律用父组件的值,父组件未有之则使用子组件的值 ）父组件<template> <div> 我是父组件 <Index2><div>值</div><原创 2021-07-23 16:20:55 · 598 阅读 · 0 评论 -
vue组件通信
Props ：父组件传递值给子组件，子组件接收值，传递undefined/null无效$refs：父组件调用子组件方法子组件调用父组件方法：$parent / $children：访问父 / 子实例 this.$emit('方法'，‘参数’) this.方法 需要确保父组件有此方法，可以进行判断隔代组件通信$attrs/$listeners provide / inject适用于 父子、隔代、兄弟组件通信 EventBus （$emit / $on）都适用Vuex事件派发V原创 2021-07-22 17:37:55 · 205 阅读 · 1 评论 -
Vue 指令
自带常用指令 v-text 相当于 innerText v-html 相当于innerHTML v-show 显示隐藏 隐藏相当于css display：none 有节点 v-if 显示隐藏 无节点 v-if v-else-if v-else 相当于 if else v-for 循环遍历数组 v-bind绑定属性 简写 :xx(属性值) v-on 绑定方法 v-on:方法 简写@ <template> &l原创 2021-07-22 15:34:12 · 143 阅读 · 0 评论 -
vue页面数据变化不渲染页面
vue数据渲染条件：响应式的属性必须先定义缺点：增加不存在的属性,不能更新视图 多层数据默认会递归创建 性能不好 数组中是对象响应，常量不会渲染 修改数组数组和长度不会重新渲染 如果新增的数据vue 也会监控但是必须是对象数据改变页面不渲染问题解决方案this.$set(object,key,value) || Vue.set(vm.object, key, value) this.$forceUpdate() Object.assign（） Array数据更改，页面不渲染问题原创 2021-07-21 16:55:52 · 1129 阅读 · 0 评论 -
vue 过滤器
直接过滤方式<body> <div id="app" v-text=text.toUpperCase()></div></body><script> let dom = new Vue({ el: '#app', data: { text: 'abc' }, })</script></html>函数方法过滤<原创 2021-07-21 16:47:28 · 174 阅读 · 0 评论 -
vue事件修饰器
stop等同于JavaScript中的event.stopPropagation()，防止事件冒泡(由内向外) 例子：未添加stop情况下 点击3 执行结果：会弹出三次alert 分别是是3 2 1，添加stop后执行 3 后面21将停止， 点击2会正常执行21<template> <div> <div @click="a">1 <div @click="b">2 <div @cl...原创 2021-07-21 16:36:16 · 518 阅读 · 1 评论 -
不使用vue-cli 创建组件
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言 一、 二、使用步骤 1.引入库 2.读入数据 总结前言vue组件的使用提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as np import pandas as pd import原创 2021-07-21 16:01:26 · 280 阅读 · 0 评论