项目初始化
"""
1）根组件：App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
2）路由配置：router/index.js
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
];
3）组件：views和components文件夹
i）删除除Home.vue以为的所有组件
ii）初始化Home.vue
<template>
<div class="home">
</div>
</template>
4）分类管理资源：assets文件夹
建立img、css、js子文件夹，删除原来的资源
5）如果要修改页面标签图标
替换public文件夹下的favicon.ico图片文件
"""
组件数据局部化处理
"""
1）不管页面组件还是小组件，都可能会被多次复用
2）复用组件的原因，其实就是复用组件的 页面结构、页面样式、页面逻辑
3）但是页面上的数据需要区分（被复用的两个组件数据多少是有区别的），所以组件的数据要做局部化处理
4）借助函数可以产生局部作用域的特点，为每一次复用组件产生一个独立的作用域
语法:
data () {
return {
// 数据们
}
}
"""
一、组件之间的数据传递
1.父组件向子组件传递
子组件需要向父组件提供一个接口，父组件通过这个接口可以对子组件进行设置。这个接口就是子组件Vue对象中的props实例成员。
子组件在props注册的属性名，父组件可以在使用组件标签的时候通过属性的方式进行赋值。
子组件Goods.vue
<template>
<div class="goods" style="text-align: center;" @click="clickGoods(pk,desc)" :pk='pk'>
<img :src="img_url" alt="">
<p>{{ desc }}</p>
</div>
</template>
<script>
export default{
props:['img_url','desc','pk'],
}
</script>
父组件Shop.vue
<template>
<div class="Shop">
<h1>选择了{{ goods_name }}商品</h1>
<div>
<Goods v-for='goods in goods_list' :img_url='goods.img_url'
:desc='goods.desc' :pk='goods.id'>
</Goods>
</div>
</div>
</template>
<script>
import Goods from '@/components/Goods.vue'
let goods_list = [
{
img_url :require('@/assets/img/1.jpg'),
id:1,
desc:'二狗子'
},
{
img_url:require('@/assets/img/2.jpg'),
id:2,
desc:'三狗子'
},
{
img_url:require('@/assets/img/3.jpg'),
id:3,
desc:'四狗子'
},
]
export default{
data(){
return {
goods_list,
goods_name:'未知',
}
},
components:{
Goods,Nav
},
}
</script>
2.子组件向父组件传递数据
子组件在父组件渲染之后开始渲染，子组件需要自定义方法在某个特别的时间节点向父组件传递信息。当子组件发生时间时，可通过$emit向父组件发送通知、还可以传递参数。
goods.vue
<template>
<div class="goods" style="text-align: center;" @click="clickGoods(goods.title)" >
<img :src="goods.img_url" alt="">
<p>{{ goods.title }}</p>
</div>
</template>
<script>
export default{
data(){
return {
}
},
props:['goods'],
methods:{
clickGoods(title){
this.$emit('clickGoods',title)
}
}
}
</script>
Shop.vue
<template>
<div class="Shop">
<h1>选择了{{ goods_name }}商品</h1>
<div>
<Goods v-for='goods in goods_list' :goods='goods' @clickGoods='chooseGoods'>
</Goods>
</div>
</div>
</template>
<script>
import Goods from '@/components/Goods.vue'
let goods_list = [
{
img_url :require('@/assets/img/1.jpg'),
id:1,
title:'二狗子'
},
{
img_url:require('@/assets/img/2.jpg'),
id:2,
title:'三狗子'
},
{
img_url:require('@/assets/img/3.jpg'),
id:3,
title:'四狗子'
},
]
export default{
data(){
return {
goods_list,
goods_name:'未知',
}
},
components:{
Goods,Nav
},
methods:{
chooseGoods(title){
this.goods_name = title
}
}
}
</script>
二、组件的生命周期钩子
'''
1.组件的生命周期是指：组件从创建前到销毁的整个过程。
2.生命周期钩子：在一个组件的生命周期中，会出现很多特殊的节点，且往往会在特定的时间节点来完成一些必要的逻辑，特殊的事件节点可以绑定钩子。
3.钩子：提前为某个事件绑定方法，当满足这个事件激活条件时，方法就会被调用，满足特定条件被回调的绑定方法就称为钩子。
'''
<template>
<div class="goods">
<Nav />
</div>
</template>
<script>
import Nav from "../components/Nav";
export default {
name: "Goods",
components: {
Nav,
},
beforeCreate() {
console.log('该组件要被加载了')
},
created() {
console.log('该组件要被加载成功了')
},
updated() {
console.log('数据更新了')
},
destroyed() {
console.log('该组件销毁了')
}
}
</script>
三、路由传参
当我们搭建一个电商平台，用户点击某一个商品时，需要我们跳到商品的详情页，每个商品都有一个详情页，我们需要在跳转的同时传递商品的id，（得知用户点的是哪一个商品，从而向后台获取到数据）。
1.通过正则匹配
"""
路由传参:
一、通过url正则传递数据
i）设置
路由: path: '/goods/detail/:pk' | '/goods/:pk/detail/:xyz'
请求: '/goods/detail/任意字符' | '/goods/任意字符/detail/任意字符'
ii）如何传
<router-link :to="`/goods/detail/${pk}`"></router-link>
this.$router.push(`/goods/detail/${pk}`)
iii）如何取
this.$route对象是管理路由参数的，传递的参数会在this.$route.params字典中
this.$route.params.pk
"""
（1）配置router/index.js
{
path: '/goodsdetail/:id',
name: 'GoodsDetail',
component: GoodsDetail
}
（2）传递
Goods.vue
<template>
<router-link :to="`/goodsdetail/${goods.id}`">
<div class="goods" style="text-align: center;" @click="clickGoods(goods.title,goods.id)" >
<img :src="goods.img_url" alt="">
<p>{{ goods.title }}</p>
</div>
</router-link>
</template>
--------------或者通过监听点击事件进行router跳转-----------
<div class="goods" style="text-align: center;" @click="goto(goods.id)" >
<img :src="goods.img_url" alt="">
<p>{{ goods.title }}</p>
</div>
methods:{
goto(id){
this.$router.push(`/goodsdetail/${id}`)
}
}
（3）在详情页进行接收goodsdetal.vue
<script>
export default{
data(){
return {
id : '未知'
}
},
created() {
this.id = this.$route.params.id || this.$route.query.pk
}
}
</script>
2.通过url传递
'''
二、通过url参数传递数据
i）设置
路由: path: '/goods/detail'
请求: '/goods/detail?pk=数据'
ii）如何传
<router-link :to="`/goods/detail?pk=${pk}`"></router-link>
<router-link :to="{name:'GoodsDetail', query:{pk: pk}}"></router-link>
this.$router.push(`/goods/detail?pk=${pk}`)
this.$router.push({name:'GoodsDetail', query:{pk: pk}})
iii）如何取
this.$route对象是管理路由参数的,传递的参数会在this.$route.query字典中
this.$route.query.pk
'''
（1）配置router/index.js
const routes = [
{
path: '/goods/detail',
name: 'GoodsDetail',
component: GoodsDetail
},
]
（2）传递Goods.vue
<template>
<router-link :to="`/goodsdetail?id=${goods.id}`">
<div class="goods" style="text-align: center;">
<img :src="goods.img_url" alt="">
<p>{{ goods.title }}</p>
</div>
</router-link>
</template>
-------------------------或者逻辑跳转----------------------------
<template>
<div class="goods" style="text-align: center;" @click="goto(goods.id)">
<img :src="goods.img_url" alt="">
<p>{{ goods.title }}</p>
</div>
</template>
goto(id){
// this.$router.push(`/goodsdetail/${id}`)
this.$router.push(`/goodsdetail?id=${id}`)
}
（3）接收使用query接收
接收方式和正则匹配是一样的 query||params。
四、全局配置
global.css
html, body {
margin: 0;
}
a {
color: black;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
}
settings.js
export default {
base_url: 'https://127.0.0.1:8000'
}
main.js
//1) 配置全局css
import '@/assets/css/global.css'
// import global_css from '@/assets/css/global.css' // 资源需要用变量保存,方便以后使用
// require('@/assets/css/global.css')
// let global_css = require('@/assets/css/global.css') // 资源需要用变量保存,方便以后使用
// 2) 配置自定义js设置文件
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings;
// 在任何一个组件中的逻辑,可以通过 this.$settings访问settings.js文件的{}数据
五、小结
'''
项目：
环境:node-->npm-->cnpm--->vue/cli
创建项目：vue create vue
配置：配置npm启动项
项目目录结构：依赖、环境、入口、核心代码
组件：
构成：template+script+style
导入：import 别名 from '路径'
父用子：1.导入 2.components中注册 3.使用
组件数据：组件化处理data(){return {} }
传参：父传子---自定义组件属性|子传父---自定义组件事件$emit
生命周期钩子：created 向后台请求数据
路由：
根组件的页面站位：<router-view />
导航栏中的页面跳转:<router-link to=''></router-link>
代码中的逻辑跳转:this.$router.push()|this.$router.go()
路由传参恶两种方式：url传参、正则匹配
两个路由对象：
this.$router -- 控制路由跳转
this.$route -- 控制路由数据
'''