VUE - 随笔分类 - 四海潮生

vue组件6 使用vue添加样式

摘要：class绑定,内联样式数组语法 :class="[stylename]" js:data{stylename:classname} 对象语法:class={stylename:true } 用vue-loader实现Scoped CSS 在组件的style标签，上使用scoped,在其中定义的样阅读全文

posted @ 2019-12-02 22:35 四海潮生阅读(906) 评论(0) 推荐(0)

vue组件5 组件和v-for指令

摘要：使用v-for遍历一个数组的时候，并且给定的数组变化时vue不会重复生成所有的元素，而是智能的找到需要更改的元素，并只改变这些元素 key属性可以告诉vue数组中的每个元素都应该与页面上的哪个元素相关联，key属性的默认值为元素再循环时的索引需要注意的是，如果要删除数组中的元素，一般不要使用索引，阅读全文

posted @ 2019-12-01 23:33 四海潮生阅读(1121) 评论(0) 推荐(0)

vue组件4 利用slot将内容传递给组件

摘要：除了将数据作为prop传入到组件中，vue也允许传入HTML 父组件中的子组件：<custom-button>点我<custom-button/> custom-button子组件：<span> <slot></slot> </sapn> 会生成<span>点我</span> 不仅可以传入字符串，也阅读全文

posted @ 2019-12-01 22:37 四海潮生阅读(2033) 评论(0) 推荐(0)

VUE组件3 数据流和.sync修饰符

摘要：单向数据流：数据通过prop从父组件传递到子组件中，当父级组件中的数据更新时，传子组件也会更新，但不能在子组件中修改。防止子组件在无意中修改，改变父级组件状态然而，双向数据绑定在某些情况下有用。如果想要使用双向数据绑定，可以使用一个修饰符来实现：.sync修饰符。这只是一个语法糖例：<count 阅读全文

posted @ 2019-11-27 23:01 四海潮生阅读(2562) 评论(0) 推荐(0)

VUE组件2数据传递

摘要：传递数据 prop验证除了传递数组，也可以传递对象 Vue.component('test',{ props:{ price:Number, unit: String } }) 如果price不是数字，vue就会抛出错误，prop可以是多个类型中的一个，可以为他传递一个包含所有有效类型的数组，例：阅读全文

posted @ 2019-11-26 22:55 四海潮生阅读(209) 评论(0) 推荐(0)

VUE组件1

摘要：1.组件基础通过import引入.vue的文件，在componet中注册，在template中使用。 2.数据，方法和计算属性注意点：因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中阅读全文

posted @ 2019-11-25 22:59 四海潮生阅读(141) 评论(0) 推荐(0)

动画 VUE基础回顾8

摘要：过渡和动画使用<transition> 组件包裹例： <transition name="fade"> <div v-if="true">过渡动画</div> </transition> style：.fade-enter-active, .fade-leave-active {transiti 阅读全文

posted @ 2019-11-24 23:21 四海潮生阅读(205) 评论(0) 推荐(0)

自定义指令 VUE基础回顾7

摘要：vue除了有v-if等内置指令，我们也可以创建自定义指令。例：我们可以实现一个可以每隔一秒闪烁的节点，类似于<blink>标签的行为。添加一个指令类似于添加一个过滤器，可以将他传入vue实例或组件的directives属性，或者使用vue.directive()注册一个全局指令。传入指令的名字以及阅读全文

posted @ 2019-11-23 23:54 四海潮生阅读(191) 评论(0) 推荐(0)

VUE基础回顾6

摘要：1.ref ref可以直接访问元素，而不需要使用querySelector或者其他dom节点的原生方法。 <div ref = "box"></div> 在js中，这个原生会被存到this.$ref这个对象中，对应的键名就是为这个元素的ref属性设置的值使用this.$ref.box访问这个元素阅读全文

posted @ 2019-11-22 23:04 四海潮生阅读(725) 评论(0) 推荐(0)

VUE过滤器基础回顾5

摘要：过滤器是一种在模板中处理数据的便捷方式，特别适合对字符串和数组进行简易显示 <div id="app"> <p>商品1花费{{oneCost | fromatCost}}</p> <p>商品2花费{{towCost | fromatCost}}</p> <p>商品3花费{{treCost | fro 阅读全文

posted @ 2019-11-21 22:59 四海潮生阅读(207) 评论(0) 推荐(0)

vue侦听器基础4

摘要：侦听器使用方式：设置需要侦听的data里的属性名就可以了 new Vue({ el:"#app", data:{ count:0 }, watchers:{ count(){ //this.count 发生了改变 } } }) 侦听器适合异步操作监听data对象中某个对象的属性 'count.t 阅读全文

posted @ 2019-11-20 22:58 四海潮生阅读(158) 评论(0) 推荐(0)

VUE回顾基础3

摘要：1.方法在vue模板里函数被定义为方法来使用，将函数放在methods对象里，作为一个属性，就可以在模板里使用它 this：在方法中this指向该方法所属的组件，可以使用this方文档data对象的属性和其他方法。this.属性/方法名即可 2.计算属性计算属性介于data的对象和方法之间，可阅读全文

posted @ 2019-11-19 23:18 四海潮生阅读(153) 评论(0) 推荐(0)

VUE基础回顾2

摘要：1.响应式 vue修改了每个添加到data上的对象，当该对象发生变化时vue会收到通知，从而实现响应式。对象的每个属性都会被替换为getter,setter方法。有两种方式实现data对象的监听 (1)脏检查：通过存储这个对象副本，然后比较两者，但这种方法并不高效。 (2)使用Objectf.de 阅读全文

posted @ 2019-11-18 23:01 四海潮生阅读(111) 评论(0) 推荐(0)

一、VUE基础回顾1

摘要：1.v-if和v-show v-if 和v-show都可以显示和隐藏元素；　区别：（1）v-if初始值为false那么这个元素不会被渲染，v-show不管初始值为何值都会被渲染（2）v-if是控制DOM元素是否插入，v-show是控制css的display属性（3）v-if适合隐藏尚未加载的内阅读全文

posted @ 2019-11-17 23:49 四海潮生阅读(241) 评论(0) 推荐(0)

四海潮生

随笔分类 - VUE

公告