源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue組件</title>
<script src="vue.js"></script>
<style type="text/css">
body {
padding: 15px;
}
</style>
<link rel="stylesheet">
</head>
<body>
<div id="app">
<praise-component title="贊↑" pclass="btn btn-info"></praise-component>
<praise-component title="踩↓" pclass="btn btn-danger"></praise-component>
</div>
<!-- 直接用這個(gè)標(biāo)簽寫(xiě)是不會(huì)被 html 去解析的 但是可以再下面的 vue 中引用這個(gè)模板 -->
<template id="praise-template">
<h3>{{ title }}</h3>
<input @click="updateCount" class="{{ pclass }}" type="button" value="{{ count }}">
</template>
<script>
Vue.component('praise-component',{
props:['title','pclass'],//給這個(gè)組件添加默認(rèn)的屬性，使其可以調(diào)用
template:"#praise-template",
data:function() {
return {
//return 出去一個(gè)值 這樣的話每個(gè)組件上引用的數(shù)據(jù)就不會(huì)是同一個(gè)值了 雖然初始值看起來(lái)是一樣的
count:0
}
},
methods:{
updateCount:function(){
this.count ++;
}
}
})
new Vue({
el: "#app"
});
</script>
</body>
</html>
- 需要注意的是如果組件的名稱(chēng)寫(xiě)成了駝峰式的命名 vue 默認(rèn)會(huì)將其識(shí)別為全部是小寫(xiě)的炉峰，所以建議是使用連詞符來(lái)進(jìn)行命名 如果是非得使用駝峰的話需要使用一個(gè) npm 包
decamelize 來(lái)進(jìn)行轉(zhuǎn)換 -- 它可以將你寫(xiě)的駝峰式命名的組件名稱(chēng)轉(zhuǎn)換成連詞的那種寫(xiě)法
- 可以在 chrome 瀏覽器中配合 vue 擴(kuò)展程序?qū)崟r(shí)的看到使用的組件以及對(duì)應(yīng)組件其數(shù)據(jù)的變化
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
