1.组件化思想
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件就可以了
1.1组件化步骤
组件化步骤:
1.定义组件
全局组件:任意的DIV都可以引入该组件
局部组件:只有特定的DIV可以引入组件
2.编辑组件的key(注意驼峰规则的写法)
编辑组件体特殊语法:定义属性时data(){return{ key: value}}
3.通过key对组件进行引用.–>
1.2全局组件案例
全局组件：Vue.component("tagName",options)
全局组件定义好后不需要挂载（或者叫注册），直接可以使用，使用的全局组件名作为标签，且是双标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE组件化</title>
<style>
</style>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<!-- 步骤三:1.组件标签的使用放到app标签之内才能解析
2.如果采用驼峰规则命令则中间使用-线连接
-->
<hello-com></hello-com>
<hello-com></hello-com>
<hello-com></hello-com>
</div>
<!--步骤二: 定义组件的模板html
注意事项:
1.切记标识在app之外! !! !
2.要求模版字符串必须有根标签div
-->
<template id="helloCom">
<div>
<h3>静夜思</h3>
作者：李白<br />
床前明月光，疑是地上霜。<br />
举头望明月，低头思故乡。<br />
引入属性:{{msg}} //可以使用属性
</div>
</template>
<script>
//步骤一: 定义组件对象
Vue.component("helloCom",{
data(){
return{msg:"我是一个组件"}
},
template:"#helloCom"
})
const APP=new Vue({
el:"#app",
data:{ }
})
</script>
</body>
</html>
1.3局部组件案例
局部组件：vue实例里面定义一个components:{‘组建名’:{配置选项}},
data必须是个函数return一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE组件化</title>
<style>
</style>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<hello-com></hello-com>
<hello-com></hello-com>
<hello-com></hello-com>
<hello-com></hello-com>
</div>
<!-- 3.定义组件模板 -->
<template id="helloCom">
<div>
<h3>静夜思</h3>
作者：李白<br />
床前明月光，疑是地上霜。<br />
举头望明月，低头思故乡。<br />
引入属性:{{msg}}
</div>
</template>
<script>
//2.声明组件
let helloCom={
data(){
return {
msg:"这是一个局部组件"
}
},
template:"#helloCom"
}
//局部组件,只能在某个Vue对象中使用
const APP=new Vue({
el:"#app",
data:{},
methods:{},
//1.定义局部组件
components:{
// l-v简化写法 helloCom:helloCom(前提是名字相同)
helloCom
// helloCom:helloCom
}
})
</script>
</body>
</html>
2.Vue中的路由
2.1路由介绍
说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
2.2路由步骤
1.导入路由.JS
2.指定路由的跳转链接
3.定义路由的填充位.
4.准备组件,定义路由对象
2.3路由入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由机制</title>
</head>
<body>
<div id="app">
<!-- 第二步:定义链接
1.router-Link 被编译之后转化为a标签
2.关键字to被编译之后转化为href属性-->
<router-link to="/user">用户</router-link>
<!--三: 指定路由的填充位置 未来展现组件信息
填充的位置被解析之后 就是一个DIV-->
<router-view></router-view>
</div>
<template id="userTem">
<div>
<h3>我是用户</h3>
</div>
</template>
<!-- 1.导入路由JS先导入vue.js再导入路由.js顺序问题 -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
let userCom={
template: "#userTem"
}
/**第四步: 准备组件,定义路由对象*/
// routes: 定义路由规则:
let vueRouter = new VueRouter({
routes: [
{path: "/user",component: userCom}
]
})
// 准备组件,定义路由对象
const APP = new Vue({
el: "#app",
data: {
},
//实现路由拦截
router: vueRouter
})
</script>
</body>
</html>