Web/21-Vue基础/04-Vue组件.md
2018-04-22 23:23:01 +08:00

193 lines
3.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 前言
组件`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 标签的书写。