Vue组件化思想
- 组件 (Component) 是 Vue.js 最强大的功能之一
- 组件可以扩展 HTML 元素，封装可重用的代码
- 思想体现：标准，分治，重用，组合
Vue组件化的说明
组件化-就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。?因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。
组件化开发
需注意,使用自定义组件之前必须注册。Vue.js 提供了 2 种组件的注册方式，全局注册和局部注册。
全局注册
全局组件注册后，任何vue实例都可以用
全局注册格式
全局注册的注册格式:
Vue.component(组件名称, {
data: 组件数据,
template: 组件模板内容
})小case:定义一个名为button-counter的新组件,功能是点击按钮,然后显示点击的次数
// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="handle">点击了{{count}}次</button>
})全局组件用法?
全局组件的简单用法:
<body>
<div id="app">
//组件挂载,标签名与组件名对应,符合驼峰命名规则
<count-com></incre-com>
<count-com></incre-com>
</div>
//定义组件的模版html,注意是在app外定义
<template id="countTem">
<div align="center">
<button @click="handle">点击了{{count}}次</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//组件名符合驼峰命名规则
Vue.component("countCom",{
data() {
return{
count: 0
}
},
template: "#countTem",
methods:{
handle(){
this.count++
}
}
})
//组件存在于vue中,所以必须创建vue
const App = new Vue({
el: "#app",
data: {
}
})
</script>
</body>注意事项
- 组件参数的data值必须是函数同时这个函数要求返回一个对象
- 组件模板必须是单个根元素
- 组件模板的内容可以是模板字符串
- 组件命名方式（短横线，驼峰）
局部注册
只能在当前注册它的vue实例中使用（父组件）
局部注册格式
局部注册的格式:
var ComponentA = { /*...*/ }
var ComponentB = { /*...*/ }
var ComponentC = { /*...*/ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB,
'component-c': ComponentC,
}
})局部组件用法?
局部组件的简单用法:
<body>
<h1>局部组件</h1>
<div id="app">
//组件挂载,标签名与组件名对应,符合驼峰命名规则
<add-com></add-com>
<sub-com></sub-com>
</div>
//定义组件的模版html,注意是在app外定义
<template id="addTem">
<div>
<h1>{{count}}</h1>
<button @click="addHandle">自增</button>
</div>
</template>
<template id="subTem">
<div>
<h1>{{count}}</h1>
<button @click="subHandle">自减</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 声明组件
let addCom = {
data(){
return{
count: 0
}
},
template: "#addTem",
methods: {
addHandle(){
this.count++
}
}
}
let subCom = {
data(){
return{
count: 0
}
},
template: "#subTem",
methods: {
subHandle(){
this.count--
}
}
}
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
// 定义局部组件
components: {
//组件key: 组件体,key-value形式
// addCom: addCom,
//如果key和value的值一样,则可以简写为key
addCom,
//subCom: subCom
subCom
}
})
</script>
</body>注意事项
注意事项与全局组件一样,只不过在定义局部组件时,如果组件名与组件体名称一样,则可以直接简写为key(组件名).?
Vue的路由
Vue路由说明
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；
下面介绍与路由相关的常用三个单词：
- route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；
- routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；
- router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个,或者说它是一个管理者，负责管理上述两个；比如当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；
Vue路由的使用
定义链接
<!-- 定义链接
1.router-link 被编译之后转化为a标签
2.关键字 to 被编译之后转化为href属性 -->
<router-link to="/user">用户</router-link>
<router-link to="/dog">狗狗</router-link>
<!-- 指定路由的填充位置 未来展现组件信息
填充的位置被解析之后 就是一个DIV -->
<router-view></router-view>定义组件标签体
<template id="userTem">
<div>
<h3>用户信息</h3>
</div>
</template>
<template id="dogTem">
<div>
<h3>狗信息</h3>
</div>
</template>准备组件
let userCom = {
template: "#userTem"
}
let dogCom = {
template: "#dogTem"
}路由对象的定义
let vueRouter = new VueRouter({
routes: [
{path: "/user",component: userCom},
{path: "/dog",component: dogCom}
]
})简单应用
<div id="app">
<!-- 2.定义链接
1.router-link 被编译之后转化为a标签
2.关键字 to 被编译之后转化为href属性 -->
<router-link to="/user">用户</router-link>
<router-link to="/dog">狗狗</router-link>
<!-- 3.指定路由的填充位置 未来展现组件信息
填充的位置被解析之后 就是一个DIV -->
<router-view></router-view>
</div>
<!-- 定义组件的标签体 -->
<template id="userTem">
<div>
<h3>用户信息</h3>
</div>
</template>
<template id="dogTem">
<div>
<h3>狗信息</h3>
</div>
</template>
<!-- 1.导入路由js -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
//4.准备组件
let userCom = {
template: "#userTem"
}
let dogCom = {
template: "#dogTem"
}
//定义路由对象
let vueRouter = new VueRouter({
routes: [
{path: "/", redirect: "/dog"},//使用了路由的重定向
{path: "/user",component: userCom},
{path: "/dog",component: dogCom}
]
})
const App = new Vue({
el: "#app",
data: {
},
//5.实现路由的挂载
router: vueRouter
})
</script>?
?使用了重定向之后:
?
路由的重定向与转发问题
重定向
重定向的关键字是redirect
说明:?用户访问服务器,但是目标服务器无法处理该请求,目标服务器返回一个能够处理请求的网址.由用户再次发起请求,访问服务器获取数据.
用法:
//定义路由对象
let vueRouter = new VueRouter({
routes: [
{path: "/", redirect: "/dog"},//使用了路由的重定向
{path: "/user",component: userCom},
{path: "/dog",component: dogCom}
]
})?当服务器访问跟目录时,服务器返回能够处理请求的/dog网址,由用户再次发起请求,访问服务器获取数据.
注意:redirect重定向改变了url地址，如果重定向的地址需要接收参数然而没有传参不会改变地址，页面不会报错但是也不会显示内容
转发
说明: 用户访问服务器,但是目标服务器无法处理该请求,由服务器内部将请求交给其他服务器处理. 这个过程称之为转发.