一.公有组件以及组件的使用和特点
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../vue2.4.4.js"></script>
9 </head>
10
11 <body>
12 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
13 <template id="tlogin">
14 <div>
15 用户名：<input type="text"><br>
16 密 码：<input type="text">
17 </div>
18 </template>
19 <!-- <script type="x-template" id="tlogin">
20 <div>
21 用户名：<input type="text"><br>
22 密 码：<input type="text">
23 </div>
24 </script> -->
25
26 <div id="app">
27 <vue-login></vue-login>
28 </div>
29 </body>
30 <script>
31 //公有组件：
32 //注意：
33 // 1)所有的模板代码都都必须有一个根标签
34 // 2)如果组件的名称如首字母大写：
35 // a.所有的字母全部小写
36 // b.内部如果也有大写将大写将改为小写并且在这个字母之前加上一个“-”
37
38
39 //1.0 将组件的定义和注册分为两步来执行
40 // // 定义格式：
41 // // Vue.extend({
42 // // template: "组件的html代码"
43 // // });
44 // var login = Vue.extend({
45 // template: "<h1>我是login</h1>"
46 // });
47 // // 注册：
48 // // 参数一：当前注册组件的名称
49 // // 参数二：组件对象
50 // // Vue.component("login",login)//向Vue中注册组件：
51 // Vue.component("login",login);
52
53 //2.0组件的定义和注册一步到位
54 //使用组件时一定要给组件加上根标签
55 // Vue.component("login",{
56 // template: "<div>用户名：<input type='text'><br/>密 码：<input type='text'></div>"
57 // });
58
59 //3.0组件的使用三：
60 Vue.component("VueLogin",{
61 template: "#tlogin"
62 });
63
64 //4.0组件的使用四：
65 // Vue.component("login",{
66 // template: "#tlogin"
67 // });
68
69 // 实例化vue对象（MVVM中的View Model）
70 new Vue({
71 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
72 el:'#app'
73 })
74 </script>
75 </html>
二.给组件绑定事件和数据
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../vue2.4.4.js"></script>
9 </head>
10
11 <body>
12 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
13 <template id="reg">
14 <div>
15 <input type="text" v-model="name">
16 <input type="text" v-model="age">
17 <button @click="getValue">注册</button>
18 </div>
19 </template>
20 <div id="app">
21 <register></register>
22 </div>
23
24 </body>
25
26 <script>
27 //定义和注册
28 Vue.component("register",{
29 template:"#reg",
30 data:function() {
31 return {
32 name:"我是组件中的name属性",
33 age:18
34 }
35 },
36 methods:{
37 getValue:function() {
38 alert("我被点击了");
39 }
40 }
41 });
42
43 // 实例化vue对象（MVVM中的View Model）
44 new Vue({
45 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
46 el:'#app',
47 data:{
48 // 数据 （MVVM中的Model）
49 },
50 methods:{
51
52 }
53 })
54 </script>
55 </html>
三.私有组件 components
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../vue2.4.4.js"></script>
9 </head>
10
11 <body>
12 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
13 <template id="tlogin">
14 <div>
15 用户名<input type="text"><br>
16 密码: <input type="text">
17 </div>
18 </template>
19 <div id="app">
20 <login></login>
21 </div>
22
23 </body>
24
25 <script>
26
27 // 实例化vue对象（MVVM中的View Model）
28 new Vue({
29 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
30 el:'#app',
31 data:{
32 // 数据 （MVVM中的Model）
33 },
34 components:{ //私有组件
35 "login":{
36 template:"#tlogin"
37 }
38 }
39 })
40 </script>
41 </html>
四.子组件
<!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="../vue2.4.4.js"></script>
</head>
<body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<div id="app">
<account></account>
<login></login><!-- 会报错，因为login是account组件的私有组件 -->
</div>
</body>
<script>
// 定义组件
Vue.component("account",{
template:"<div>account<login></login><register></register></div>",
components:{
"login":{
template:"<div>login</div>",
},
"register":{
template:"<div>register</div>",
}
}
});
// 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
},
methods:{
}
})
</script>
</html>
五.使用component中的is来实现组件切换
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../vue2.4.4.js"></script>
9 </head>
10
11 <body>
12 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
13 <template id="account">
14 <div>
15 <a href="#" @click="componentId='login'">登录</a>
16 <a href="#" @click="componentId='register'">注册</a>
17 <!-- :is 相当于给component绑定组件，绑定is后面的值对应的组件 -->
18 <component :is="componentId"></component>
19 </div>
20 </template>
21 <div id="app">
22 <account></account>
23 </div>
24 </body>
25 <script>
26 Vue.component("account",{
27 template:"#account",
28 // 在父组件中添加一个componentId的属性，将来给上面模板中的component使用
29 data:function() {
30 return {
31 componentId:"login"
32 }
33 },
34 // methods:{
35 // register:function() {
36 // this.componentId = "register";
37 // }
38 // },
39 components:{
40 "login":{
41 template:"<span>login</span>"
42 },
43 "register":{
44 template:"<span>register</span>"
45 }
46 }
47 });
48 // 实例化vue对象（MVVM中的View Model）
49 new Vue({
50 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
51 el:'#app',
52 data:{
53 // 数据 （MVVM中的Model）
54 },
55 methods:{
56 }
57 })
58 </script>
59 </html>
六.父组件传值给子组件
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="../vue2.4.4.js"></script>
10 </head>
11
12 <body>
13 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
14 <template id="account">
15 <div>account<br/>
16 <login :aname="name"></login>
17 </div>
18 </template>
19 <div id="app">
20 <account></account>
21 </div>
22
23 </body>
24
25 <script>
26 Vue.component("account", {
27 template: "#account",
28 data: function () {
29 return {
30 name: "account中的name"
31 }
32 },
33 components: {
34 "login": {
35 template: "<div>子组件输出：{{aname}}</div>",
36 props:["aname"] // 这个是用来接受将来父组件传递过来的参数的数据
37 },
38
39 }
40 });
41
42 // 实例化vue对象（MVVM中的View Model）
43 new Vue({
44 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
45 el: '#app',
46 data: {
47 // 数据 （MVVM中的Model）
48 },
49 methods: {
50
51 }
52 })
53
54 </script>
55
56 </html>
七.子组件传值给父组件
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="../vue2.4.4.js"></script>
10 </head>
11
12 <body>
13 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
14 <template id="account">
15 <div>
16 {{name}}<br/>
17 <login @loginkey="getV"></login>
18 </div>
19 </template>
20 <div id="app">
21 <account></account>
22 </div>
23
24 </body>
25
26 <script>
27 Vue.component("account", {
28 template: "#account",
29 data: function () {
30 return { name: "" }
31 },
32 methods: {
33 getV: function (value) {
34 //接收子组件传递过来的参数
35 this.name = value;
36 }
37 },
38 components: {
39 "login": {
40 template: "<div><button @click='sendV'>点我将name传给父元素</button></div>",
41 data: function () {
42 return {
43 name: "login中的name"
44 }
45 },
46 methods: {
47 sendV: function () {
48 // 我们要将子组件的name属性设置给父组件
49 // 这个send方法需要一个键值对
50 .name);
51 }
52 }
53 }
54
55 },
56
57
58 });
59 // 实例化vue对象（MVVM中的View Model）
60 new Vue({
61 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
62 el: '#app',
63 data: {
64 // 数据 （MVVM中的Model）
65 },
66 methods: {
67
68 }
69 })
70
71 </script>
72
73 </html>