一.公有組件以及組件的使用和特點
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 this.$emit('loginkey', this.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>
