06vue 第4天 nodejs10 组件的基本使用_综合

HTML

    <div id="app"><!-- 主键名 --><zhujian></zhujian></div>

JS：全局组件

<script>// 全局组件 Vue.component('zhujian',{//里面存 html代码template:'<h2>我是最帅的男人</h2>'});var app = new Vue({el:'#app'});
</script>

JS:局部组件

<script>// 全局组件 /* Vue.component('zhujian',{//里面存 html代码template:'<h2>我是最帅的男人</h2>'}); */var app = new Vue({el:'#app',components:{'myzhujian':{template:'<i>卫星是最帅的</i>'}},});
</script>

使用规范

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./vue.js"></script>
</head><body><div id="app"><!-- 主键名 --><!-- 碰到大写加杠 --><my-zhujian></my-zhujian></div>
</body>
<script>// 全局组件 /* Vue.component('zhujian',{//里面存 html代码template:'<h2>我是最帅的男人</h2>'}); */var app = new Vue({el:'#app',// 定义私有（局部）组件components:{// 组件的名字// 使用时 直接在Html中将组件的名字当做标签名字使用即可// template 中的标签内容 必须有且只有一个根节点'myZhujian':{// 组件的内容template:'<div><i>卫星是最帅的</i><s>我不承认</s></div>'}},});
</script></html>