<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件 全局注册</title>
</head>
<body>
<div id="box">
<my-component></my-component>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('my-component',{
template:'<div>这是我写的第一个组件！</div>'
})
new Vue({
el:'#box',
data:{
}
})
// 这样就在全局注册了一个组件，'my-component'是组件的名字，后面的{}里可以写参数，我们看到这里写了一个template，它是组件将会渲染的html内容；把组件名称当做一个标签来写即可。，Vue组件注册要写在前面，Vue实例初始化要写在后面，
</script>
</html> -->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件-局部注册</title>
</head>
<body>
<div id="box">
<my-component></my-component>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
var Child={
template:'<div>这是我写的第一个组件</div>'
}
var vm=new Vue({
el:"#box",
components:{
'my-component':Child
}
})
// 这边变量Child其实就是一个参数的对象，我们看到这里把'my-component'注册到了vm对象里面，那么<my-component>只能是在vm的作用域，也就是'#box'下起作用。
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data例子 组件</title>
</head>
<body>
<div id="box">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () { //data 后面一定要跟一个回调函数，date的属性一定要return回来
return{
counter:0
}
}
})
new Vue({
el:'#box',
})
</script>
</html>
二次视频学习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props component组件-02</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<cai></cai>
<caicai here="jinzhou"></caicai> <!--第一种方式 -->
<caicai :here="message"></caicai> <!--第二种方式：通过 v-bind方法 :here 是简写-->
</div>
</body>
<script type="text/javascript">
Vue.component('cai',{ // 全局组件 cai是组件名
template:`<div style="color:red; font-weight:bold; font-size:20px;">我是全局cai组件</div>` // 模版
})
new Vue({
el:"#app",
data:{
message:"Liaoning",
},
components:{ //局部组件定义 只能用在 id为app的元素范围内
"caicai":{ // 组件名
template:`<div style= 'color:green; font-weight:bold;'>我来自{{here}}</div>`,
//模版
props:['here'] // 支撑，支持，维持; 使倚靠在某物上;
}
}
})
//组件定义两种方法，第一种:注意全局在构造器外面定义 第二种:局部在构造器里面定义
// vue不支持 带 - 命名方式 可以小城驼峰形式（第二个单词首字母大写） 大驼峰 （从第一个单词开始，每个单词首字母都大写）
</script>
</html>