Vue
文章平均质量分 55
渣渣砖
这个作者很懒,什么都没留下…
展开
-
Element浅尝辄止13:Collapse 折叠面板
通过折叠面板收纳内容区域原创 2023-09-02 15:25:58 · 838 阅读 · 0 评论 -
Element浅尝辄止9:Popover 弹出框组件
Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此有重复属性。原创 2023-08-28 17:56:12 · 1703 阅读 · 0 评论 -
Element浅尝辄止8:Tooltip 文字提示组件
常用于展示鼠标 hover 时的提示信息。原创 2023-08-28 17:17:41 · 1348 阅读 · 0 评论 -
Element组件浅尝辄止6:Dialog 对话框组件
Dialog 对话框组件:在保留当前页面状态的情况下,告知用户并承载相关操作。大白话就是弹窗组件,日常开发中比较常见原创 2023-08-27 13:29:25 · 1932 阅读 · 2 评论 -
Element组件浅尝辄止4:Button组件
Button按钮组件:用途太广泛了,几乎参与到了日常开发中的方方面面。原创 2023-08-10 18:55:40 · 535 阅读 · 0 评论 -
Element组件浅尝辄止2:Card卡片组件
根据官方说法:将信息聚合在卡片容器中展示。原创 2023-08-10 17:51:16 · 1909 阅读 · 0 评论 -
Element组件浅尝辄止1:抽屉组件
平时开发中涉及弹窗的情景,一般都会选用dialog组件,其内部封装的相当优雅,方便我们使用;但是当你的文本内容或表单很长, 亦或是你需要临时展示一些图标或文档,Dialog组件可能并不满足我们的需求,这时可以用抽屉组件Drawer来解决问题。原创 2023-08-10 17:22:14 · 1236 阅读 · 0 评论 -
Vue跨层级组件通信
我们都了解Vue的组件通信可以分为三种:父子组件、兄弟组件、跨层级组件。简单理解包含关系即为父子、并列关系即为兄弟,前二者之外的即为跨层级组件通信。今天讲讲开发中常见的一种跨层级通信的情况,假如要有这样一个需求, 我要在当前页面执行某项操作,之后跳转到另一个页面并执行相应的方法,相当于在本页面调用其他页面的方法,此时就可以用到跨层级通信的方式来处理。原创 2023-08-08 14:59:44 · 340 阅读 · 0 评论 -
element组件系列:autocomplete再次搜索时,清空上次搜索内容
autocomplete组件常用,针对于它的各种解决方案也很多,下面只是其中一种。原创 2023-02-02 23:58:36 · 1159 阅读 · 0 评论 -
vue开发使用计算属性必备的注意事项
@[TOC](文章目录)先上代码,线上代码:原创 2021-03-12 17:47:14 · 232 阅读 · 0 评论 -
手摸手带你入门Vuex(一)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。什么是“状态管理模式”?状态自管理应用包含以下几个部分: state,驱动应用的数据源; view,以声明方式将state映射到视图; actions,响应在view上的用户输入导致的状态变化。 以下是一个表示“单向数据流”理念的简单示意: 2.Vuex的产生但是,当我们的应...原创 2021-02-22 18:09:50 · 129 阅读 · 0 评论 -
1分钟快速掌握Vue Router的使用?
简介 Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 安装 2.1 直接下载/CDN ...原创 2021-02-22 15:25:55 · 134 阅读 · 0 评论 -
快速掌握Vue单文件组件?
单文件组件的诞生背景 在很多 Vue 项目中,我们使用Vue.component来定义全局组件,紧接着用new Vue({ el: '#container '})在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:全局定义 (Global definitions)强制要求每个 compo...原创 2021-02-22 14:05:16 · 142 阅读 · 0 评论 -
手把手带你理解Vue的列表渲染?
概念v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,其中items是源数据数组,而item则是被迭代的数组元素的别名。 2. 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content...原创 2021-02-22 11:28:30 · 163 阅读 · 0 评论 -
计算属性 vs 方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.ne.原创 2021-02-01 18:31:35 · 107 阅读 · 0 评论 -
v-show和v-if有何异同?
v-show用于根据条件展示元素带有v-show指令的元素始终会被渲染并保留在 DOM 中。v-show只是简单地切换元素的 CSS propertydisplay。注意,v-show不支持<template>元素,也不支持v-else。 2. v-ifv-if是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才...原创 2020-12-15 14:49:47 · 138 阅读 · 0 评论 -
为什么Vue中需要计算属性?
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。1:计算属性》 基础例子<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></divvar vm = new Vue({ el: '#exa.原创 2020-12-14 15:56:11 · 888 阅读 · 0 评论 -
解决vue白屏问题
咱们先看看vue白屏咋ios手机上是如何产生的?首页跳转到到第二屏,点击返回,再从二级页面返回到首页就会出现白屏情况。原创 2020-11-10 15:07:18 · 1518 阅读 · 0 评论 -
如何快速掌握Vuex状态管理
1:Vuex 是一个专为 Vue.js 设计的状态管理模式2:vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时,会需要:多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。这需要你去学习下,vue编码中多个组件之间的通讯的做法。来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变...原创 2019-03-03 16:10:55 · 199 阅读 · 0 评论 -
vue-resource请求数据的使用方法
vue-resource:vue.js关于客户端请求数据的官方插件使用vue-resource请求数据的步骤 1:安装vue-resource插件,记得添加--save 若安装淘宝镜像用cnpm npm install vue-resource --save / cnpm 2:main.js引入vue-resource import VueResource f...原创 2019-02-28 15:42:47 · 353 阅读 · 0 评论 -
Axios请求数据的使用方法浅析
请求数据的第三方插件Axios,可以支持vue,node ,reactaxios:基于Promise的HTTP客户端,用于浏览器和node.js使用步骤1:安装axiosnpm i axios --save / cnpm2:哪里用就在那里引入import Axios from 'axios' / const axios = require('axios');3...原创 2019-02-28 17:05:04 · 2783 阅读 · 0 评论 -
Vue之父子组件通信(一)
1:父组件向子组件传递数据父组件向子组件传值:1:父组件调用子组件的时候 绑定动态属性<v-header :title='title'></v-header>2:在子组件中通过props接受父组件传过来的数据可以将数据 方法 或则 整个父组件实例 传给子组件props:['title','msg','run','home']父组件:&l...原创 2019-03-01 12:40:39 · 131 阅读 · 0 评论 -
Vue父子组件通信之父组件主动获取子组件的数据和方法(二)
父组件主动获取子组件的数据和方法:操作步骤:1:调用子组件的时候定义一个ref<v-header ref='header' ></v-header>2:在父组件中通过this.$refs.header.属性this.$refs.header.方法代码实例父组件<template> <div> ...原创 2019-03-01 17:25:50 · 364 阅读 · 0 评论 -
Vue父子组件通信之子组件主动获取父组件的数据和方法(三)
子组件主动获取父组件的数据和方法实现方式:this.$parent.属性this.$parent.方法代码示例:父组件<template> <div> <!-- 所有内容都要被根节点包含 --> <v-header ref='header' :title="title"></v-...原创 2019-03-01 17:36:29 · 482 阅读 · 0 评论 -
Vue之非父子组件通信
Vue之非父子组件通信非父子组件传值方法:1:在model中新建一个js文件 引入Vue 实例化Vue 最后暴露相关实例// 引入vueimport Vue from 'vue'// 创建一个空的vue实例var bus=new Vue()// 将实例暴露出去export default bus2:再要广播的位置和接收广播的位置引入刚刚创建的实例import B...原创 2019-03-01 18:27:46 · 289 阅读 · 0 评论 -
Vue之路由的使用方法
Vue的路由配置:1:安装npm install vue-router --save / cnpm install vue-router --save2、引入vue-router并 Vue.use(VueRouter) (在main.js中) import VueRouter from 'vue-router' Vue.use...原创 2019-03-01 21:49:59 · 372 阅读 · 0 评论 -
Vue之双向数据绑定
双向 数据绑定充分体现了MVVM的设计思想,model的改变会导致view的改变,view的改变会影响model的状态,VM作为二者之间的通信管道代码示例<template> <div id="app"> <h1>{{msg}}</h1> <input type="text" v-model='msg'>原创 2019-03-02 00:30:59 · 153 阅读 · 0 评论 -
Vue动态路由传值和Get传值
Vue动态路由:在一个页面获取上一个页面的传值1:配置动态路由步骤:const routes = [//(main.js文件中) { path: '/Content/:aid', component: Content }//动态路径参数以冒号开头 ]在上一个页面中配置<router-link :to="'/Content...原创 2019-03-02 09:03:35 · 1114 阅读 · 0 评论 -
Vue路由请求数据实现新闻列表及详情页的渲染
请求数据的接口:新闻列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1新闻详情接口:http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=488main.js中/*定义路由 */const r...原创 2019-03-02 23:15:21 · 5196 阅读 · 0 评论 -
Vue之编程式导航
通过javascript直接跳转到相关页面可以直接是字符串,也可以是对象,也可以用命名路由(在路由配置时做好路由的命名)this.$router.push('news')this.$router.push({path:'news'})this.$router.push({name:'news'})...原创 2019-03-02 23:45:10 · 452 阅读 · 0 评论 -
vue之路由的嵌套(父子路由)
路由的嵌套:1:配置路由main.js文件中import Users from './components/Users' import UserAdd from './components/Users/UserAdd' import UserList from './components/Users/UserList'/*定义路由 */const rou...原创 2019-03-03 00:34:05 · 6642 阅读 · 1 评论 -
Vue的Ui框架之Mint-UI的使用方法
基于Vue的Ui框架 饿了么公司基于vue开发的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 MintUi 基于vue 移动端的ui框架mintUI的使用: 1.找官网 2.安装 npm install mint-ui -S -S表示 --save ...原创 2019-03-03 09:52:50 · 1903 阅读 · 0 评论 -
vue MintUI实现上拉分页加载更多
MintUI实现上拉分页加载更多要用到Infinite scroll新闻页面<template> <div> <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-...原创 2019-03-03 11:22:00 · 1845 阅读 · 0 评论 -
element UI的使用方法
1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart 2.安装 cnpm i element-ui -S -S表示 --save 3.引入element UI的css 和 插件 import ElementUI from 'element-ui'; ...原创 2019-03-03 11:29:34 · 7583 阅读 · 0 评论 -
Vue路由的模块化
main.jsimport Vue from 'vue'import App from './App.vue'import VueResource from 'vue-resource'import router from './router/router'/* 引入公共的sCss */import './assets/css/basic.scss'Vue.use(VueRes...原创 2019-03-03 12:47:10 · 1183 阅读 · 2 评论 -
常用的Vue生命周期函数
Vue生命周期函数:组件挂载》组件更新》组件销毁时触发的一些方法,这些方法就叫做生命周期函数 beforeCreate(){ console.log('刚刚创建实例'); }, created(){ console.log('实例创建完成'); }, beforeMount(){...原创 2019-02-27 23:50:23 · 1833 阅读 · 2 评论