Vue-vue-cli---初识，网路请求，组件传参

vue-cli的初识

view页面的认识—vue组件的组成

• 一个组件就是一个.vue文件
• template 模板 ，只能有一个根节点
• script 逻辑，
• style 样式

<!-- 目标 改造 Home.ve 页面 -->
<!-- 模板部分 -->
<template>
	<div class="box">
		<!-- 只能有一个标签，不能有两个标签并行 -->
	</div>
</template>

<!-- 业务逻辑 -->
<script>
	
</script>

<!-- 样式部分 -->
<style lang="less" scoped="scoped"> 

</style>

写法与vue单页面相同

<template>
	<div>
		<h1>首页</h1>
		<p>{{msg}}</p>
		<p @click="say()">点击</p>
		<Content></Content>
	</div>
</template>

<script>
	// 导入组件
	import Content from '../components/Content.vue'
	export default {
		name : "Home",
		components : {
			Content
		},
		data() {return {
			msg : "你好vue"
		}},
		methods : {
			say() {
				alert(this.msg);
			}
		}
	}
</script>

cli的组件的调用

• 在components文件夹里面创建一个vue文件，就是组件，与view文件夹下vue文件格式一样
• 在view文件夹里面导入，创建的组件
  • import Content from '../components/组件名字.vue'
  • import Content from '@/components/组件名字.vue'
• 之后注册到view文件夹下的vue文件中，谁调用谁注册
  • components : {组件的名字}，多组件用逗号隔开
• 最后调用就行
  • <组件的名字></组件的名字>

<template>
	<div>
		<h1>首页</h1>
		<p>{{msg}}</p>
		<p @click="say()">点击</p>
		<!-- 调用组件 -->
		<Content></Content>
	</div>
</template>

<!-- 业务逻辑 -->
<script>
	// 导入组件
	import Content from '../components/Content.vue'
	import Content from '@/components/Content.vue'
	export default {
		name : "Home",
		components : {
			Content
		},
		data() {return {
			msg : "你好vue"
		}},
		methods : {
			say() {
				alert(this.msg);
			}
		}
		
	}
</script>

<!-- 样式部分 -->
<style lang="less" scoped="scoped"> 
	
</style>

vue-cli—css样式

• 如果使用less语法则需要在style标签上写入lang="less"
• 为了防止页面间的css语法混乱，使用 scoped="scoped"进行css语法隔离
• 可以使用直接在style标签中直接写入css语法，或者可以使用外部的样式，进行引用
  • 引用时在script标签中进行引用 impprt "@/地址/xxx.css"

<!-- 业务逻辑 -->
<script>
	// 导入css
	import  '@/assets/base.css'
</script>

<!-- 样式部分 -->
<style lang="less" scoped="scoped"> 
	.box {
		width : 200px;
		height : 200px
	}
</style>

vue中的生命周期函数—钩子函数

• 创建阶段：
  • beforeCreate 创建之前
  • created 当vue创建完毕 常用，可以获取到组件的实例的this
    • 通常网络请求，定时器，在这里执行
• 挂载阶段：
  • beforeMount 挂载之前
  • mounted 挂载之后，挂载完毕，组件已经首次喧嚷到页面
    • 可以访问到dom节点 ref
• 更新阶段：
  • beforeUpdate 更新之前
  • Updated 更新之后
• 卸载阶段：
  • beforeDestroy 卸载之前，常用
    • 移除定时器等操作
  • destroyed 卸载之后
• 总结
  • 父组件只在创建阶段在子组件之前，其他的阶段都在子组件之后

vue-cli中的文件是，.vue文件

• 最终会被转化成：js文件
• 形式为：一个render函数
• render函数为了创建虚拟dom

render() {}

vue-lic—网络请求

• 使用H5中的fatch进行Ajax，api请求
• fatch("请求地址").then(res => { return res.json()}).then(res => { js代码，赋值等等});

export default {
	data() {return {
		jokers : []	// 初始化笑话数据，为数组
	}},
	created() {
		this.getJoks();	
		// 在生命周期的created 指向 获取笑话数据的方法
	},
	methods : {
		getJoks() {
			// fatch H5 Ajax api
			fetch("http://www.520mg.com/mi/list.php?page=1")
			.then( res => {
				return res.json();	// 吧获取的数据转换为json
			})
			.then( res => {
				console.log(res);
				// 吧以前的笑话数据和当前的笑话数据合并
				this.jokers = this.jokers.concat(res.result);
			})
		}
	}	
}

网络请求—查看的方法

• ctrl+shift+i 打开调试面板
• network 打开网络请求选项卡
• 刷新，查看时先刷新
• 查看，接下来查看
• 1. 请求的数据是否正确

1. 查看这个请求地址是否错误
Request URL:http://www.520mg.com/mi/list.php?page=1
2. 产看请求参数
Query string parameters

• 2. 响应数据是否符合
  • 响应码：200 正常，404 找不到，401 你没有权限

// 1. 查看响应码
Status Code：200
// 如果 响应码为200，页能看到数据，则一定是js代码写错

网络请求—响应阶段

• 请求中
• .ten( res => {})请求成功
• .catch( err => {})请求失败

<div class="joker">
	<div class="joker" v-if="jokers.length">
		<div class="box" v-for="item in jokers" :key="item.docid" >
			{{item.summary}}
			<hr />
		</div>
		<p class="center" @click="getJoks()" v-if="can">加载更多...</p>
	</div>
	<div v-else>
		<!-- 如果响应失败显示响应信息 -->
		{{empty}}
	</div>
</div>

.catch( err => {
	this.empty = "数据请求失败，请稍后再试"
})

vue-cli—组件间传递数据

父传子

• 使用props属性来接收
• 尽量避免直接操作父组件传递过来的数据
• 所以在created生命周期时，把传过来的数据赋值为子组件自己的数据

data() {return {
	// 创建子组件自己的数据
	count : 0
}},
props : {
	"接收的数据名" : {type : 类型 , default : 默认值}
},
created() {
	// 将传递过来的数据赋值给自己的数据
	this.count = this.num;
}

子传父

• this.$emit(“发送的事件名”,发送的数据) ，将改变的数据进行发送，在子组件中

• 接收数据，在父组件中，的子组件的标记标签上

  • :发送的事件名=“父组件事件($event)” $event即为传递过来的数据，固定写法

• 子组件的代码

<!-- 使用$emit,进行发送“numchange”事件，count是发送的数据 -->
<!-- 本次将js写在了html标签中，所以不用this -->
<button @click="count++;$emit('numchange',count);">{{count}}</button>

• 父组件的代码

<!-- 父组件 -->
<template>
	<div>
		<!-- 父组件里面接收 numchange事件，执行numchange事件 -->
		<Step @numchange="numchange($event)"></Step>
		{{num}} <!-- 显示num数据-->
	</div>
</template>

// 父组件
methods : {
	// 定义的事件，传递参数
	numchange(e) {
		this.num = e;
	}
},

组件间传参—非父子间传参—小数据，大数据vuex

• 使用一个中间文件来进行传递数据，可以定义一个utils文件，定义一个空的vue实例

// 导入Vue
import Vue from 'vue';
// 导出vue实例，拥有vue的所有的方法和属性
export default new Vue();

• 两个组件间都需要导入对应中间文件定义的vue实例

import 名字 from '../utils/名字.js'

• 发送数据的组件 ，使用，导入的vue实例文件的名字.$emit("发送的事件",发送的数据);
• $emit(); 发射事件

<div class="btn">
	<button @click="send('red')">红</button>
	<button @click="send('green')">绿</button>
	<button @click="send('blue')">蓝</button>
</div>

// 导入中间文件Bus ,
import Bus from '../utils/Bus.js'
export default {
	name : "Btn",
	methods : {
		// 触发事件，发送数据
		send(str) {
			Bus.$emit("colorChange",str);
		}
	}
}

• 接收数据的组件：导入的vue实例文件的名字.$on("发送的事件",$event => {}); ,在created生命周期进行
• $on(); 监听事件

<div class="color">
	<p :style="{color : color}">真是美丽的颜色</p>
</div>

export default {
	name : "Color",
	data() {return {
		color : "red"
	}},
	created() {
		// 监听数据 colorChange，$event，是传递过来的数据
		Bus.$on("colorChange",$event => {
			this.color = $event;
		})
	}
}