vue组件常用声明方式
一.前言
这是自己重新写的一个，感觉以前的太写了很多不必要的方式 实际当中基本不会用的 所以自己写了一个常用的组件什么方式 更加的通俗易懂
二.代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件练习</title>
<!-- 引入vue.js -->
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{msg}} -->
<!-- 全局组件 -->
<my-div></my-div>
<!-- 局部组件 -->
<my-div2></my-div2>
<!-- //templata 注册全局组件 -->
<clj></clj>
<!-- //templata 注册局部组件 -->
<clj2></clj2>
</div>
<!-- //templata 注册全局组件 -->
<template id="my-template">
<div>
我是template全局组件
</div>
</template>
<!-- //templata 注册全局组件 -->
<template id="my-template2">
<div>
我是template局部组件
</div>
</template>
<script>
// 全局组件
Vue.component('clj',{template:"#my-template"})
Vue.component("my-div",{template:`<div>我是全局组件</div>`})
new Vue({
el:'#app',
data(){
return{
msg:'我不爱大海和森林'
}
},
//局部组件
components:{
'my-div2':{template:`<div>我是局部组件</div>`},
'clj2':{template:"#my-template2"}
}
})
</script>
</body>
</html>
