组件化和模块化
<!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>Title</title>
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<!--
组件:就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分功能模块
模块化:从代码逻辑的角度进行划分的,方便代码分层开发,保证每个功能模块的职能单一
组件化:从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用
-->
<!--创建组件的方式-->
<div id="app">
<!--驼峰命名-->
<!--<my-com1></my-com1>-->
<!--不使用驼峰命名-->
<!--<mycom1></mycom1>-->
<!--第3种创建方式-->
<mycom3></mycom3>
</div>
<template id="temp1">
<div>
<h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
<h4>123456</h4>
</div>
</template>
<script>
//创建组件的方式1:================================================
//1:使用Vue.extend 来创建全局的Vue组件
// const com1=Vue.extend({
// //通过 template 属性,指定了组件要展示的HTML结构
// template:'<h3>这是使用 Vue.extend 来创建的组件</h3>'
// });
//2:使用Vue.component('组件的名称',创建出来的组件模板对象)
// Vue.component('myCom1',com1);
//如果使用 Vue.component 定义全局组件的时候,组件名称使用了驼峰命名法,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时两个单词之间使用 - 连接
//如果不使用驼峰命名,则直接拿名称来使用
// Vue.component('mycom1',com1);
//简写:s
// Vue.component('mycom1',Vue.extend({
// template:'<h3>这是使用 Vue.extend 来创建的组件</h3>'
// }));
//创建组件的方式2:================================================
// Vue.component('mycom1',{
// //注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
// template:'<div><h3>这是使用 Vue.component 来创建的组件</h3><span>123</span></div>'
// });
//创建组件的方式3:================================================
Vue.component('mycom3',{
template:'#temp1'
});
//3种创建组件都需要创建vue 实例
const vm=new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
</body>
</html>