这次记录的是vue组件。
使用vue创建自定义组件
html
<div id="seg1">
<alert></alert>
</div>
js
//在这里注册了一个组件，包括它的内部元素，和方法等
var Alert={ template:'<button @click="on_click">弹弹弹</button>', methods:{ on_click:function(){ alert('Yo.'); } } };
//这个一定要写，不然不知道组件绑定在哪个元素上
new Vue({
el: '#seg1',
components:{
alert:Alert
}
});
实现点赞效果的组件
<style type="text/css"> .liked{ background: deeppink; } </style> <body> <div id="app"> <like></like> </div>
//组件like由一个按钮组 成，按钮上绑定点击事件，点击后点赞数+1。
liked属性用于判断当前是否已点赞，默认属性为false，点击事件触发后，先会判断是否已点赞，之后进行相应操作。
Vue.component('like',{ template:'<button :class="{liked:liked}" @click="add_like()">赞 {{like_count}}</button>', data:function(){ return{ like_count:10, liked:false, } }, methods:{ add_like:function(){ if(!this.liked) this.like_count++; else this.like_count--; this.liked=!this.liked;//修改liked的状态 } } }); new Vue({ el: '#app', });