mirror of
https://github.com/qianguyihao/Web.git
synced 2024-10-31 04:54:46 +08:00
3.6 KiB
3.6 KiB
前言
组件Component
是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
组件的定义和注册
写法一
写法一:使用Vue.extend方法定义组件,使用 Vue.component方法注册组件。
代码举例:
<!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方法定义、注册组件(一步到位)。
代码如下:
<!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标签中去。
代码如下:
<!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 标签的书写。