9月20日 vue基础课程（vue2）14-26

最新推荐文章于 2024-09-30 16:19:08 发布

努力不小白

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量141

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45330080/article/details/126970203

版权

vue基础课程（vue2）14-26

14. 什么是组件

组件:就是把一个比较大的网页，进行功能模块的拆分;就是vue的一个自定义标签
组件的父子关系和兄弟关系
组件的操作
src/App.vue 首页
src/assets 静态资源
src/mian.js 入口js文件
src/components 放入组件

组件的首字母要大写

父组件(App.vue）引入子组件

<template>
    <div>
		<Header></Header>
   	 	<Swiper></Swiper>
   		<Icons></Icons>
    </div>
</template>
<script>
	import Header from './components/home/Header'
	import Swiper from './components/home/Swiper'
	import Icons from './components/home/Icons'
	export default {
		components:{
			  Header,
			  Swiper,
			  Icons
		}
	}
</script>

15. 父组件传值给子组件

16. 子组件传值给父组件

17. 兄弟组件之间的传值

18. 总结组件的传值

面试题：组件的传值【vue的高频面试题】

父组件传值给子组件
父组件：绑定
<Swiper :xxx='parentStr' :num='num'></Swiper>
***xxx是一个名称=‘这里是属性值’
子组件：props接
```
 写法1:
 	export default{
 		props:['xxx','num'],
 	}
 写法2：
 	export default{
 		props:{
 			xxx:String,
 			num:Number
 		}
 	}
```
子组件传值给父组件 (自定义事件)
子组件：（定义自定义事件）
this.$emit('changeEvent',this.str);
参数1:自定义事件
参数2:是传递的数据
父组件：

	<Child @changeEvent='fn'></Child>
	
	methods:{
	  	fn( val ){  ===>这里的val,就是子组件传的数据
	  		this.changeStr = val;
	  	}
	}

兄弟组件之间的传值 ( bus )
两组件中引入bus.js
bus.js中
import Vue from 'vue'
export default new Vue;
A兄弟：emit传
bus.$emit('changeStr',this.aStr);
参数1:自定义事件
参数2:是传递的数据(值)
B兄弟：on接

	bus.$on("changeStr",(res)=>{
		console.log( res );
	})

19. scoped(样式局部化)以及原理

组件内样式局部化：
<style scoped></style>
*** 基本上项目中scoped是必加的
scoped原理
加入了scoped，就会在节点上添加自定义属性(data-v-xxx)
css选择器 ==> 根据属性选择最终添加样式

20. slot(插槽)使用及场景

<slot></slot>

21. Vue插件的使用

使用插件

下载
npm install vue-awesome-swiper -S
***下载最新版
npm install vue-awesome-swiper@3.1.3 -S
***下载指定版
引入
全局引入在 main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

按需引入 [局部引入方式：单个组件引入]

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
components: {
  swiper,
  swiperSlide
}

配置
相关文档

22. 样式穿透

使用场景：引用插件时修改样式不成功
样式穿透：通用（非常建议使用）
::v-deep 通用（非常建议使用）
stylus >>>
sass和less /deep/

23. Vue生命周期

面试题：vue的生命周期、生命周期钩子【高频】

是什么？
vue中每一个组件都是独立的，每一个组件都有自己的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁

有哪些？

 beforeCreate
 created     《有数据》

 beforeMount
 mounted    《有dtemplate节点》

 beforeUpdate
 updated       《改变数据》

 beforeDestroy
 destroyed      《组件关闭》

打开一个组件，会执行哪些生命周期
```
 beforeCreate
 created
 beforeMount
 mounted
```

24. axios(插件，引入接口)和代理配置

vue项目axios进行接口的请求
1>下载
npm install axios -S
2> main.js引入

 	import axios from 'axios'
 	Vue.prototype.axios = axios;

3> 使用

 GET

 	this.axios({
 		url:,
 		params:{}
 	}).then(res=>{
 		res
 	})
 POST
 	this.axios({
 		url:,
 		data:{}
 	}).then(res=>{
 		res
 	})

vue项目中在开发阶段设置代理

1> 项目根目录需要新建vue.config.js

2> 配置代理

 module.exports = {
   devServer: {
     proxy: {
       '/api': {
         target: 'http://localhost:3000',
         changeOrigin: true
       }
     }
   }
 }

3> 配置完成一定要重启前端

安装后端
1> 全局安装 cnpm install express-generator -g
2> 创建项目 express --view=ejs <项目名称>
express --view=ejs server
3> 进入项目文件,安装依赖,启动项目
cd server
npm install
npm start
4> 后端接口
server / routes / index.js

	router.get('/api/home',function(req,res,next){
	console.log( req.query.str );
	//后端如何给前端数据
	res.send({  //==>res.json
		a:1
	})
})
router.post('/api/list',function(req,res,next){
	console.log( req.body.str );
	//后端如何给前端数据
	res.send({  //==>res.json
		a:1
	})
})

25. 双向绑定原理

数据双向绑定的原理
数据双向绑定在vue中的使用是v-model，它的原理是使用了Object.defineProperty()方法，用这个方法去观测或者劫持对象的某个属性是设置了还是获取了，通过它就可以劫持到，比如说v-model绑定了，它就会走set部分，进行赋值。

Object.defineProperty(对象,'属性',{
   //设置劫持
	set(){
	},
	//获取劫持
	get(){
	}
})

26. Object.freeze性能优化

Object.freeze做Vue项目的性能优化
Object.freeze() 方法用于冻结对象，禁止对于该对象的属性进行修改（由于数组本质也是对象，因此该方法可以对数组使用）

 async created(){
    let res = await axios({
      url:'http://39.101.217.150:8075/classplan/list',
      params:{
        page:1,
        size:3
      }
    })
    this.list = Object.freeze(res.data.data.records);
  }