- 博客(13)
- 收藏
- 关注
RSS订阅原创 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
488
原创 组件注册
<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
190
原创 Vue的可复用性和组合——自定义指令
首先先回顾一下自定义指令（自动获取焦点） <divid='app'> <inputtype="text"v-focus> </div> <script> Vue.directive('focus',{ inserted:function(el){ ...
2019-09-18 09:50:37
228
原创 Vue的可复用性和组合——mixins混入
混入：（钩子：mixins） </div> <script> var myMixin = { created:function(){ this.hello() }, methods:{ hello:function(){ console....
2019-09-18 09:45:13
274
原创 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
443
原创 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
244
原创 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
223
原创 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
272
原创 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
275
原创 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
211
原创 Vue之自定义事件
组件 <base-input @focus.native=“onFocus”> Vue.component(‘base-checkbox’,{ model:{ prop:“checked”, event:“change” }, props:{ checked:Boolean }, template:` <input type=“checkbox” v-bi...
2019-08-28 09:45:11
194
原创 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
147
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人