Vue组件(Vue-cli)
以前:HTML、CSS、JavaScript只有一个一级节点html
<html>
<style></style>
<script></script>
</html>
现在:HTML、CSS、JavaScript具有3个一级节点
SFC规范:单文件组件规范
理解:以前前台是由很多【HTML页面】组成;以前前台是由很多【vue组件】组成
1、自定义组件(components)
步骤:(1)创建vue项目,用VScode打开文件夹
(2)在components文件夹下创建文件A.vue,B.vue
(3)自定义组件
要点①:组件的根标签要是template标签
要点②:template标签中只能有一个根节点。比如:template标签里写一个根节点div,那么就只能有唯一的一组div标签作为根节点,否则报错。(根节点不局限于div,可以是任何标签,但必须唯一)
<template>
<div>
//所有的组件内容写在根节点中
</div>
</template>
要点③:组件一定要导出才能够使用
<script>
export default {
name:'A',//名字属性,通常和文件名一样,比如文件名A.vue,这里name就写A
}
</script>
(4)打开App.vue(App.vue工程的入口组件,用来访问工程的主页面)文件
①导入组件
//在script标签中导入A,B两个组件
//“ . ”表示当前路径
import A from './components/A.vue'
import B from './components/B.vue'
②注册组件:components
export default {
name: 'App',
components: {
A,B
}
}
③引用组件
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
//引用组件
<A></A>
<B></B>
</div>
</template>
(5)data:组件中,data变成一个方法(以前是属性,组件中是方法)
export default {
name:'A',
data(){
return {
person:{name:'张三',age:30}
};
}
}
2、两个组件实例
(1)例子1
<template>
<div>
<input type="text" v-model="person.name" /><br />
<input type="text" v-model="person.age" /><br />
</div>
</template>
<script>
export default {
name:'A',
data(){
return {
person:{name:'张三',age:30}
};
}
}
</script>
(2)例子2
<template>
<div>
<table>
<thead>
<tr><th>序号</th><th>名字</th><th>年龄</th></tr>
</thead>
<tbody>
//v-bind:key="index"是下载了eslint后需要这么做不报错
<tr v-for="(person, index) of list" v-bind:key="index">
<td>{{index+1}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name:'B',
data(){
return {
list:[{name:'李四',age:40},{name:'王五',age:50}]
};
}
}
</script>
3、组件嵌套
示例:把A,B两个组件放在D组件里面,显示D页面
//D.vue界面代码
<template>
<div>
<h1>D页面</h1>
<A></A>
<B></B>
</div>
</template>
<script>
//此处导入组件要用@开头,代表src的意思
import A from '@/components/A.vue'
import B from '@/components/B.vue'
export default {
name:'D',
components:{
A,B
}
}
</script>
//App.vue界面代码
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<D></D>
</div>
</template>
<script>
// 导入组件
import D from './components/D.vue'
export default {
name: 'App',
// 注册组件
components: {
D
}
}
</script>
Vue路由
(一)路由安装:npm install vue-router
(二)创建配置路由文件(src/router/index.js)
(1)导入vue:import Vue from ‘vue’
(2)导入路由:import Router from ‘vue-router’
(3)在vue实例中使用路由:Vue.use(Router);
(4)导入组件
(5)创建路由实例并导出
//(1)导入vue
import Vue from 'vue'
//(2)导入路由
import Router from 'vue-router'
//(4)导入组件
import A from '@/components/A.vue'
import B from '@/components/B.vue'
import D from '@/components/D.vue'
//(3)在vue实例中使用路由
Vue.use(Router);
//(5)创建路由实例并导出(路由就像一个导航栏一样)
export default new Router({
//路由配置:里面是一个数组
routes:[
{
name:'A',//路由名字
path:'/A',//跳转路径(访问路径)
component:A//组件属性
},
{
name:'B',
path:'/B',
component:B
},{
name:'D',
path:'/D',
component:D
}
]
})
(三)main.js:在入口js文件中引入路由
(1)引入路由:import router from ‘./router’
(2)router引入
//(1)引入路由
import router from './router'
new Vue({
//router引入
router,
render: h => h(App),
}).$mount('#app')
(四)使用路由(App.vue)
(1)router-view:显示页面
(2)router-link:跳转路径标签,里面有跳转属性to
//(1)router-view:显示页面(显示路由视图)
<router-view></router-view>
//(2)router-link:跳转路径标签,里面有跳转属性to
<router-link to="/A">A组件</router-link>
<router-link to="/B">B组件</router-link>
<router-link to="/D">D组件</router-link>
***注意:如果现在想访问首页面(假设是A页面为首页面)***
export default new Router({
routes:[
{
path:'/',//定义一个根路径
redirect:'/A'
}
]
})
附加:如果不想在文件(src/router/index.js)文件中导入组件,也可以使用箭头函数引入:
以import A from '@/components/A.vue’为例:
//import A from '@/components/A.vue'
{
name:'A',
path:'/A',
component:() => import(@/components/A.vue)
}
(五)路由的跳转(写在方法methods里面)
①根据路由名字跳转
②根据路由路径跳转
//根据路由名字跳转
//this表示当前vue的实例
this.$router.push({name:'B'})
//根据路由路径跳转
//this表示当前vue的实例
this.$router.push({path:'/B'})
(六)路由的跳转:数据的传递(传参)
前端的数据有两种:①前台和后台的数据交互
②前台各个组件之间的数据传递
举例说明:
假设目前有两个组件A组件和B组件,A组件是一个表格,有很多行,里面有数据比如“张三,30”。现在要做一个查询的功能,一点击“编辑”,它要跳转到B页面,B组件是一个单个部门信息表单,然后把张三的所有信息都列出来:
方法一:向后台发请求。后台有一个根据id查找单个的方法,点击编辑后,后台根据id查到了张三的信息,然后把张三的信息传给B组件(适用于并发量大)
方法二:通过组件跳组件,A组件的数据信息跳到了B组件(适用于并发量小)
A组件 | B组件 |
---|---|
表格 | 单个部门信息表单 |
张三,30 | |
后台数据 |
(1)根据路由名字跳转传参:params
this.$router.push({name:'B',params:{a:1,b:2}})
this.$route.params.a
this.$route.params.b
(2)根据路由路径跳转传参:query
this.$router.push({path:'/B',query:{c:3,d:4}})
this.$route.query.c,//拿到c的数据
this.$route.query.d//拿到d的数据
(七)附加:路由配置的属性
export default new Router({
mode: 'history', //路由模式,取值为history与hash
base: '/', //打包路径,默认为/,可以修改
routes: [
{
path: string, //路径
component: Component; //页面组件
name: string; // 命名路由-路由名称
components: ( ComponentName | ()=>import('页面地址') ); // 命名视图组件
redirect: string | Location | Function; // 重定向
props: boolean | string | Function; // 路由组件传递参数
alias: string | Array<string>; // 路由别名
children: Array<RouteConfig>; // 嵌套子路由
beforeEnter?: (to: Route, from: Route, next: Function) => void; // 路由单独钩子
meta: any; // 自定义标签属性,比如:是否需要登录
icon: any; // 图标
// 2.6.0+
caseSensitive: boolean; // 匹配规则是否大小写敏感?(默认值:false)
pathToRegexpOptions: Object; // 编译正则的选项
}
]})
重点:父子组件之间的传参
D父组件
A子组件
1、父组件向子组件传参(传递数据):通过【自定义属性:props】传参
说明:通过props属性
父组件 D向子组件 A传参示例:
//父组件D
<template>
<div>
<h1>父组件D</h1>
<A c1='王五' c2='50'></A>
</div>
</template>
//子组件A组件
<template>
<div>
<h1>子组件A</h1>
//A页面显示C1,C2
{{c1}}{{c2}}
//也可以A页面绑定C1,C2
<input type="text" v-model="person.name" /><br />
<input type="text" v-model="person.age" /><br />
</div>
</template>
<script>
export default {
name:'A',
data(){
return {
person:{name:'',age:''}
};
},
methods:{
//props:属性定义
props:['c1', 'c2']
}
</script>
2、子组件向父组件传递参数:通过【自定义事件:$emit】传
//子组件A组建
<template>
<div>
<h1>A页面</h1>
<button @click="m3">子组件传递数据到父组件</button>
</div>
</template>
<script>
export default {
name:'A',
data(){
return {
};
},
methods:{
m3(){
// 第一个参数:事件
// 第二个参数:数据
//$emit:用来注册事件
//向父组件传了一个赵六,一个60
this.$emit('e1','赵六');
this.$emit('e2','60');
}
}
}
</script>
//父组件D组件
<template>
<div>
<h1>D页面</h1>
//触发e1事件,调用method1方法
<A @e1="method1" @e2="method2"></A>
</div>
</template>
<script>
import A from '@/components/A.vue'
import B from '@/components/B.vue'
export default {
name:'D',
components:{
A,B
},
methods:{
method1(v1){
alert(v1);
},
method2(v2){
alert(v2);
}
}
}
</script>
子组件传父组件的逻辑思路:
在子组件A组件点击按钮调用m3方法,触犯e1事件,由于e1组件在父组件D组件里绑定的是method1方法,就会把e1的参数’赵六’通过method1的参数v1传进来;另一个同理