![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue计算属性
·Mr.zuo
这个作者很懒,什么都没留下…
展开
-
ES6之模板引擎&&字符串模板x-template
前言在js里面,经常需要使用js往页面中插入html内容写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接,如果html很短还好说,但是遇到描述里面的这么大段,直接用字符串存储会很困难,因为不光要处理单引号,还需要很多「+」号把字符串一个个连接起来,十分的不方便。比如有的时候需要使用弹出框的时候手动使用字...原创 2019-11-07 20:07:10 · 156 阅读 · 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 · 496 阅读 · 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 · 213 阅读 · 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 · 189 阅读 · 0 评论 -
VUE之全局API(自定义指令directive)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如本节要介绍的指令Vue.directive通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作V...原创 2019-11-04 17:15:36 · 1954 阅读 · 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 · 491 阅读 · 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 · 2190 阅读 · 0 评论 -
Vue图书管理系统
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <title>图书管理</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>...原创 2019-10-29 18:55:56 · 4729 阅读 · 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 · 145 阅读 · 0 评论 -
VUE之组件(绑定原生事件、$listeners、$ref)
组件绑定原生事件有时,我们想要在一个组件的根元素上直接监听一个原生事件,一般操作步骤如下1、首先定义一个 child 组件,什么事件都不绑定,代码如下:2、接下来,给 child 组件增加一个 @click 事件,如下所示3、这个 handleClick 方法是谁的呢?当然是父作用域下的方法,所以接下来在根组件中增加一个方法,代码如下分析验证:当点击按钮的时候发现,没有弹框提示...原创 2019-10-28 20:01:49 · 949 阅读 · 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 · 787 阅读 · 0 评论 -
VUE之组件(Props特性深析)
Prop命名风格【前言】创建一个博文组件,如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的,这也正是 prop的由来。Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop特性的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 props 选项将其包含在该组件可接受的prop 列表...原创 2019-10-28 19:17:10 · 537 阅读 · 0 评论 -
Vue之计算属性与侦听器
什么是计算属性?通过之前章节,已经可以搭建一个简单的Vue应用,在模板里双向绑定一些数据或者表达式。但是,表达式如果过长或者逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护,比如这里的表达式包含3个操作,并不是很清晰,所以在遇到复杂逻辑时应该使用计算属性,使用计算属性对上例进行改写。计算属性用法在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,最终返回计...原创 2019-10-12 15:55:14 · 425 阅读 · 0 评论