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

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

  • vue-cli的初识
      • view页面的认识---vue组件的组成
      • 写法与vue单页面相同
      • cli的组件的调用
      • vue-cli---css样式
      • vue中的生命周期函数---钩子函数
      • vue-cli中的文件是,.vue文件
      • vue-lic---网络请求
      • 网络请求---查看的方法
      • 网络请求---响应阶段
      • vue-cli---组件间传递数据

vue-cli的初识

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

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


<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
    1. 响应数据是否符合
    • 响应码: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即为传递过来的数据,固定写法
  • 子组件的代码



<button @click="count++;$emit('numchange',count);">{{count}}button>
  • 父组件的代码

<template>
	<div>
		
		<Step @numchange="numchange($event)">Step>
		{{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;
		})
	}
}

你可能感兴趣的:(Vue,vue)