- 博客(14)
- 收藏
- 关注
RSS订阅原创 1、纯css完成矩形/三角/梯形/圆/五角星
学习网站<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...
2019-11-18 22:59:36
151
原创 十三、computed
computed是依赖缓存进行计算的，只有所依赖的缓存发生改变才会重新计算。如果只没有发生改变，会直接取缓存里面的值计算属性必须return一个值computed里的计算函数是可以直接当作data使用，不需要()计算属性里面计算出来的值还可以拿来重新计算<!DOCTYPE html><html lang="en"><head> <met...
2019-11-07 21:09:19
96
原创 十二、filter
filters过滤器一般用于文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式<!-- 在双花括号差值 -->{{ msg | capitalize }}<!-- 在v-bind --><div v-bind:id="rawId | formatId"></div>filters的简单例子：首字母大写以及保留两位小数...
2019-11-06 22:35:11
102
原创 十一、插槽
插槽介绍插槽是Vue实现了一套内容分发的API。<slot>元素：<slot>元素作为承载内容分发的出口当组件渲染的时候，<slot></slot>元素将会替换为你所插入的内容(可以是字符串、HTML、组件)字符串<!DOCTYPE html><html lang="en"><head> &l...
2019-11-06 22:16:08
62
原创 十、组件化开发
全局注册组件所谓的全局注册，就是注册后可以在随意的地方进行使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
2019-10-29 21:28:36
72
原创 九、vue中事件对象的获取
事件对象的获取事件对象的获取分为两种情况，分别是事件方法加括号和不加括号不加括号<body> <div id="root"> <button @click="handleClick">添加</button> </div> <script src="https://cdn.jsdelivr.net/npm...
2019-09-13 11:54:59
428
原创 八、Vue中的input数据双向绑定实现原理
在vue中的表单需要使用指令v-model实现数据的双向绑定。使用v-model实现数据的双向绑定输入框<body> <div id="root"> <!-- 通过v-model指令实现了输入框的值和data里的值双向绑定 --> <input type="text" v-model="inputValue"><br/...
2019-09-13 11:22:28
2640
原创 七、指令的总结
v-textv-text指令的作用就是用来渲染数据的，功能上和插值表达式{{}}差不多。但是两者的区别蛮大的。如果一个HTML元素上同时存在插值表达式和v-text指令，那么指令的优先级是高于插值表达式的。插值表达式的灵活性高于指令的。比如说，需要在一个存在有内容的元素上渲染数据，如果采用插值表达式，那么插值表达式渲染的数据是可以随意放在元素内的任意地方进行渲染。但是如果使用了指令，那么...
2019-09-13 09:34:04
90
原创 六、Vue指令(三)
v-bind<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
2019-08-22 22:14:12
61
原创 五、vue指令(二)
循环渲染和条件渲染v-for是用于循环渲染数据的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
2019-08-15 23:12:29
95
原创 四、vue指令(一)
插值表达式语法：{{}}首先插值表达式里面放的是js表达式，而不是其他的。比如说语句就不能写<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
2019-08-12 22:55:52
254
原创 三、proxy
在vue3的版本中可能会用proxy实现数据的双向绑定，但是proxy很多浏览器都不支持。可以通过caniuse查看。所以vue可能会进行浏览器的特性检测特性检测就是检查浏览器支持的特性是通过navigator检测，navigator里面有个userAgent可以检测是哪一个浏览器，浏览器是那个版本实际中一般不会去判断是那个浏览器的那个版本，一般都是判断浏览器是否支持某个属性就行了例子...
2019-08-08 22:00:13
285
原创 二、Vue数据响应式原理
Object.definePropertyvue实现数据响应式就是通过Object.defineProperty实现的vue不支持IE8的原因之一就是因为Object.defineProperty不支持IE8，可以通过can i use网站查询。使用方法可以通过MDN查询使用<!DOCTYPE html><html lang="en"><head>...
2019-07-25 22:40:24
129
原创 一、Vue的基本使用
Vue实例vue实例只接收一个参数，参数是一个对象。vue是基于M-V-VM框架的框架设计思想：对于这些框架来说一个参数的东西，一般都是传一个对象，因为对象里的参数都是可选的。数组是有序的，对象是无序的。最基本实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2019-07-24 22:44:57
96
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人