• 项目初始化
• 父组件导入子组件
• 页面跳转
• 组件数据局部化处理
  • 子组件
  • 父组件
  • 路由逻辑跳转
    • 案例
• 组件间通讯
  • 父传子
    • 子组件
    • 父组件
  • 子传父
    • 子组件
    • 父组件
• 组件的生命周期钩子
• 路由传参
  • 第一种
    • 配置：router/index.js
    • 传递：GoodsBox.vue
    • 接收：GoodsDetail.py
  • 第二种
    • 配置：router/index.js
    • 传递：GoodsBox.vue
    • 接收：GoodsDetail.py
• 全局配置自定义css与js
  • global.css
  • settings.js 配置启动ip端口
  • main.js
• 小结

项目初始化

1.跟组件: App.vue

2.路由配置：router--index.js

只保留home主页，删除about页，删除views中About组件

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },

];

3.组件：views和components文件夹

1）删除除Home.vue以外的所有组件

2）初始化Home.vue

3)删除logo和HollWorld.vue

4)在assets中新建css、img、js三个文件夹

如果要修改页面标签图标
	替换public文件夹下的favicon.ico图片文件

父组件导入子组件

三步：
1:导入
	// @符号=src绝对路径
  import Nav from "@/components/Nav";
2:注册
	export default {
        components:{
            Nav,
        }
    }
3:使用
		

        
aa
        

页面跳转

两种：
1:a标签，会刷新页面。不使用
2:router-link标签，不会刷新页面。（前端还是会解析为a标签，样式控制还是用a）
	首页

组件数据局部化处理

"""
1）不管页面组件还是小组件，都可能会被多次复用
2）复用组件的原因，其实就是复用组件的 页面结构、页面样式、页面逻辑
3）但是页面上的数据需要区分（被复用的两个组件数据多少是有区别的），所以组件的数据要做局部化处理
4）借助函数可以产生局部作用域的特点，为每一次复用组件产生一个独立的作用域
语法:
data () {
	return {
		// 数据们
	}
}
"""

子组件

父组件

路由逻辑跳转

"""
1）很多时候，我们需要通过普通按钮的逻辑，或是直接在某些逻辑中完成页面的跳转
2）可以通过在逻辑中用 this.$router.push() 来完成前往目标页，两种语法如下
	this.$router.push('路径')
	this.$router.push({name: '路由名'})
3）在做移动端项目时，没有像浏览器那样的前进后台键，页可以用 this.$router.go() 来完成前进后退，语法如下
	前进后退：this.$router.go(正负整数)，正式代表前进，负数代表后台，数值就是步长
"""

案例

组件间通讯

组件间通信：
		父传子：自定义属性
			子：props: ['book']
			父：
		子传父：自定义事件
			父：
				methods: {
					recvFn (args) {}
				}
			子：created () { this.$emit('recvData', args) }

父传子

"""
一、组件传参 - 父传子
1）在子组件内部通过props设置组件的自定义属性
    props: ['abc', 'goods']
2）在父组件渲染子组件是对自定义属性赋值即可
    
"""

子组件

父组件

子传父

"""
二、组件传参 - 子传父
前提：子组件是被父组件渲染的，所以子组件渲染要晚于父组件
1）子组件一定要满足一个条件，才能对父组件进行传参（某个时间节点 === 某个被激活的方法）
    eg：i）子组件刚刚加载成功，给父组件传参 ii）子组件某一个按钮被点击的时刻，给父组件传参 iii）子组件要被销毁了，给父组件传参

2）在子组件满足条件激活子组件的方法中，对父组件发生一个通知，并将数据携带处理（自定义组件事件）
    

    methods: {
        boxClick () { this.$emit('receiveData', this.goods.title, '第二个数据', '第三个数据') }
    }

3）在父组件渲染子组件时，为自定义事件绑定方法
    

4）在父组件实现绑定方法时，就可以拿到子组件传参的内容（接收到了通知并在父组件中相应）
    recFn(title, data2, data3) {
        console.log('接收到了' + title);
    }

组件标签不能绑定系统定义的事件，没有意义，子组件的事件都是在自己内部完成
"""

子组件

父组件

组件的生命周期钩子

"""
一、组件的生命周期：一个组件从创建到销毁的整个过程
二、生命周期钩子：在一个组件生命周期中，会有很多特殊的时间节点，且往往会在特定的时间节点完成一定的逻辑，特殊的事件节点可以绑定钩子
注：钩子 - 提前为某个事件绑定方法，当满足这个事件激活条件时，方法就会被调用 | 满足特点条件被回调的绑定方法就称之为钩子
"""

路由传参

"""
路由传参:
一、通过url正则传递数据
i）设置
    路由: path: '/goods/detail/:pk'   |   '/goods/:pk/detail/:xyz'
    请求: '/goods/detail/任意字符'    |    '/goods/任意字符/detail/任意字符'
ii）如何传
    
    this.$router.push(`/goods/detail/${pk}`)

iii）如何取
    this.$route对象是管理路由参数的，传递的参数会在this.$route.params字典中
    this.$route.params.pk

二、通过url参数传递数据
i）设置
    路由: path: '/goods/detail'
    请求: '/goods/detail?pk=数据'
ii）如何传
    
    

    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
"""

第一种

配置：router/index.js

const routes = [
    {
        path: '/goods/detail/:pk',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

传递：GoodsBox.vue

    
    
{{ goods.title }}





    
    
{{ goods.title }}

接收：GoodsDetail.py

第二种

配置：router/index.js

const routes = [
    {
        path: '/goods/detail',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

传递：GoodsBox.vue

    
    
{{ goods.title }}





    
    
{{ goods.title }}

接收：GoodsDetail.py

全局配置自定义css与js

新建文件：

global.css

html, body {
    margin: 0;
}

a {
    color: black;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

settings.js 配置启动ip端口

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 proj
	配置：配置npm启动项
	项目目录结构：依赖、环境、入口、核心代码们
	
组件：
	构成：template + script + style
	导入：import 别名 from '路径'
	父加子：1）导入 2）注册 3）使用
	组件数据：组件化处理 data(){ return {} }
	传参：父传子 - 自定义组件属性  |  子传父 - 自定义组件事件
	生命周期钩子：created() { //完成后台请求等 }

路由：
	根组件中的页面占位：
	导航栏中的页面跳转：
	代码中的逻辑跳转：this.$router.push() | this.$router.go()
	路由传参：两种方式
	两个路由对象：
		this.$router - 控制路由跳转
        this.$route - 控制路由数据
"""