});
this.newLabel = '';
},
remove: function (stat) {
if (this.stats.length > 3) {
this.stats.$remove(stat); // 注意这里的$remove
} else {
alert('Can't delete more!')
}
}
}
});
七、过渡
CSS 过渡
<div v-if="show" transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则:/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
你可以在同一元素上通过动态绑定实现不同的过渡：
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
}
另外，可以提供 JavaScript 钩子:
Vue.transition('expand', { beforeEnter: function (el) {
el.textContent = 'beforeEnter'
},
enter: function (el) {
el.textContent = 'enter'
},
afterEnter: function (el) {
el.textContent = 'afterEnter'
},
enterCancelled: function (el) {
// handle cancellation
},
beforeLeave: function (el) {
el.textContent = 'beforeLeave'
},
leave: function (el) {
el.textContent = 'leave'
},
afterLeave: function (el) {
el.textContent = 'afterLeave'
},
leaveCancelled: function (el) {
// handle cancellation
}
});
八、组件
1.注册
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});// 注册
Vue.component('my-component', MyComponent);
// 创建根实例
new Vue({
el: '#example'
});
<div id="example">
<my-component></my-component>
</div>
或者直接写成：
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
// 创建根实例
new Vue({
el: '#example'
});
<div id="example">
<my-component></my-component>
</div>
2.使用prop 传递数据
实例一：
Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg }}</span>'
