Vue
guokanglun
这个作者很懒,什么都没留下…
展开
-
vue图书馆demo
<style type="text/css" lang='less' scoped> .grid { margin: auto; width: 530px; text-align: center; table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; th,td {padding: 10px; border: 1px dashed #F3D.原创 2022-01-20 16:34:24 · 316 阅读 · 0 评论 -
vue 任意组件消息传递
一个组件传递消息给另一个组件(任意组件传递)全局配置/** 添加事件总线$bus,用以组件之间通信 */Vue.prototype.$bus = new Vue()组件一:async onOK(){ this.$bus.$emit('updateSjzbTree')}组件二:created(){ this.init() this.$bus.$on('updateSjzbTree', this.init)},使用场景:一个页面数据变动,需要另一个页面也相应原创 2021-07-20 15:58:30 · 244 阅读 · 0 评论 -
vue实现滚动下拉加载更多功能
<template> <div> <ul class="box"> <li v-for="item in dataList"> {{item}} </li> </ul> <!--<p style="height: 100px;" v-if="flag"> 加载中... </p>--> </div></temp原创 2021-04-09 11:33:22 · 2005 阅读 · 0 评论 -
vue mixin
1. mixin 概念混入提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项被混合进入该组件本身的选项2. 基本使用新建mixin/index.js 文件export const myMixin = { mounted () { console.log('hello mixin') }};组件里调用(例如App.vue)<script> import {myMi原创 2021-04-08 15:44:57 · 128 阅读 · 0 评论 -
vue + ueditor
关于在vue-cli3 里使用UEditor的一次简单记录1. 准备工作步骤1:下载UEditor文件夹: https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads选择其中一个即可(我选择的是utf8-php.zip)步骤2:将下载后的文件夹重命名为UEditor,放置在public文件夹下步骤3:安装 vue-editor-wrapnpm i vue-ueditor-wrap --save原创 2021-04-08 11:41:14 · 209 阅读 · 0 评论 -
vue-cli3 使用mint-ui 按需打包
文章目录1. 模块安装2. 修改配置babel.config.js3. 使用1. 模块安装npm i mint-ui -Snpm install babel-plugin-component -D2. 修改配置babel.config.jsmodule.exports = { presets: ["@vue/app"], plugins:[ [ "component", { "libraryName": "mint-ui",原创 2021-02-15 01:01:36 · 342 阅读 · 0 评论 -
vue-cli3 引入bootstrap
安装包npm install bootstrap jquery popper.js --savemian.js 导入import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'原创 2021-02-11 16:43:27 · 174 阅读 · 0 评论 -
vue 组件通信补充
文章目录1. 子组件访问父组件1. 子组件访问父组件父组件<template> <div> <Layout></Layout> </div></template><script> import Layout from "./components/layout/Layout"; export default { data(){原创 2021-02-09 14:32:02 · 104 阅读 · 0 评论 -
vue 2.6.0+ 插槽
文章目录1. 具名插槽插槽: 父组件向子组件传递数据包括标签数据1. 具名插槽多个插槽,不同插槽对应不同内容子组件(layout)<template> <div> <header> <slot name="header"></slot> </header> <main> <slot name="main"原创 2021-02-09 13:50:54 · 149 阅读 · 0 评论 -
vue动态组件
<template> <div> <div class="btn"> <div class="item" :class="{active: currentTab === 'news'}" @click="currentTab = 'news'">news</div> <div class="item" :class="{active: currentTab === 'h.原创 2021-02-09 11:15:35 · 100 阅读 · 0 评论 -
vue + loadsh + axios + watch
<template> <div id="app"> <p> 输入问题(以问号结尾): <input v-model="question"> </p> <p>{{ answer }}</p> </div></template><script> import _ from 'lodash';原创 2021-02-08 16:28:20 · 158 阅读 · 0 评论 -
vue 树状表格
文章目录1. 初始化配置2. 使用3. 效果1. 初始化配置安装模块:npm i vue-table-with-tree-grid -Smain.js 文件import ZkTable from 'vue-table-with-tree-grid'Vue.component(ZkTable.name, ZkTable);2. 使用<template lang="html"> <div id="example"> <zk-table原创 2020-12-18 12:53:42 · 2180 阅读 · 3 评论 -
路由守卫
路由文件设置// 路由导航守卫/* to: 到某个地址 from: 从哪个地址来 next: 是否放行 */router.beforeEach((to, from, next)=>{ // 访问登页直接放行,其他页面判断是否有登录凭证,如果没有直接跳转到登录页 if(to.path==='/login') return next(); const tokenStr = window.sessionStorage.getItem('token');原创 2020-12-15 13:01:12 · 203 阅读 · 0 评论 -
route router
文章目录1、$route对象2、$router对象1、$route对象$route对象表示当前的路由信息,包含当前的路径,参数,query对象等。1. $route.path 当前路由的路径2. $route.params 动态参数3. $route.query 查询字符串2、$router对象$router是router构造方法的实例。push1.字符串this.$router.push(’/home’)向 history 栈添加一个新原创 2020-12-14 16:15:21 · 106 阅读 · 0 评论 -
vue案例-购物车进阶版(组件化,vuex,mock数据)
文章目录1. 目录结构2. mock 数据3. vuex 状态管理4. 组件使用1. 目录结构2. mock 数据mock数据只能通过ajax请求获取,从而达到模拟后台接口的作用定义数据 data.json[ { "id": 1, "name": "TCL彩电", "price": 1000, "num": 1 }, { "id": 2, "name": "机顶盒", "price": 1000, "num": 1原创 2020-12-14 14:24:54 · 705 阅读 · 2 评论 -
vue案例--购物车(组件化,父子组件传值)
文章目录1. 父组件2. 子组件1. 父组件<template> <div id="app"> <div class="container"> <div class="cart"> <Header></Header> <!-- $event 接受子组件传过来的参数 --> <List :list="list" @del="del($event原创 2020-12-14 11:38:51 · 1006 阅读 · 0 评论 -
vue 动画
文章目录1. 过渡动画1. 过渡动画v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。v-leav原创 2020-12-11 23:10:50 · 100 阅读 · 0 评论 -
数据代理
文章目录1. 数据代理1. 数据代理通过一个对象代理另一个对象中的属性的操作(读 / 写 )vue 数据代理: 通过vm对象来代理data中所有属性的操作function MVVM(options) { // 将选项对象保存到vm this.$options = options; // 将data对象保存到vm和data变量中 var data = this._data = this.$options.data; //将vm保存在me变量中 var原创 2020-11-30 15:55:41 · 2228 阅读 · 0 评论 -
Vue-Router
vue用来实现SPA的插件使用vue-router 1. 创建路由器: router/index.js new VueRouter({ routes: [ { // 一般路由 path: '/about', component: about }, { // 自动跳转路由 path: '/', redirect: '原创 2020-11-28 16:09:13 · 119 阅读 · 0 评论 -
vue 组件通信
文章目录1. 基本原则2. props3. 自定义事件4. 订阅发布5. slot1. 基本原则数据在哪,更新数据的行为就应该定义在哪2. props父组件向子组件传递数据父组件<List :todos="todos" :deleteTodo="deleteTodo"/>子组件// 声明props,声明之后可以直接在子组件使用todos props:{ todos:{ type:Array, require原创 2020-11-27 21:30:01 · 139 阅读 · 0 评论 -
vue 指令
文章目录1. 常用内置指令2. 自定义指令1. 常用内置指令v:text : 显示文本,不解析标签v-html : 显示文本,解析标签v-if : 如果为 true, 当前标签才会输出到页面v-else: 如果为 false, 当前标签才会输出到页面v-show : 通过控制 display 样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强制绑定解析表达式,一般简写为:v-model : 双向数据绑定ref : 指定唯一原创 2020-11-26 16:59:31 · 179 阅读 · 0 评论 -
vue 过滤器
使用方式<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta原创 2020-11-26 16:08:47 · 117 阅读 · 0 评论 -
vue 处理表单数据
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-原创 2020-11-26 12:20:09 · 481 阅读 · 0 评论 -
vue 事件处理
文章目录1. 绑定监听2. 事件修饰符3. 按键修饰符1. 绑定监听@click=“fun”<button @click="test1"> test1 </button>methods:{ test1(){ alert('test1') }}@xxx=“fun(参数)”<button @click="test2('test2')"> test2 </button>test2(params){原创 2020-11-26 11:28:02 · 132 阅读 · 0 评论 -
vuex
文章目录1. state mutations2. gettersvuex: 状态管理模式, 非父子组件传值(大型项目)不同组件数据共享1. state mutations// store/index.js 文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ // 存储数据 state: { count: 0 },原创 2020-11-05 13:54:15 · 143 阅读 · 0 评论 -
vue 组件
文章目录1. 组件2. 全局组件3. 局部组件4. 模板标签 template1. 组件组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树2. 全局组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-10-25 16:58:07 · 107 阅读 · 0 评论 -
Vue Axios
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-18 02:36:37 · 280 阅读 · 0 评论 -
vue生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。1. 生命周期图示2. 代码演示<!DOCTYPE html><html lang="en"><head>...原创 2019-12-18 02:04:48 · 155 阅读 · 0 评论 -
vue3以上项目创建
1. 项目创建vue create smile32. 参数选择原创 2019-12-17 03:15:54 · 220 阅读 · 0 评论 -
vue 如何创建一个项目
1. node.js 安装,安装node的同时会安装npmnode.js官网windows安装软件 都是傻瓜式安装,不做具体描述2. 能查看到node 和 npm 版本信息,表示安装成功3. 淘宝npm镜像安装(cnpm)网址npm install -g cnpm --registry=https://registry.npm.taobao.org4. 安装webpacknpm ...原创 2019-12-15 00:04:09 · 131 阅读 · 0 评论 -
computed 计算属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-13 02:12:09 · 337 阅读 · 0 评论 -
watch深度监视
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-13 01:53:31 · 268 阅读 · 0 评论