源码
<!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 href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" 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>
<!-- 直接用这个标签写是不会被 html 去解析的 但是可以再下面的 vue 中引用这个模板 -->
<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'],//给这个组件添加默认的属性，使其可以调用
template:"#praise-template",
data:function() {
return {
//return 出去一个值 这样的话每个组件上引用的数据就不会是同一个值了 虽然初始值看起来是一样的
count:0
}
},
methods:{
updateCount:function(){
this.count ++;
}
}
})
new Vue({
el: "#app"
});
</script>
</body>
</html>
- 需要注意的是如果组件的名称写成了驼峰式的命名 vue 默认会将其识别为全部是小写的，所以建议是使用连词符来进行命名 如果是非得使用驼峰的话需要使用一个 npm 包
decamelize 来进行转换 -- 它可以将你写的驼峰式命名的组件名称转换成连词的那种写法
- 可以在 chrome 浏览器中配合 vue 扩展程序实时的看到使用的组件以及对应组件其数据的变化
