Vue入门笔记02(基础)
全局组件
Vue.component('alert', { template: '<button @click="on_click">全局组件-弹出框</button>', methods: { on_click: function () { alert('Yo'); } } });
局部组件
//定义局部组件 var Alert2 = { template: '<button @click="on_click">局部组件-弹出框2</button>', methods: { on_click: function () { alert('Yo2'); } } } var vue = new Vue({ el: '#app', components: { alert2: Alert2 //注册局部组件 } });
html模板与组件代码分离
<template id="myTitleCom"> <div> <span @mouseover="showTip" @mouseout="hideTip">{{title}}</span> <span v-if="isShow">{{tip}}</span> </div> </template>
//将组件的内容定义在html中,并在template中引用html的id Vue.component('mytitle', { template: '#myTitleCom', data: function () { return { title: 'Hello' } } });
计算属性computed
<template id="scoreTableCom"> <table> <tr><td>数学</td><td><input type="text" v-model.number="math"/> </td></tr> <tr><td>英语</td><td><input type="text" v-model="english"/></td></tr> <tr><td>物理</td><td><input type="text" v-model="physics"/></td></tr> <tr><td>总分</td><td><input type="text" v-model="sum"/></td></tr> <tr><td>平均</td><td><input type="text" v-model="average"/></td></tr> </table> </template>
Vue.component('score-table', { template: '#scoreTableCom', data: function () { return { math: 90, english: 80, physics: 40 } }, computed: { //计算属性使用 sum: function () { return this.math + this.english + this.physics; }, average: function () { return (this.sum/3).toFixed(2); } } });
管道过滤filter
<template id="priceCom"> <div> <span>{{price | currency}}</span> - <span>{{price*8 | currency('usd')}}</span> </div> </template>
Vue.component('price', { template: '#priceCom', data: function () { return { price: 10 } } }); Vue.filter('currency', function (val, unit) { val = val || 0; unit = unit || '元'; return val + ' ' + unit; });
自定义指令directive
<template id="cardCom"> <div> <div v-pos:red.top.right=card1.pinned class="card"> <button @click="card1.pinned=!card1.pinned">钉住/取消</button> <h3>card1:{{card1.pinned}}</h3> This a card content ! </div> <div v-pos:blue.bottom.right=card2.pinned class="card"> <button @click="card2.pinned=!card2.pinned">钉住/取消</button> <h3>card2:{{card2.pinned}}</h3> This a card content ! </div> </div> </template>
//定义组件 Vue.component('card', { template: '#cardCom', data: function () { return { card1: {pinned: true}, card2: { pinned: true} } } }); // 定义指令 Vue.directive('pos', function (el, binding) { var pinned = binding.value; var position = binding.modifiers; var warning = binding.arg; if(pinned){ el.style.position = 'fixed'; for(key in position){ el.style[key] = '10px'; } }else{ el.style.position = 'static'; } if(warning) { el.style.color = warning; } });
混合使用mixins
var base = { data: function() { return { visible: false } }, methods: { show: function () { this.visible = true; }, hide: function() { this.visible = false; } } } Vue.component('mix', { template: '<div>' + '<h4 @mouseover="show" @mouseout="hide">mixins使用-hover me</h4>' + '<span v-if="this.visible">test</span>' + '</div>', mixins: [base] });
插槽slot
Vue.component('panel', { template: '#panelCom' });
<template id="panelCom"> <div class="panel"> <div class="title"> <slot name="title">default title</slot> </div> <div class="content"> <slot name="content">default content</slot> </div> <div class="footer"> <slot name="footer">default footer</slot> </div> </div> </template>
<panel>
<div slot="content">this is the custom content !</div>
</panel>
.panel{border:1px solid #ccc;padding:5px; width:220px;} .panel .title{border-bottom: 1px solid #ccc;} .panel .footer{border-top: 1px solid #ccc;}
平级组件通信
var Event = new Vue(); Vue.component('Asay', { template: '<div>我说:<input @keyup="on_change" v-model="a_said"></div>', data: function () { return { a_said: '' } }, methods: { on_change: function () { Event.$emit('a-say-something', this.a_said); } } }); Vue.component('Bsay', { template: '<div>A说:{{a_said}}</div>', data: function () { return { a_said: '' } }, mounted: function () { var This = this; Event.$on('a-say-something', function (data) { This.a_said = data; }) } });