vue(组件、axios)

Vueday5

计算属性

通过一系列运算之后，最终得到一个属性值(computed)

这个动态计算出来的属性值可以被模板结果或者methods方法使用

1. 定义的时候，要被定义为"方法"
2. 在使用计算属性的时候，当普通属性使用即可
3. 实现代码复用
4. 计算属性中依赖的数据源变化了，则计算属性会重新求值

axios

axios是一个网络请求库，用于数据请求

调用axios方法得到的返回值是Promise对象

若调用某个方法的返回值是Promise 实例，则前面可以添加await

await只能用在被async “修饰的方法中”

基本语法:

get传参用params

post传参用data

axios({
	method:"请求类型",
	url:"请求的url地址",
	//URL中的查询参数
	params:{},
	
	// 请求体参数
	data:{}
}).then(function(result){
	//.then用来指定请求成功之后的回调函数
	// 形参中的result是请求成功之后的结果
})

1. 调用axios之后使用async/await进行简化
2. 使用解构赋值 从axios封装的大对象中将data属性解构出来
3. 把解构出来的data属性，使用冒号进行重命名 一般重命名为{data:res}

vue-cli

vue项目中src目录的构成

assets 文件夹，存放项目中用到的静态资源文件，例如css样式表，图片资源
components 文件夹，程序员封装的可复用的组件
main.js是项目的入口文件，整个项目的运行要先执行main.js
App.vue是项目的根组件

vue项目的运行流程

在工程化项目中，vue通过main.js把App.vue渲染到index.html的指定区域中

1. App.vue用来编写待渲染的模板结构
2. index.html中需要预留一个el区域
3. main.js把App.vue渲染到了index.html所预留的区域中

VUE 组件

• template
• script
• style

//导入vue包 得到vue的构造函数
import Vue from 'vue'
//导入App.vue根组件，将来要把App.vue中的模板结构，渲染到HTML页面中
// import App from './App.vue'
import Test from './Test.vue'


Vue.config.productionTip = false

// 创建Vue的实例对象
new Vue({
	//把render函数指定的组件渲染到HTML页面中
	//render函数中，渲染的是哪个.vue组件 那么这个组件就叫做根组件
  render: h => h(Test),
}).$mount('#app')

<template>
	<div>
		<h2>{{ username }}的vue</h2>
		<button @click="changeName">修改名字</button>
	</div>
</template>

<script>
	// 默认导出 固定写法
	export default{
		//组件中的data不能像之前一样指向对象
		//组件中的data必须是函数
		data () {
			//return出去的{}中可以定义属性
			return {
				username:'lsq'
			}
		},
		methods:{
			changeName(){
				// 在组件中,this就表示当前组件的实例对象
				this.username = 'cool'
			}
		}
	}
</script>

<style>
</style>

组件中的父子关系

• 组件在被封装好之后，彼此之间是相互独立的，不存在父子关系

• 在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系

使用组件的三个步骤

1. 使用import语法导入需要的组件

2. 使用component节点注册组件

   通过components注册的是私有子组件

3. 以标签的形式使用钢材注册的组件

<template>
	<div>
		<h1>App 根组件</h1>
		<hr />
		
		<div class="box">
<!-- 		渲染left和right组件
			以标签形式使用注册好的组件 -->
			<Left></Left>
		</div>
	</div>
</template>

<script>
	//导入需要使用的.vue组件
	import Left from '@/components/left.vue'
	
	export default{
		data(){
			
		},
		methods:{
			
		},
		// 注册组件
		components:{
			Left
		}
	}
</script>

<style>
	.box{
		width: 100%;
		height: 200px;
		background-color: antiquewhite;
	}
</style>

• 注册全局组件

在vue项目的main.js入口文件中，可以通过Vue.component()方法可以注册全局组件

导入需要的全局组件
import test from '@/components/xxx.vue'
参数1:字符串格式，表示组件的“注册名称”--即使用的标签名字
参数2:需要被全局注册的那个组件
Vue.component('Mytest',test)

• 组件的props

props是组件的自定义属性，在封装通用组件的时候，合理地使用props可以极大的提高组件的复用性。

props中的数据，可以直接在模板数据结构中被使用

props是只读的

export default{

	props:['init','自定义属性B','自定义属性C'],
	data(){
		count:this.init
	}
}

由于count可读可写，故需将init值给count
count:this.init

• props的default默认值

不再使用数组，而是对象

在声明自定义属性值时，可以通过type来定义属性的值类型

export default{	props:{		init:{			default:0,			// 通过type属性定义属性的值类型			// 如果传递的不是此类型，则会在终端报错			type:Number,			// 必填校验			required:true		}	}}

• props的required必填项