vue
文章平均质量分 72
soputasmile11
自信、美丽、优秀!
展开
-
vue作用域插槽
官网有说明作用域插槽的使用方法,对照例子写了下,跑是跑成功了,但是还是有点不知道这东西存在的意义,父组件操作子组件数据,直接$emit不就行了,于是搜到了这个大神的文章,恍然大悟!作用域插槽使用场景就是有三个及以上层级的组件时,想要处理底层组件的数据,如果要分离业务设计,肯定是希望最高层级的父组件去处理,那就有跨层级处理的问题了,这个时候如果都使用$emit处理,那么中间层的组件就耦合了业务,这个时候就可以考虑使用作用域插槽...原创 2021-11-06 23:16:44 · 274 阅读 · 0 评论 -
vue组件数据传递
1、父传子参考官网(1)使用props传递(2)prop说明(参考props ),类型::①数组,数组里面是变量名字符串 ②对象,对象的key是变量名,value是变量的约束条件(3)prop名字如果是驼峰写法,在html中需要用分隔符<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head原创 2021-10-30 11:34:25 · 87 阅读 · 0 评论 -
vue组件的data为什么是一个函数
在官方文档说明vue组件的data必须是一个函数,其实是不难理解的,因为组件就像一个工具包,都是可以复用的,返回一个函数的目的就是为了每次注册组件的时候返回一个独立的data对象,如果不返回一个函数,多个地方用同一个组件的时候,他们就会公用一个data,看下面的示例,虽然data是一个函数,但是函数返回的是同一个对象,这个时候我三个地方使用计数器,count值就互相影响了,这种写法和data{count:0}(非函数)写法效果一样 <!DOCTYPE html><html lang=原创 2021-10-27 20:22:24 · 110 阅读 · 0 评论 -
v-model使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="../js/vue.js"></script><div id="app"> <!--<input :value="message原创 2021-10-25 19:57:37 · 217 阅读 · 0 评论 -
vue好用的指令
vue使用过一段时间,好些指令没怎么使用过,阅读文档发现有些挺好用,在此记录下来1、过滤器详细说明参考官方文档Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示使用示例:<!DOCTYPE html><html lang="en"><head> <meta char原创 2021-10-21 11:38:04 · 74 阅读 · 0 评论 -
vue响应式原理思考
参考: Vue数据响应式原理(写得非常好)1、响应式原理2、几个问题(1)为什么数组下标修改非数组元素,修改数组len不响应定义数组arr = [1,2,3],如果修改arr[0]=999是不会再页面响应的因为defineReactive没有定义数组元素的get\set(get\set里面加了watcher的依赖),所以如果修改数组元素是不会感知到的,但是其实使用defineProperty是可以实现数组元素的监测的,看下面代码就实现了对每个元素修改的监测(参考:vue为什么不能检测数组的变化):原创 2021-10-15 18:05:29 · 111 阅读 · 0 评论 -
v-if、v-show、v-for
参考文档:https://cn.vuejs.org/v2/guide/conditional.html以下是要着重记忆的点:1、v-else-if其实这个指令使用情况比较少,如果确实有多个判断的情况建议把逻辑写到js里面,不要写到html中,比如下面的例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>原创 2021-10-06 12:27:48 · 161 阅读 · 0 评论 -
v-on指令监听
指令更详细的说明见:https://cn.vuejs.org/v2/guide/events.html#%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6v-on用于监听dom事件,触发一些js代码具体的解释参考文档,值得注意的是事件修饰符里面的说明:<!-- 阻止单击事件继续传播,阻止冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面,默认阻止,类似于preventDefau原创 2021-10-06 10:39:52 · 157 阅读 · 0 评论 -
计算属性computed
1、使用场景用于处理不能直接展示在前端的数据2、和method的区别computed有缓存,如果data里面的数据不改变,就直接读取缓存,不会多次执行消耗性能3、set方法默认computed只是有get方法,也可以定义一个对象,包含两个key,一个是set,一个是get...原创 2021-09-28 22:36:56 · 57 阅读 · 0 评论 -
vue学习-指令学习
(1)v-once,只渲染一次,后面要更新值时不渲染试着不要过度使用这个模式。当你需要渲染大量静态内容时,极少数的情况下它会给你带来便利,除非你非常留意渲染变慢了,不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如,设想另一个开发者并不熟悉 v-once 或漏看了它在模板中,他们可能会花很多个小时去找出模板为什么无法正确更新。(2)v-html<!DOCTYPE html><html lang="en"><head> <meta charse原创 2021-09-28 17:33:39 · 64 阅读 · 0 评论