Vue
执疚
这个作者很懒,什么都没留下…
展开
-
VUE组件
基础组件实例:var app = new Vue({el:"#app",data:{}})注意:由于组件是可复用性的,名字相当于是自己自定义的标签,它也有着data、computed、watch、methods以及生命周期钩子(除el外)在组件中,data必须是函数可以通过prop向子组件传递数据var app = new Vue({el:"#app",da...原创 2019-08-20 11:30:24 · 99 阅读 · 0 评论 -
组件注册
<div id='app'><my-component-name> </my-component-name></div><script>Vue.component("myComponentName",{template:"<div>This is my-component-name</div>"})...原创 2019-09-18 09:53:51 · 122 阅读 · 0 评论 -
Vue的可复用性和组合——自定义指令
首先先回顾一下自定义指令(自动获取焦点)<divid='app'><inputtype="text"v-focus></div><script>Vue.directive('focus',{inserted:function(el){...原创 2019-09-18 09:50:37 · 163 阅读 · 0 评论 -
Vue的可复用性和组合——mixins混入
混入:(钩子:mixins)</div><script> var myMixin = { created:function(){ this.hello() }, methods:{ hello:function(){ console....原创 2019-09-18 09:45:13 · 200 阅读 · 0 评论 -
Vue的状态过渡
根据TweenLite属性进行的动画过渡的操作颜色的过渡变化: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style> .color-preview{ display:inli...原创 2019-09-17 10:21:22 · 378 阅读 · 0 评论 -
Vue的动画过渡
.fade-enter-active,.fade-leave-active{transition:opacity 0.5s;}.fade-enter,.fade-leave-to{opacity: 0;}hello}})transition标签中会对其中的元素进行处理上述的例子style中的事件会对其中进行过渡动画过渡的类名包括:v-enter;v-enter...原创 2019-09-17 10:20:47 · 102 阅读 · 0 评论 -
Vue的处理边界-监听_循环引用和模板
{{ counter }}var app = new Vue({el:"#app",data:{counter:0},mounted:function(){// this.KaTeX parse error: Expected 'EOF', got '}' at position 68: …,value);// })}̲,methods:{add…emit(“added”,...原创 2019-09-17 10:20:12 · 146 阅读 · 0 评论 -
Vue的父子元素和依赖注入
var app = new Vue({el:"#app",data:{foo:1},computed:{bar:function(){return “bar”}},methods:{baz:function(){return “baz”},onClickMe:function(){console.log(this.$refs);let mybtn=this.myb...原创 2019-09-17 10:19:39 · 212 阅读 · 0 评论 -
Vue之动态组件和异步组件
currentTabComponent{{currentTabComponent}}Vue.component(‘Tab02’,{template:`This is Tabo2`})var app = new Vue({el:"#app",data:{currentTabComponent:“Tab01”},methods:{changeTab:function(Tab...原创 2019-09-17 10:19:05 · 197 阅读 · 0 评论 -
Vue之插槽
Vue.component(‘navigation-link’,{props:[“url”],template:<a v-bind:href="url"> <slot></slot> </a>})var app = new Vue({el:"#app"})slot插槽的基本用法,如果没有写插槽的话,传入他的内容都会被抛弃调,...原创 2019-09-17 10:18:19 · 150 阅读 · 0 评论 -
Vue之自定义事件
组件<base-input @focus.native=“onFocus”>Vue.component(‘base-checkbox’,{model:{prop:“checked”,event:“change”},props:{checked:Boolean},template:`<inputtype=“checkbox”v-bi...原创 2019-08-28 09:45:11 · 131 阅读 · 0 评论 -
vue之prpos
<!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-Compa...原创 2019-09-18 09:55:09 · 397 阅读 · 0 评论