<!--
* @Author: your name
* @Date: 2020-03-30 21:56:55
* @LastEditTime: 2020-03-30 22:28:13
* @LastEditors: Please set LastEditors
* @Description: 組件
* @FilePath: \x\04.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- template 入口組件 -->
<!-- 局部組件 全局組件 -->
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 聲名 掛載 使用
// 局部組件
var App = {
data() {
return {
}
},
methods: {
clickButton(e) {
console.log(this)
}
},
template: '<button @click="clickButton"></button>'
};
console.log(App)
var vm = new Vue({
el: "#app",
data() {
return {
}
},
// 掛載子組件
components: {
App
},
// 父組件可以直接使用
template: '\
<App></App>\
'
});
console.log(vm)
</script>
</body>
</html>
Vue學習(4)局部組件
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
vue在history的路由模式下，刷新後界面報404
需要配置下nginx，位置在/conf/vhosts/*.conf，將當前目錄下的所有conf都修改一下最好 server { listen 80; server_name agwenb