一、组件component
1.什么是组件?
组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。
组件是自定义元素（对象）
2.定义组件的方式
方式1：先创建组件构造器，然后由组件构造器创建组件。（不常用）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义组件的两种方式</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
<hello></hello>
</div>
</body>
<script type="text/javascript">
// 1.使用Vue.extend()创建一个组件构造器
var MyComponent = Vue.extend({
template:"<h3>hello world</h3>"
})
// 2.使用Vue.component(标签名,组件构造器)根据组件构造器来创建组件
Vue.component('hello',MyComponent);
new Vue({
el:'#itany'
})
</script>
</html>
方式2:直接创建组件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义组件的两种方式</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
<hello></hello>
<world></world>
</div>
</body>
<script type="text/javascript">
// 1.使用Vue.extend()创建一个组件构造器
var MyComponent = Vue.extend({
template:"<h3>hello world</h3>"
})
// 2.使用Vue.component(标签名,组件构造器)根据组件构造器来创建组件
Vue.component('hello',MyComponent);
// 方式2：直接创建组件
Vue.component('world',{
template:'<h1>你好，世界</h1>'
})
new Vue({ //这是一个跟组件
el:'#itany'
})
</script>
</html>
网友评论