随笔分类 - Vue
摘要：<style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition:opacity 1s; } </style> <div id='app'> <transition> <div v-if='
阅读全文
摘要：<style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style> <div id='app'> <transition-group> <div
阅读全文
摘要：多个元素的过渡 <style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-acitve,.v-leave-active{ opacity: opacity 1s; } </style> <div id='app'> <transition> <div
阅读全文
摘要：vue里面除了用css写动画，还可以用js写动画，vue的transition中，定义了几个动画钩子 第一个动画钩子：@before-enter <div id='app'> <transition @before-enter='handleBeforeEnter' > <div v-if='sho
阅读全文
摘要：在上次的动画中，在显示和隐藏有动画效果，但是，刷新页面的时候，第一次的显示没有动画效果 需求：刷新页面的时候也有动画效果 <transition name='fade' appear enter-active-class='animated swing' leave-active-class='an
阅读全文
摘要：<style> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5) } 100% { transform: scale(1); } } .fade-enter-active{ transform
阅读全文
摘要：显示原理： <transition name='fade'> <div v-if='show'>hello world</div> </transition> 当一个元素被transition包裹了之后，vue会自动当分析元素的css样式，然后构建一个动画的流程，在动画即将被执行的一瞬间，vue会在
阅读全文
摘要：场景，点击某个按钮，两个子组件交替显示 <div id='root'> <child-one v-if='type "child-one"'></child-one> <child-two v-if='type "child-two"'></child-two> <button @click='ha
阅读全文
摘要：作用域插槽 <div id='root'> <child> <template slot-scope='props'> <h1>{{props.item}}</h1> </template> </child> </div> <script> Vue.component('child',{ data:
阅读全文
摘要：插槽(slot)这个概念非常重要 插槽的使用场景1：在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell</p>'></child> </div> <script> Vue.component('child',{ props:['cont
阅读全文
摘要：当父组件要给孙子，或者孙子与孙子要传值的时候怎么传，一层一层传太麻烦了，vuejs提供了一中模式叫发布订阅模式（观察者模式，bus，总线）来处理非父子组件间的传值 <div id='root'> <child content = 'Dell'></child> <child content = 'L
阅读全文
摘要：给组件绑定事件，该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div> <script> Vue.component('child',{ template:'<div>hello</div>' }) var vm
阅读全文
摘要：父组件向子组件传递一些参数，那么子组件有权对这些参数进行一个校验，这个就是组件参数校验 需求：父组件传递过来的必须是个字符串，这个要怎么去校验呢 <div id='root'> <child content='hello world'></child> </div> <script> Vue.com
阅读全文
摘要：在vue中，父组件往子组件传递参数都是通过属性的形式来传递的 <div id='root'> <counter :count = '1'></counter> <counter :count = '2'></counter> </div> <script> var counter = { props
阅读全文
摘要：is属性 <div id='root'> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> </div> <script> Vue.component('row',{ template:'<tr><td>th<
阅读全文
摘要：<div id='root'> <div v-for='(item,key,index) of userInfo'> {{item}}--{{key}}--{{index}} </div> </div> <script> var vm = new Vue({ el:'#root', data:{ u
阅读全文
摘要：为了提升循环的性能，我们会给循环加上一个唯一的key值，这个key值一定是唯一的 <div id='root'> <div v-for='(item,index) of list' :key='index'> {{item}}--{{index}} </div> </div> <script> va
阅读全文
摘要：<div id='root'> <div v-if='show'>helle world</div> <button @click='handleClick'>toggle</button> </div> <script> new Vue({ el:'#root', data:{ show:true
阅读全文
摘要：第一种：class的对象绑定，class引用的是一个对象，这个对象的属性显示不显示由变量决定 <style> .activated{ color:red; } </style> <div id='app'> <div @click = 'handleClick' :class='{activated
阅读全文
摘要：当页面获取某个数据的时候，先会在data里面找，找不到就会去计算属性里面找，在计算属性里面，获取的时候会自动去执行get方法 <div id='app'> {{fullName}} </div> <script> var vm = new Vue({ el:'#app', data:{ firstN
阅读全文