vue
·Mr.zuo
这个作者很懒,什么都没留下…
展开
-
ES6之模板引擎&&字符串模板x-template
前言在js里面,经常需要使用js往页面中插入html内容写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接,如果html很短还好说,但是遇到描述里面的这么大段,直接用字符串存储会很困难,因为不光要处理单引号,还需要很多「+」号把字符串一个个连接起来,十分的不方便。比如有的时候需要使用弹出框的时候手动使用字...原创 2019-11-07 20:07:10 · 167 阅读 · 0 评论 -
Vue之全局API(nextTick、filter、use)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API.通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vue.set + Vue.delete4、V...原创 2019-11-06 16:43:20 · 516 阅读 · 0 评论 -
Vue之全局API(全局操作set+delete)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API。通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vue.set + Vue.delete4、V...原创 2019-11-06 16:12:36 · 226 阅读 · 0 评论 -
VUE之全局API(扩展实例构造器extend)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如本节要介绍的指令Vue.directive通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vu...原创 2019-11-04 18:46:04 · 200 阅读 · 0 评论 -
VUE之多元素组件过渡+动画封装
(1)多元素过渡(2)多组件过渡(3)列表过渡(4)动画封装多元素过渡首先介绍下如何实现多元素过渡(1)利用条件编译指令v-if与v-else实现多元素内容切换.(2)接下来在内容切换基础上,添加过渡动画,例如渐隐渐现效果1、transition添加name属性命名2、设置过渡状态(3)状态管理测试后发现并没有过渡效果,分析原因Vue在多个元素切换过程中会尽量复用D...原创 2019-11-04 16:42:26 · 501 阅读 · 0 评论 -
VUE之内置指令②(文本渲染指令VS插值表达式)
文本渲染指令v-text文本渲染指令:这里补充个vue基础指令v-text文本渲染指令,v-text取值为数据data中某项时,便以文本形式渲染到DOM中场景:如果想单纯展示vue对象中的数据,可以使用文本渲染指令v-text插值表达式{{}}对比v-text(1)是否显示虚拟DOM即virtual dom验证后发现两者渲染结果完全一样,页面元素也一样。区别:但是如果你把...原创 2019-11-04 16:17:44 · 339 阅读 · 0 评论 -
Vue分类筛选器
以下就是小编用Vue写出来的分类选择器<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue分类筛选器</title> <script src="js/vue-2.6.9.min.js"></script> &l...原创 2019-11-01 15:00:12 · 2209 阅读 · 0 评论 -
VUE之过渡动画钩子函数+Velocity.js动画库
前言CSS实现方式目前为止已经介绍了Vue过渡与动画实现方式,包含transition过渡类型动画和@keyframes类型动画。JS钩子函数方式+第三方库除了用CSS来实现vue的组件过渡与动画,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM即可。正如之前所说,可以配合使用第三方 JavaScript 动画库,如 Velocity.jsVelocity.js...原创 2019-10-31 15:11:24 · 1630 阅读 · 0 评论 -
VUE之过渡+动画
大纲(1)页面初始化渲染动画(2)transition过渡+@keyframes动画(3)过渡&&动画时长控制—type属性(4)自定义时长页面初始化渲染动画目前为止,已经结合animated.css动画库实现了@keyframes类型动画切换效果。【前言】如果想在页面初始化时渲染动画效果,此时需要用到appear呈现属性和appear-active-clas...原创 2019-10-31 14:45:52 · 344 阅读 · 0 评论 -
VUE之动画与animate.css动画库
前言Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js过渡动画原理在进入/离开的过渡中,会有 6 个...原创 2019-10-31 14:34:30 · 3139 阅读 · 0 评论 -
VUE之过渡transition
前言Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class–基础动画可以配合使用第三方 CSS 动画库,如 Animate.css–CSS动画在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画可以配合使用第三方 JavaScript 动画库,如 Velocity.js—JS动画库Vu...原创 2019-10-31 14:20:13 · 394 阅读 · 0 评论 -
VUE之组件(插槽slot与可复用组件)
前言前言及场景:插槽概念在Vue中十分重要在很多第三方的Vue模块或插件中都会大量使用插槽作用:通过插槽slot可以更加方便的向子组件传递DOM元素,同时子组件使用插槽内容也十分简单,大大简化了代码,增加了代码可读性。插槽slot首先创建个基础组件,然后在页面调用显示,如下所示父组件传递写法父组件通过属性形式向子组件传值,即父传子借助props属性向下传值如果不想被转义...原创 2019-10-30 19:54:04 · 597 阅读 · 0 评论 -
VUE之组件(父子与非父子通信)
组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。日常开发里,我们可以按照功能将一个网页拆分成很多个部分,每个部分就是一个组件。例如,可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的子组件。前言有人可能会问:为什么要学习组件通信原因:在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件,这就需要一个父子组件关系,进而引出互相通信的问题。父子组件...原创 2019-10-30 19:26:59 · 177 阅读 · 0 评论 -
自适应Vue购物车
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>购物车练习</title> <script src="../js/vue-2.6.9.min.js" type="text/javascript"></script> ...原创 2019-10-29 18:52:25 · 153 阅读 · 0 评论 -
VUE工程化---脚手架搭建与工程化
步骤1、卸载旧版node—uninstall nodejs2、安装新版,测试node版本和npm版本3、安装cnpm淘宝镜像4、安装vue-cli脚手架工具5、创建vue项目—一系类的配置6、项目下载完毕后,进入cd项目文件,启动项目npm run dev淘宝镜像遗留问题上节安装了淘宝镜像cnpm,安装成功后检测cnpm版本此时cmd输出cnpm版本,表示安装成功。node_...原创 2019-10-29 18:44:09 · 132 阅读 · 0 评论 -
VUE之组件(绑定原生事件、$listeners、$ref)
组件绑定原生事件有时,我们想要在一个组件的根元素上直接监听一个原生事件,一般操作步骤如下1、首先定义一个 child 组件,什么事件都不绑定,代码如下:2、接下来,给 child 组件增加一个 @click 事件,如下所示3、这个 handleClick 方法是谁的呢?当然是父作用域下的方法,所以接下来在根组件中增加一个方法,代码如下分析验证:当点击按钮的时候发现,没有弹框提示...原创 2019-10-28 20:01:49 · 983 阅读 · 0 评论 -
VUE之组件(组件细节、模块系统、v-model语法糖)
H5编码规范分析如下代码中的组件解析结果H5规范中要求,table里为tbody,tbody里需要放置tr和td,否则会将代码解析到table外。方案:这里,tbody中放置的是row,所以会解析到table同级外部,解决方案为is属性。既然tbody里只能放置tr,那么这里便改成tr+is属性template组件模板写法写法一:直接写在选项里的模板直接在构造器里的te...原创 2019-10-28 19:43:43 · 851 阅读 · 0 评论 -
VUE之组件(Props特性深析)
Prop命名风格【前言】创建一个博文组件,如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的,这也正是 prop的由来。Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop特性的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 props 选项将其包含在该组件可接受的prop 列表...原创 2019-10-28 19:17:10 · 555 阅读 · 0 评论 -
VUE之组件(组件通信、单向数据流)
组件通信我们已经知道,从父组件向子组件通信,通过 props 传递数据就可以了,但 Vue组件通信的场景不止有这一种,归纳起来,组件之间通信可以用下图表示。单向数据流单向数据流是父子组件的核心概念,props是单向绑定的。当父组件的属性发生变化的时候,会传导到子组件。但是反之,为了防止子组件无意间修改来父组件的状态,从下往上的数据流是不允许的。当父组件属性改变时,会传进子组件。...原创 2019-10-23 19:39:05 · 102 阅读 · 0 评论 -
VUE之组件(动态组件及keep-alive)实现选项卡
动态组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选项卡案例</title> <script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"...原创 2019-10-23 19:25:06 · 791 阅读 · 0 评论 -
VUE之组件(复用性、props、单向数据流)
组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE:组件化、数据驱动例如,可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、标题之类的组件。为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。组件的注册类型分两种:全局注册和局部注册。组件复用性可以将组件进行任意次数的复用,例如,利用组件定义一个超级链接,在项目中多次使用单个根元素...原创 2019-10-22 19:40:01 · 1071 阅读 · 0 评论 -
VUE之表单与v-model
v-model基本用法表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model指令,用于在表单类元素上双向绑定数据。例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。<!DOCTYPE html><html> <head> <meta charset...原创 2019-10-15 19:54:10 · 135 阅读 · 0 评论 -
Array数组操作(变异更新、替换)
JS数组操作①末尾添加-push,会改变原始数组,返回值为数组更新后的新数组长度。var arr = [11,22,33,44,55,66] var arr_push = arr.push(777) console.log(arr_push) console.log(arr)/*push数组末尾添加---返回值变异后的数组长度*/②末尾删除-pop,会改变原始数组,返回...原创 2019-10-15 19:21:05 · 772 阅读 · 0 评论 -
VUE之v-bind类名与样式绑定
课程(1)v-bind回顾(2)class-对象语法(3)class-数组语法(4)内联样式style-对象语法(5)内联样式style-计算属性语法前言DOM元素经常动态绑定一些类名或者style样式,本节讲解下使用v-bind指令绑定class与style的多种方法。之前介绍过v-bind基本用法及语法糖,主要用于动态更新HTML元素属性,接下来简...原创 2019-10-15 09:25:10 · 370 阅读 · 0 评论 -
VUE之内置指令(基本、条件、列表渲染)
JS迭代器迭代器模式是一种相对简单的模式,迭代器的使用可以极大地简化数据操作,目前的绝大部分语言都内置了迭代器(1)forEach迭代器forEach方法接收一个函数作为参数,对数组中每个元素使用这个函数,只调用这个函数,数组本身没有任何变化,即不改变原始数组<!DOCTYPE html><html> <head> <me...原创 2019-10-14 21:49:44 · 269 阅读 · 0 评论 -
Vue之计算属性与侦听器
什么是计算属性?通过之前章节,已经可以搭建一个简单的Vue应用,在模板里双向绑定一些数据或者表达式。但是,表达式如果过长或者逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护,比如这里的表达式包含3个操作,并不是很清晰,所以在遇到复杂逻辑时应该使用计算属性,使用计算属性对上例进行改写。计算属性用法在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,最终返回计...原创 2019-10-12 15:55:14 · 453 阅读 · 0 评论 -
Vue生命周期钩子
一、什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称为Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例...原创 2019-10-12 13:49:28 · 110 阅读 · 0 评论