Vue.js
关注
分享
扫一扫
文章平均质量分 56
夹心776655
这个作者很懒，什么都没留下…
展开
-
【Vue.js】之vuex
1.Vuex是什么?Vuex是专门为Vue.js应用程序设计的状态管理工具，它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。具体工作: vuex是一种状态管理机制，将全局组件的共享状态抽取出来为一个store,以一个单例模式存在，应用任何一个组件中都可以使用，vuex更改state的唯一途径是通过mutation, mutation需要commit触发，action实际触发是mutation, 其中mutation处理同步任务, action处理异步任务。2原创 2021-03-20 11:48:34 · 118 阅读 · 0 评论 -
【Vue.js】之Vue组件如何抽离公共逻辑
Mixin多个组件有相同的逻辑, 抽离出来mixin并不是完美的解决方案，会有一些问题Vue3提出的 Composition API 旨在解决这些问题mixinDemo.vue<template> <div> <p>{{name}} {{major}} {{city}}</p> <button @click="showName">显示姓名</button> </div&原创 2021-03-20 11:10:53 · 1290 阅读 · 0 评论 -
【Vue.js】之keep-alive
keep-alive缓存组件频繁切换，不需要重复渲染Vue常见性能优化activated函数：keep-alive组件激活时调用activated函数：keep-alive组件停用时调用包裹动态组件时, 会缓存不活动的组件实例, 主要用于保留组件状态或避免重新渲染例如有一个列表和一个详情, 那么用户就会经常执行打开详情 => 返回列表 => 打开详情…这样的话列表和详情都是频率很高的一个页面，就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染而不是重原创 2021-03-18 14:12:14 · 305 阅读 · 0 评论 -
【Vue.js】之动态组件与异步组件
1.动态组件:is = “component-name” 用法需要根据数据，动态渲染的场景。即组件类型不确定代码实例<template> <div> <p>vue高级特性</p> <hr> <!-- 动态组件 --> <component :is="NextTickName"></component> </div></tem原创 2021-03-18 13:27:03 · 288 阅读 · 0 评论 -
【Vue.js】之插槽slot
【Vue.js】之插槽slot插槽Slot是Vue提出来的一个概念，正如名字一样，插槽用于决定所携带的内容，插入到指定的某个位置，从而使模板分块，因而具有模块化的特质和更大的重用性。将元素作为承载分发内容的出口。可以理解为模板中的占位符，在实例化是用自定义标签替代基本使用作用域插槽具名插槽1.Index.vue<template> <div> <p>vue高级特性</p> <hr> <原创 2021-03-15 16:51:54 · 440 阅读 · 1 评论 -
【Vue.js】之$nextTick
$nextTickVue是异步渲染data改变之后, DOM不会立刻渲染$nextTick会在DOM渲染之后被触发, 以获取最新DOM节点异步渲染，待DOM渲染完成之后再回调页面渲染时将data的修改做整合, 多次data修改只会渲染一次<template> <div id="app"> <ul ref="ul1"> <li v-for="(item, index) in list" :key="index">原创 2021-03-15 14:17:41 · 143 阅读 · 0 评论 -
【Vue.js】之V-model双向绑定
1.自己实现一个v-modelIndex.vue<template> <div> <p>vue高级特性</p> <hr> <!-- 自定义 v-model --> <p>{{name}}</p> <CustomVModel v-model="name"></CustomVModel> </div><原创 2021-03-15 12:41:35 · 181 阅读 · 0 评论 -
【Vue.js】Vue组件使用、父子组件间通信与生命周期
【Vuue.js】Vue组件使用与父子组件间通信props和$emit组件间通讯 - 自定义事件组件生命周期1.vue父组件如何向子组件中传递数据？使用props: 通过属性传递子组件中：props: ['list'],// 属性中的名称不能和data中的属性重名父组件中：<u-list :list="list"></u-list>props可以限制属性的类型2.vue中子组件如何调用父组件的方法通过v-on 监听 和$emit触发来实现：1、在父原创 2021-02-27 11:51:17 · 299 阅读 · 0 评论 -
【Vue.js】之事件与表单
事件event参数，自定义参数事件修饰符，按键修饰符【观察】事件被绑定到哪里event 是原生的事件被挂载到当前元素和 DOM 事件一样<template> <div> <p>{{ num }}</p> <button @click="increment1">+1</button> <button @click="increment2(2, $event)">+2</but原创 2021-02-20 16:43:17 · 123 阅读 · 0 评论 -
【Vue.js】之条件渲染与循环列表渲染
条件渲染v-if与v-else的用法，可以使用变量，也可以使用===表达式v-if与v-show的区别v-if与v-show的使用场景共同点：v-if 和 v-show 都是动态显示DOM元素。区别：1、编译过程： v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。2、编译条件： v-if 是惰性的：如果在初始渲染原创 2021-02-14 21:31:41 · 301 阅读 · 0 评论 -
【Vue.js】之常用指令、监听与计算属性、Class与Style
指令、插值插值，表达式指令，动态属性v-html: 会有XSS风险，会覆盖子组件,解析html标签v-text: 会有XSS风险，会覆盖子组件,不解析html标签<template> <div> <h3>Tpl的使用</h3> <p>文本插值 {{message}}</p> <p>JS 表达式{{ flag ? 'yes' : 'no' }} (只能是表达式, 不能是JS语句)<原创 2021-02-14 21:18:10 · 281 阅读 · 0 评论 -
【Vue.js + Element UI】实现商品管理
1.Tab卡添加商品实现整体布局/src/pages/goods/Index.vue<template> <div> <el-button size="small" type="primary" plain @click = "showAddForm">添加</el-button> <u-list @edit = "showEditForm"/> <u-form ref = "form"/> <原创 2021-02-07 11:39:54 · 1399 阅读 · 0 评论 -
【Vue.js + Element UI】之encharts的使用
【Vue.js + Element UI】之encharts的使用echarts的使用ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。在vue中的使用安装npm install -S echarts vue-echarts在组件中的使用/原创 2021-02-07 10:51:04 · 602 阅读 · 0 评论 -
【Vue.js + Element UI】实现文件上传
【Vue.js + Element UI】实现文件上传代码实例Form.vue<template> <!-- el-dialog: 弹出对话框组件 title: 对话框标题 visible: 是否显示 --> <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearForm" > <el-fo原创 2021-02-01 19:41:22 · 456 阅读 · 0 评论 -
【Vue.js + Element UI】实现树形控件、分页显示与动态加载菜单
树形控件:<!-- 显示菜单数据 树形控件 data 要显示的数据 show-checkbox 是否显示checkbox框数据 node-key: node的key 对应的菜单数据的编号 props 节点配置 {children(下级节点): '菜单数据中对应的下级名称', label(节点显示的名称): '菜单数据中的标题'} default-expand-all 是否展开所有的节点原创 2021-01-31 22:55:22 · 3164 阅读 · 0 评论 -
【Vue.js + Element UI】实现左侧导航栏制作
【Vue.js + Element UI】实现右侧导航栏制作利用Element UI进行页面搭建/components/Menu.vue<template> <div class="aside"> <!-- 导航菜单组件 el-menu: 容器组件 @open 监听下拉打开 @close 监听下拉菜单打开 default-active string 默认选中的菜单项的index的值 text-col原创 2021-01-28 10:19:59 · 6332 阅读 · 1 评论 -
【Vue.js+Element UI+ Node.js】实现完整登录验证
【Vue.js+Element UI+ Node.js】实现登录验证1.配置主页和登录页的路由router/src/main.jsimport Vue from 'vue'// 引入Element UI组件import ElementUI from 'element-ui'// 引入Element UI样式文件import 'element-ui/lib/theme-chalk/index.css'import App from './App'import router from './原创 2021-01-26 22:02:02 · 606 阅读 · 0 评论 -
【Vue-cli】中图片与iconfont的使用
一.图片的使用vue-cli中img的src设置：1. 图片在/static/img/xxx.png <img src="/static/img/xxx.png" /> // webpack不处理图片2. 图片在/src/assets/img/xxx.png图片路径直接写在模板<img src="@/assets/img/xxx.png" />// webpack将处理图片(小图片)3.图片路径定义在data中, 需要使用require方法 imgUrl原创 2021-01-25 18:29:01 · 195 阅读 · 0 评论 -
【Vue-cli】组件化实现购物车，包括单选按钮全选按钮联动
代码实例App.vue<template> <div id="app"> <index></index> </div></template><script>// 引入主页indeximport Index from './pages/Index';export default { name: 'App', components: { Index }};</s.原创 2021-01-25 11:13:01 · 965 阅读 · 0 评论 -
【Vue | JQuery | Javascript】入门之实现简易购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- ...原创 2020-11-27 16:58:45 · 359 阅读 · 0 评论 -
【Vue.js】之组件之间的通信
【Vue.js】组件之间的通信1.父->子通过属性传递子组件中：props: ['list'],// 属性中的名称不能和data中的属性重名父组件中：<u-list :list="list"></u-list>props需要限制属性的类型props: { list: String // 验证类型： Number String Boolean Array Object Function Symbol age: [Number, Stri原创 2021-01-23 11:36:34 · 139 阅读 · 0 评论 -
【Vue.js】之Vue-cli的安装
Vue-cli的使用什么是vue-clivue-cli它是vue官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface) 命令行界面。vue-cli是基于node环境利用webpack对文件进行编译、打包、压缩、es6转es5等一系列操作。准备工作安装node和npm 使用 node -v 查看node的版本 如果安装了node默认会安装npm全局安装nrm, 切换淘宝镜像 npm install -g nrm n原创 2021-01-22 08:14:19 · 130 阅读 · 0 评论 -
【Vue.js】之组件基础知识
组件什么是组件组件(Component)是Vue最强大的功能之一。组件是对功能的抽象封装，组件可以扩展HTML元素，封装可重用的代码。为什么要使用组件在大型应用中为了分工、代码复用，不可避免地需要将应用抽象为多个相对独立的模块，组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。如何使用组件1.全局注册Vue.component('组件名称', { template: "<div>组件模原创 2021-01-22 07:54:21 · 559 阅读 · 0 评论 -
【Vue.js】利用组件实现后台管理布局
【Vue.js】实现后台管理布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue组件实现后台布局</title> <script src="ht原创 2021-01-21 14:41:17 · 325 阅读 · 0 评论 -
【Vue.js】实现随机抽奖
【Vue.js】实现随机抽奖![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121130157383.png代码实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-01-21 13:04:27 · 2369 阅读 · 1 评论 -
【Vue.js】之过滤器和利用过滤器实现新闻列表
过滤器 过滤器（对模板中显示的数据进行处理，然后返回一个新的数据）声明全局注册 不推荐 Vue.filter(name, function) 必须在new Vue()的前面声明局部注册new Vue({ ... filters: { 过滤器的名称 (value) {} }})只作用于定义的实例内部模板中使用: 1. 没有参数的过滤器 <p>{{数据 | 过滤器1的名称 | 过滤器2的名称 ...}}</p> <原创 2021-01-20 23:10:47 · 356 阅读 · 0 评论 -
【Vue.js】之监听实现搜索功能与翻译功能
监听器（watch）watch监听器的用法相当于是我们监视一个数据的变化，在这个数据变化时执行一些操作，这个操作可以是任何操作声明：watch: { 要监听的属性: function (newValue, oldValue) {}, 要监听的属性: '函数名' // methods中的函数 要监听的属性: { handler (newValue, oldValue) { console.log('watch', newUser) } }原创 2021-01-20 22:54:09 · 432 阅读 · 0 评论 -
【Vue.js】实现商品添加、列表展示和删除商品
【Vue.js】实现商品添加、列表展示和删除商品代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Product Management</title>原创 2021-01-20 12:53:29 · 3151 阅读 · 0 评论 -
【Vue.js】渲染商品列表
Vue.js框架渲染商品列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue渲染商品列表</title> <script src="https:原创 2021-01-19 17:41:29 · 1432 阅读 · 0 评论 -
【Vue.js/Vue-cli】实现To do list
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TodoList</title> <script src="https://cdn.jsdelivr...原创 2021-01-19 16:50:21 · 285 阅读 · 0 评论