Vue-组件1 创建全局组件方式
注意:
- 驼峰命名 在调用的时候在每个大写字母(除了首字母)前面加 -,大写字母可改成小写来调用
- 小写命名直接调用
- 组件必须要有唯一了根元素
创建方式1 [Vue.extend+Vue.component]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3.应用组件-->
<!-- 注意:-->
<!-- 驼峰命名 在调用的时候在每个大写字母(除了首字母)前面加 -,大写字母可改成小写来调用-->
<!-- 小写命名直接调用-->
<my-Com-C></my-Com-C>
<mycom></mycom>
</div>
<script>
//1.通过 Vue.extend 创建模板
var com1 = Vue.extend({
// 注意:组件必须有唯一的根元素
template: '<h1>通过 Vue.extend+Vue.componnet 创建模板com1</h1>'
})
var com2 = Vue.extend({
template: '<h1>通过 Vue.extend+Vue.componnet 创建模板com2</h1>'
})
//2.再通过 component 创建组件
Vue.component('myComC', com1)
Vue.component('mycom', com2)
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
创建方式2 [Vue.component]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<com1></com1>
</div>
<script>
// 1.通过 Vue.comopnent 创建组件
Vue.component('com1', {
// 注意:组件必须有唯一的根元素
template: '<div><h1>通过 Vue.comopnent 创建组件</h1><span>123</span></div>'
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
创建方式3 [template元素+Vue.component]
注意:
- template元素写在外面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<com1></com1>
</div>
<!-- 在外面写组件模板-->
<!-- Vue 提供的 template 元素, 创建组件时,通过元素id来调用该模板-->
<template id="tmp1">
<div>
<h1>Vue 提供的 template 元素, 创建组件时,通过元素id来调用该模板</h1>
</div>
</template>
<script>
// 2.创建全局组件
Vue.component('com1', {
template: '#tmp1'
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
更新时间:2019-12-21