Vue
web 沐
这个作者很懒,什么都没留下…
展开
-
VUE element-ui 中全选与分页结合后不能选中的坑
今天如往常编写程序时,突然发现,用了表格分页后,突然不能全选了。。。。各种纠结! 最后使利用Vue中的监听属性完成了项目要求;接下来步入正题!!!侦听属性一、侦听属性使用Vue实例的watch选项实现二、格式一:书写在Vue实例内部。例:watch:{被侦听的变量:function(newValue,oldValue){ …… }}侦听属性的参数:newVal...原创 2020-05-06 20:40:10 · 1737 阅读 · 0 评论 -
学习VUE第十五天课程(基础篇完结1:VUE之全局API(全局操作set+delete))
VUE之全局API(全局操作set+delete)全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API。通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操...原创 2019-11-06 11:24:29 · 217 阅读 · 0 评论 -
学习VUE第十五天课程(VUE之全局API(nextTick、filter、use))
VUE之全局API(nextTick、filter、use)全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API.通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器...原创 2019-11-06 10:56:15 · 224 阅读 · 0 评论 -
学习VUE第十四天课程(基础篇完结2:VUE之全局API(扩展实例构造器extend))
VUE之全局API(扩展实例构造器extend)全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如本节要介绍的指令Vue.directive通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vu...原创 2019-11-04 19:12:57 · 90 阅读 · 0 评论 -
学习VUE第十四天课程(VUE之全局API(自定义指令directive))
VUE之全局API(自定义指令directive)(1)全局API(2)自定义指令—起源(3)自定义指令—分类(4)自定义指令—注册(5)自定义指令—调用(6)自定义指令—生命周期钩子全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如本节要介绍的指令Vue.directive通俗理解:...原创 2019-11-04 19:06:03 · 168 阅读 · 0 评论 -
学习VUE第十四天课程(VUE之多元素组件过渡+动画封装)
学习VUE第十三天课程(VUE之多元素组件过渡+动画封装)(1)多元素过渡(2)多组件过渡(3)列表过渡(4)动画封装多元素过渡首先介绍下如何实现多元素过渡(1)利用条件编译指令v-if与v-else实现多元素内容切换.多元素过渡(2)接下来在内容切换基础上,添加过渡动画,例如渐隐渐现效果1、transition添加name属性命名2、设置过渡状态多元素过渡(3)状态...原创 2019-11-04 18:54:18 · 199 阅读 · 0 评论 -
学习VUE第十四天课程(VUE之组件(VUE之内置指令知识扩充(文本渲染指令VS插值表达式))
VUE之内置指令知识扩充(文本渲染指令VS插值表达式)文本渲染指令v-text文本渲染指令:这里补充个vue基础指令v-text文本渲染指令,v-text取值为数据data中某项时,便以文本形式渲染到DOM中场景:如果想单纯展示vue对象中的数据,可以使用文本渲染指令v-text插值表达式{{}}对比v-text(1)是否显示虚拟DOM即virtual dom验证后发现两者渲染结果...原创 2019-11-04 18:46:41 · 97 阅读 · 0 评论 -
学习VUE第十三天课程(VUE之组件(VUE之过渡动画钩子函数+Velocity.js动画库))
VUE之过渡动画钩子函数+Velocity.js动画库CSS实现方式目前为止已经介绍了Vue过渡与动画实现方式,包含transition过渡类型动画和@keyframes类型动画。JS钩子函数方式+第三方库除了用CSS来实现vue的组件过渡与动画,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM即可。正如之前所说,可以配合使用第三方 JavaScript 动画库,如...原创 2019-10-31 15:15:21 · 300 阅读 · 0 评论 -
学习VUE第十三天课程(VUE之组件(VUE之过渡+动画)
VUE之过渡+动画(1)页面初始化渲染动画(2)transition过渡+@keyframes动画(3)过渡&&动画时长控制—type属性(4)自定义时长页面初始化渲染动画目前为止,已经结合animated.css动画库实现了@keyframes类型动画切换效果。如果想在页面初始化时渲染动画效果,此时需要用到appear呈现属性和appear-active-class...原创 2019-10-31 14:58:45 · 96 阅读 · 0 评论 -
学习VUE第十三天课程(VUE之组件(VUE之动画与animate.css动画库))
VUE之动画与animate.css动画库Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js在进入/离开的过...原创 2019-10-31 14:43:22 · 254 阅读 · 0 评论 -
学习VUE第十三天课程(VUE之组件(VUE之过渡transition))
VUE之过渡transitionVue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class–基础动画可以配合使用第三方 CSS 动画库,如 Animate.css–CSS动画在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画可以配合使用第三方 JavaScript 动画库,如 Velocit...原创 2019-10-31 14:32:43 · 270 阅读 · 0 评论 -
学习VUE第十二天课程(VUE之组件(插槽slot与可复用组件))
VUE之组件(插槽slot与可复用组件)前言及场景:插槽概念在Vue中十分重要在很多第三方的Vue模块或插件中都会大量使用插槽作用:通过插槽slot可以更加方便的向子组件传递DOM元素,同时子组件使用插槽内容也十分简单,大大简化了代码,增加了代码可读性。插槽slot首先创建个基础组件,然后在页面调用显示,如下所示父组件传递写法父组件通过属性形式向子组件传值,即父传子借助prop...原创 2019-10-30 19:01:35 · 341 阅读 · 0 评论 -
学习VUE第十二天课程(VUE之组件(父子与非父子通信))
VUE之组件(父子与非父子通信)组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。日常开发里,我们可以按照功能将一个网页拆分成很多个部分,每个部分就是一个组件。例如,可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的子组件。有人可能会问:为什么要学习组件通信原因:在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件,这就需要一个父子组件关系,进而引出互相通...原创 2019-10-30 18:42:31 · 180 阅读 · 0 评论 -
学习VUE第十一天课程(VUE之组件(绑定原生事件、$listeners、$ref))
VUE之组件(绑定原生事件、listeners、listeners、listeners、ref)组件绑定原生事件有时,我们想要在一个组件的根元素上直接监听一个原生事件,一般操作步骤如下1、首先定义一个 child 组件,什么事件都不绑定,代码如下:步骤:2、接下来,给 child 组件增加一个 @click 事件,如下所示3、这个 handleClick 方法是谁的呢?当然是父作...原创 2019-10-28 21:12:27 · 143 阅读 · 0 评论 -
学习VUE第十一天课程(VUE之组件(组件细节、模块系统、v-model语法糖))
VUE之组件(组件细节、模块系统、v-model语法糖)本节针对组件应用相关细节做下补充,以便查漏补缺,大纲如下(1)H5编码规范与template模板的3种写法(2)组件data(3)组件名(4)组件注册(5)模块系统(需结合后续工程化使用,这里简单了解即可)(6)自定义事件(父子组件通信)(7).sync修饰符(8)自定义组件之v-model语法糖H5编码规范分析如下代码...原创 2019-10-28 20:02:07 · 261 阅读 · 0 评论 -
学习VUE第十一天课程(VUE之组件(VUE之组件(Props特性深析))
VUE之组件(Props特性深析)本节总结罗列下组件传参props的相关细节点,大纲如下1、Props命名风格2、Props动态和静态3、组件参数Props校验4、非Props特性与Props特性5、$attrs和inheritAttrs继承属性Prop命名风格创建一个博文组件,如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的,这也正是 ...原创 2019-10-28 19:16:49 · 428 阅读 · 0 评论 -
Vue工程化:学习VUE第十天课程(node环境安装)
Node环境安装(1)Windows安装Node.js登录node官网(https://nodejs.org/en/)可以看到各种平台node版本下载。本节主要讲解下windows平台安装node.js安装方式有两种Windows 安装包(.msi)和Windows 二进制文件 (.exe)安装。1、Windows 安装包(.msi)32 位安装包下载地址 : https://nod...原创 2019-10-25 19:06:55 · 95 阅读 · 0 评论 -
Vue工程化:学习VUE第十天课程(2.VUE工程化---node简介与环境搭建)
2.VUE工程化—node简介与环境搭建核心思想vue两大核心思想→组件化和数据驱动(1)组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用(2)数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化,不必过多的关注DOM,只需要关注数据层即可工程化Vue工程化项目需要用到脚手架工具vue-cli,类似于工人手里面的脚手架一样,帮助工人...原创 2019-10-25 19:01:44 · 339 阅读 · 2 评论 -
Vue工程化:学习VUE第十天课程(1.VUE工程化---CMD命令提示符)
简介cmd是command的缩写,即命令提示符(CMD)。(1)本质:命令提示符是在操作系统中,提示进行命令输入的一种工作提示符。(2)分类:在不同的操作系统环境下,命令提示符各不相同。①在windows环境下,命令行程序为cmd.exe,是一个32位的命令行程序,微软Windows系统基于Windows上的命令解释程序,类似于微软的DOS操作系统(磁盘操作系统)②一般说的“命令行”是指...原创 2019-10-25 18:54:37 · 258 阅读 · 0 评论 -
学习VUE第九天课程(VUE之组件(动态组件及keep-alive))
VUE之组件(动态组件及keep-alive)动态组件首先看下效果图:选项卡效果可以通过 Vue 的 元素加一个特殊的 is 特性实现Vue可以在不同组件之间进行动态切换,这种方法称为动态组件。接下来给按钮添加点击事件,点击切换给按钮添加激活样式动态组件嵌套组件同样可以实现选项卡嵌套场景:你会注意到,如果你选择了一个选项two,切换到其他标签,然后再切换回公司...原创 2019-10-23 19:09:54 · 162 阅读 · 0 评论 -
学习VUE第九天课程(VUE之组件(组件通信、单向数据流))
VUE之组件(组件通信、单向数据流)组件通信我们已经知道,从父组件向子组件通信,通过 props 传递数据就可以了,但 Vue 组件通信的场景不止有这一种,归纳起来,组件之间通信可以用下图表示。单向数据流单向数据流是父子组件的核心概念,props是单向绑定的。当父组件的属性发生变化的时候,会传导到子组件。但是反之,为了防止子组件无意间修改来父组件的状态,从下往上的数据流是不允许的。当...原创 2019-10-23 19:03:15 · 197 阅读 · 0 评论 -
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))
VUE之组件(复用性、props、单向数据流)组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE:组件化、数据驱动例如,可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、标题之类的组件。为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。组件的注册类型分两种:全局注册和局部注册。组件复用性可以将组件进行任意次数的复用,例如,利用组件定义一个...原创 2019-10-22 19:35:41 · 236 阅读 · 0 评论 -
学习VUE第八天课程(拓展:ES6之模板引擎&&字符串模板x-template)
拓展:ES6之模板引擎&&字符串模板x-template在js里面,经常需要使用js往页面中插入html内容写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接,如果html很短还好说,但是遇到描述里面的这么大段,直接用字符串存储会很困难,因为不光要处理单引号,还需要很多「+」号把字符串一个个连...原创 2019-10-22 19:06:06 · 273 阅读 · 0 评论 -
学习VUE第七天课程(VUE之组件(基础、分类、命名))
VUE之组件(基础、分类、命名)组件( Component )是 Vue.js 最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的。接下来会由浅入深地学习组件的全部内容,并通过几个案例练习熟练使用 Vue 组件。正式讲解组件前,先看个场景,了解下为什么学习组件?有人会问:为什么学习组件,作用是什么?接下来看个场景!!场景举例产品经理:现在需求升级了,这几个控件还有别的...原创 2019-10-22 15:17:41 · 274 阅读 · 0 评论 -
学习VUE第七天课程(JS深拷贝与浅拷贝)
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化①如果B也跟着变了,说明这是浅拷贝,功力不够②如果B没变,那就是深拷贝,自食其力,修成正果接下来会分别阐述栈堆,基本数据类型与引用数据类型,这些概念能帮助理解深拷贝与浅拷贝。首先举个浅拷贝例子:有人可能会问:明明b复制了a,为啥修改数组a,数组b也跟着变了。这里就得引入基本数据类型与引用数据类型的概念...原创 2019-10-21 20:35:38 · 505 阅读 · 0 评论 -
学习VUE第六天课程(补充——VUE之表单与v-model)
VUE之表单与v-model大纲(1)v-model基本用法(2)单选框/按钮(3)复选框/多选按钮(4)下拉选择列表(5)表单输入绑定修饰符v-model基本用法表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model 指令,用于在表单类元素上双向绑定数据。例如在输入框上使用时,输入的内容会实时映...原创 2019-10-15 19:59:56 · 146 阅读 · 0 评论 -
学习VUE第六天课程(Array数组操作(ASCII码值—拓展)——上篇)
Array数组操作(ASCII码值—拓展)(1)charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。语法:stringObject.charCodeAt(index)字符串中第一个字符的下标是 0。如果 index 是负数,或大于等于字符串的长度,则 charCodeAt() 返回 NaN。(2)charAt() 方法...原创 2019-10-15 17:18:13 · 870 阅读 · 1 评论 -
学习VUE第六天课程(Array数组操作(变异更新、替换)——下篇)
Array数组操作(变异更新、替换)大纲(1)数组操作补充(2)ASCII码值(3)JS限制-数组操作限制(4)JS限制-对象操作限制Vue 包含一组观察数组的变异更新与替换的方法,它们将会触发视图更新。在正式介绍前,先回顾下原生JS数组操作。变异方法 (mutation method),顾名思义,会改变原始数组。非变异 (non-mutating method) 方法,则不会...原创 2019-10-15 17:13:44 · 465 阅读 · 0 评论 -
学习VUE第五天课程(VUE之v-bind类名与样式绑定——上篇)
课程大纲(1)v-bind回顾(2)class-对象语法(3)class-数组语法(4)内联样式style-对象语法(5)内联样式style-计算属性语法DOM元素经常动态绑定一些类名或者style样式,本节讲解下使用v-bind指令绑定class与style的多种方法。之前介绍过v-bind基本用法及语法糖,主要用于动态更新HTML元素属性,接下来简单回顾下。v-bind...原创 2019-10-14 19:13:07 · 151 阅读 · 0 评论 -
学习VUE第五天(VUE之内置指令(基本、条件、列表渲染)——下篇)
大纲(1)JS迭代器(2)遮罩指令v-cloak(3)多条件渲染指令v-if、v-else-if、v-else(4)列表渲染指令v-for(5)列表渲染指令标识符key属性(6)key属性由来与虚拟DOM(7)diff微分算法JS迭代器迭代器模式是一种相对简单的模式,迭代器的使用可以极大地简化数据操作,目前的绝大部分语言都内置了迭代器(1)forEach迭代器forEac...原创 2019-10-14 19:48:23 · 159 阅读 · 0 评论 -
学习VUE第四天(补充:字符串截取操作)
补充:字符串截取操作js中字符串方法操作有很多:concat、indexOf…. 等等,本节主要介绍两种经常混淆的字符串截取方法:substring和substr(1)substring作用:用于提取字符串中介于两个指定下标之间的字符语法:substring(start,end)语法解析:start开始和end结束的位置,从零开始的索引,包头不包尾(1)substring定义:提取指...原创 2019-10-12 15:41:34 · 932 阅读 · 0 评论 -
学习VUE第四天(VUE之计算属性&侦听器&方法)
计算属性简介什么是计算属性?通过之前章节,已经可以搭建一个简单的Vue应用,在模板里双向绑定一些数据或者表达式。计算属性缘由模板内的表达式是非常便利的,但是它们实际上只用于简单的运算,如果在模板里放入太多的逻辑会让模板过于臃肿且难以维护。例如将“xiaoming”首字母大写上述案例里,将业务逻辑代码写入了模板里,写法本身没有错误,也能够实现相应功能,但是这样会导致代码...原创 2019-10-12 15:35:09 · 497 阅读 · 0 评论 -
初识VUE第三天 知识拓展案例 控制台招聘信息
在某些例如百度、爱一起、淘宝等网络企业公司 在招聘台都有 广告以下 是 以爱奇艺控制台制作的 招聘信息源代码!!!<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...原创 2019-10-14 19:50:39 · 156 阅读 · 0 评论 -
初识VUE第三天(VUE之生命周期钩子)
什么是生命周期?Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称为Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例...原创 2019-10-11 19:45:36 · 871 阅读 · 0 评论 -
初识vue框架(第二天——下篇)
课程大纲(1)console简介(2)显示信息的命令(3)占位符(4)分组显示(5)输出属性与方法(6)输出节点代码(7)清空控制台(8)计时器(9)计数器(10)表格化(11)广告推广/招聘(12)控制台快捷键console简介控制台(Console)是JS开发里最重要的面板,主要作用是显示网页加载过程中产生各类信息。之前的开发经常用Firebug进行JS代码调试...原创 2019-10-10 18:58:50 · 135 阅读 · 0 评论 -
初识vue框架(第二天——上篇)
初识vue框架下面是一个今天上午学习的大纲(1)v-bind属性指令(2)v-if条件指令(3)v-show渲染指令(4)v-on事件指令①表达式:方法名、内联语句②修饰符(5)methods选项-代理方法(6)拓展:2.6版本新增动态参数基本指令v-bindv-bind动态属性:常用于动态绑定HTML元素的属性,例如id、class、href、src等属性。改变任一方数据...原创 2019-10-10 18:38:40 · 149 阅读 · 0 评论 -
初识Vue框架
初识Vue框架今天初学Vue框架 对Vue框架有了一些简单的认知 下面是一些 Vue常用的单词写法 以及 简单的释义Integrated集成Development开发Environment环境MVC—Model模型View视图 Controller控制器MVP—Model模型View视图Presenter逻辑MVVM—Model模型View视图ViewModel视图模型CDN—Co...原创 2019-10-09 18:47:25 · 733 阅读 · 0 评论