add：Vue相关：定义和注册组件

2018-04-22 23:23:01 +08:00
parent d73acce6df
commit e4296c62a3
4 changed files with 589 additions and 9 deletions
--- a/21-Vue基础/04-Vue组件.md
+++ b/21-Vue基础/04-Vue组件.md
@@ -1,7 +1,192 @@


-## 组件
+## 前言

 组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。


+## 组件的定义和注册
+
+### 写法一
+
+写法一：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。
+
+代码举例：
+
+```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.5.16.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <account> </account>
+    </div>
+
+    <script>
+        //第一步：定义组件
+        var myAccount = Vue.extend({
+            template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>'    // template 是 Vue 中的关键字，不能改。
+        });
+        //第二步：注册组件
+        Vue.component('account', myAccount);
+
+        new Vue({
+            el: '#app'
+        });
+    </script>
+</body>
+
+</html>
+```
+
+上方代码中，绿框部分的内容，就是我想定义的整个组件。
+
+运行结果如下：
+
+20180422_2230.png
+
+代码截图如下：
+
+20180422_2223.png
+
+上图中，注意两点：
+
+1、红框部分，要保证二者的名字是一致的。
+
+2、绿框部分，一定要用一个大的 div 包裹起来。如果我写成下面这样，就没有预期的效果：
+
+```
+            template: '<h2>登录页面</h2> <h3>注册页面</h3>'
+```
+
+结果如下：（并非预期的效果）
+
+20180422_2232.png
+
+
+### 写法二
+
+
+写法二：Vue.component方法定义、注册组件（一步到位）。
+
+代码如下：
+
+```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.5.16.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <account> </account>
+    </div>
+
+    <script>
+
+        //定义、注册组件
+        Vue.component('account', {
+            template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>'
+        });
+
+        new Vue({
+            el: '#app'
+        });
+    </script>
+</body>
+
+</html>
+```
+
+代码截图如下：
+
+20180422_2251.png
+
+
+上图中，同样注意两点：
+
+1、红框部分，要保证二者的名字是一致的。
+
+2、绿框部分，一定要用一个大的 div 包裹起来。如果我写成下面这样，就没有预期的效果：
+
+```
+            template: '<h2>登录页面</h2> <h3>注册页面</h3>'
+```
+
+结果如下：（并非预期的效果）
+
+20180422_2232.png
+
+
+
+### 写法三【荐】
+
+写法三：将组件内容定义到template标签中去。
+
+代码如下：
+
+```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.5.16.js"></script>
+</head>
+
+<body>
+    <!-- 定义模板 -->
+    <template id="myAccount">
+        <div>
+            <h2>登录页面</h2>
+            <h3>注册页面</h3>
+        </div>
+    </template>
+
+    <div id="app">
+        <account> </account>
+    </div>
+
+    <script>
+
+        //定义、注册组件
+        Vue.component('account', {
+            template: '#myAccount'
+        });
+
+        new Vue({
+            el: '#app'
+        });
+    </script>
+</body>
+
+</html>
+```
+
+
+
+代码截图如下：
+
+20180422_2256.png
+
+写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了`<template>`标签中而已，这样有利于 html 标签的书写。
+
+
+