Vue
学习Vue之路的一点记录
亲爱的生活
这个作者很懒,什么都没留下…
展开
-
2021-11-04
学习笔记 js文件中 vue.filter 全局写法 Vue.filter("dateTimeFormat", function(time, fmt) { return time ? dateUtil.format( new Date(parseInt(time)), fmt ? fmt : "yyyy-MM-dd HH:mm:ss" ) : "-"; }); 组件内写法 filters:{ filter:function(dat原创 2021-11-11 15:31:18 · 56 阅读 · 0 评论 -
Vue使用小结
1.父子组件通信的方法 props down,events up 父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息。 父组件向子组件进行传值:子组件通过props接受参数。 子组件向父组件进行传值: 父组件内设置要传的数据 data(){ id: value} 比如,子组件需要某个数据,就在内部定义一个prop属性,然后父组件就像给html元素指定特性值一样,把自己的data属性传递给子组件的这个属性。当子组件内部发生了什么事情的时候,就通过自定义事件来把这个事原创 2021-09-30 16:20:50 · 47 阅读 · 0 评论 -
vue 学习1
css作用域 scoped (当 < style >标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。) 不同组件之间用到了相同的class类名,并且设置样式时之间会互相影响,所有我们需要在组件内的style标签上添加scoped属性 vue-awesome-swiper:轮播图 表达式和语句 表达式: 会产生一个值,可以放在任何一个需要值的地方 eg: function(){} a+b; 语句L:控制代码走向 eg: if() switch(){ case: }..原创 2021-08-10 14:25:00 · 48 阅读 · 0 评论 -
vue 一些值得注意的问题
问题 组件点击问题 给vue组件绑定事件时候必须加上native ,否则会认为监听的是来自Item组件自定义的事件 eg: < el-carousel-item @click.native ="showMessage" > < /el-carousel-item> this指向问题 使用this时一定要注意函数是箭头函数还是普通函数,路由跳转的函数用了箭头函数会出现Cannot read property ‘$router‘ of und原创 2021-08-16 13:56:50 · 66 阅读 · 0 评论 -
vue组件通信的方式
vue组件通信的方式 父组件向子组件进行传值:子组件通过props接受参数 子组件向父组件进行传值: 父组件内设置要传的数据 data(){ id: value} 通过vuex实现页面传值 vuex是一个专门为vue.js设计的集中式状态管理架构,简单的说就是vuex可以实现不同页面或者组件之间的传值,同时vuex也能够实现数据的持久化。 ...原创 2021-08-12 14:30:52 · 50 阅读 · 0 评论 -
vue 学习2
vue基础 热重载: 页面的每次改动,不需要手动去刷新,可自动刷新。 使用vuex的问题 Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据,只要一刷新页面,数据就丢失了。 解决办法:使用vuex-persist插件 vue当文字很多的时候实现…代替 只需加三行代码 overflow: hidden white-space: nowrap text-overflow: ellipsis ...原创 2021-08-16 15:34:54 · 52 阅读 · 0 评论 -
vue 动态背景图(遍历)
vue 动态背景图(遍历) 从data中读取的要用 :来绑定 要先将图片导入组件。 标签内部直接引用 src=“imgList” 标签外部 < span>{{imgList}}< span/>原创 2021-08-13 13:47:04 · 82 阅读 · 0 评论 -
Vuex 概念小结
Vuex 概念 (来源官网):Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 响应式状态储存 Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 ”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。 从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态. 从 store 实例中读取状态: store.stat原创 2021-08-12 18:23:07 · 63 阅读 · 0 评论 -
vue特殊attribute
vue特殊attribute key 使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 最常见的用例是结合 v-for: <ul> <li v-for="item in items" :key="item.id">...</li> </ul> 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用: 2.原创 2021-08-13 11:08:09 · 43 阅读 · 0 评论