1、组件里的数据以DATA函数的形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title-hellovuejs</title>
</head>
<body>
<div id ="app">
<!-- 3.使用组件 -->
<my_cpn1></my_cpn1>
<my_cpn2></my_cpn2>
</div>
<!-- 1.模板分离写法1 ,script标签,类型必须是text/x-template-->
<script type="text/x-template" id="cpn1">
<div>
<h2>我是标题</h2>
{{cpmessage1}}
<p>这是内容,模板分离写法1,script标签</p>
</div>
</script>
<!-- 2.模板分离写法2 ,推荐,使用template标签-->
<template id="cpn2">
<div>
<h2>我是标题2</h2>
{{cpmessage2}}
<p>这是内容,模板分离写法2,使用template标签</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//1.通过语法糖创建全局组件,模板分离写法1
//注意,使用了tab键上面的反斜杠``,因而可以换行定义
Vue.component('my_cpn1',{
template: '#cpn1',
data(){
return {
cpmessage1: '消息data11'
}
}
});
//root组件
const chen1 = new Vue({
el: '#app', //用于挂载要管理的元素
data:{//定义数据
message:'你好啊,helloword',
isShow: true
},
//2 以下语法糖形式直接创建是局部组件的用法
components:{
my_cpn2: {
template:'#cpn2',
data(){
return {
cpmessage2: '消息data22'
}
}
}
}
})
</script>
</body>
2、计数组件的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title-hellovuejs</title>
</head>
<body>
<div id ="app">
<!-- 3.使用组件 -->
<my_cpn1></my_cpn1>
<my_cpn1></my_cpn1>
</div>
<!-- 模板分离写法2 ,推荐,使用template标签-->
<template id="cpn1">
<div>
<h2>当前计数:{{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//1.通过语法糖创建全局组件,模板分离写法1
//注意,使用了tab键上面的反斜杠``,因而可以换行定义
Vue.component('my_cpn1',{
template: '#cpn1',
data(){
return {
counter: 0
}
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
});
//root组件
const chen1 = new Vue({
el: '#app', //用于挂载要管理的元素
data:{//定义数据
message:'你好啊,helloword',
}
})
</script>
</body>