vue2学习小计

本文介绍了Vue.js中的双向数据绑定原理及其实现方式,探讨了组件间的数据传递方法,包括父组件向子组件传递数据、子组件向父组件传递数据以及非父子组件之间的数据传递。此外还介绍了Vue实例的不同组成部分及其生命周期钩子。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

双向数据绑定

原理:通过数据劫持结合发布者-订阅者模式的方式实现
具体:首先对数据进行劫持监听(使用Object.defineProperty),设置一个监听器Observer,用来监听所有属性。当属性发生变化,订阅者Watcher收到属性的变化通知并执行相应的函数,从而更新视图。解析器Compile扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
直通车

指令及其修饰符
  • v-bind
  • v-modal
  • v-if
  • v-for
  • .click
  • .mouseover
  • .mouseout
组件
组件之间数据传递

1.父组件向子组件传递数据

//父组件
<template>
	<div>
		<item-child :to-child-info="info"></item-child>
	</div>
</template>
<script>
import item-child from './itemChild'
export default {
	components:{item-child},
	data:{
		info:"i am from father"
	}
}
</script>
//子组件itemChild.vue
<template>
	<div>{{toChildInfo}}</div>
</template>
<script>
export default {
	props:['toChildInfo']   //必须是字符串形式
}
</script>

2.子组件向父子组件传递数据

//父组件
<template>
	<div>
		<item-child @from-child="showInfo"></item-child>
	</div>
</template>
<script>
import item-child from "./itemChild"
export default {
	methods:{
		showInfo(val){
			console.log(val);
		}
	}
}
</script>
//子组件itemChild.vue
<template>
	<div>
		<input type="text" v-model="inputVal" @blur="toParent()"/>
	</div>
</template>
<script>
export default {
	data:{inputVal:''},
	methods:{
		toParent(){
			this.$emit('from-child',this.inputVal);
		}
	}
}
</script>

3.非父子组件传递数据
在实际中还没用用到,其他博客可以搜到直通车
######组件属性

  1. prop
  2. keep-alive
    组件实例在组件第一次被创建的时候缓存下来。
    应用场景:有1、2两个选项卡,1选项卡中有3个选项卡。当在1选项卡中选中1.2选项卡,切换到2选项卡,再切换到1选项卡时1选项卡显示的是1.1选项卡的内容,而不是切换到2选项卡之前的1.2选项卡。突然发现好拗口,呃…官网有直白的效果更容易理解吧—>直通车
vue实例

1.数据data
当模板被多次复用时,data应该在函数中返回一个对象,而不是直接返回。这样可以使得每次模板在调用时都可以生成独一份的data(实例)。写法如下:

data(){
	return {

	}
}

2.方法methods
3.计算属性computed
基于依赖进行缓存。只有当相关依赖发生改变时,计算属性才会重新求值。
4.侦听属性watch
当某个数据发生变化时,执行侦听属性。
5.生命周期钩子
- created 该钩子函数是在(数据已和data绑定,初始化事件)之后执行的
- mounted 该钩子函数是在(虚拟DOM创建完成,并挂载到DOM元素上)之后执行的
- updated
- destroyed 调用钩子函数时,this指向调用它的vue实例。如果使用箭头函数,则会报错。
直通车

路由

控制路由跳转的几种方式:

  1. 给DOM元素添加事件,事件中使用路由
this.$router.push(path:string);

2.使用router-link映射路由

<router-link to="path"></router-link>

原理就是在模板加载时,将router-link转换为a,href设置为属性to的值
3. 配置路由
配置好路由,直接给html中a链接的href属性赋值

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router{
	//mode为history使得URL不再带有#的hash模式
	mode:'history',
	routes:[
		{path:'/',component:index},
		{path:'/author',component:author,
		 children:[
			 {path:'/article',component:article},
			 {path:'/hots',component:hots}
	     ]}
	 ]
}

4.监听路由

watch:{
	$route(to,from){}
}
模块化
### 基于 Vue2 的开源项目示例 #### 1. **Vue2-Elm** Vue2-Elm 是一个基于 Vue2.x 和 Element UI 组件库的大型单页面应用实战项目源码。该项目通过构建一个完整的后台管理系统,展示了 Vue.js 技术栈的实际运用,适合开发者学习并掌握实际项目开发经验[^1]。 项目地址: [https://gitcode.com/gh_mirrors/vu/vue2-elm](https://gitcode.com/gh_mirrors/vu/vue2-elm) --- #### 2. **Vue2Leaflet** Vue2Leaflet 是一个用于在 Vue.js 2 项目中集成 Leaflet 地图功能的开源库。它提供了一系列 Vue 组件来简化地图操作,并支持多种自定义选项。以下是其主要目录结构: - `dist/`: 包含编译后的 JavaScript 文件,可直接在项目中引用。 - `examples/`: 提供了一些示例代码,展示如何使用 Vue2Leaflet 组件。 - `src/components/`: 存放 Vue 组件,每个组件对应一种 Leaflet 地图功能。 - `src/utils/`: 存放通用工具函数。 - `index.js`: 项目的入口文件,负责导出所有可用组件[^3]。 项目地址: [https://gitcode.com/gh_mirrors/vu/Vue2Leaflet](https://gitcode.com/gh_mirrors/vu/Vue2Leaflet) --- #### 3. **Learning-Vuejs-2** 此项目是《Learning Vue.js 2》一书的配套代码仓库,由 Packt 出版社发布。该资源涵盖了 Vue.js 2 的核心概念和实践案例,非常适合初学者深入理解 Vue.js 2 的工作原理及其生态系统[^5]。 项目地址: [https://gitcode.com/gh_mirrors/le/Learning-Vuejs-2](https://gitcode.com/gh_mirrors/le/Learning-Vuejs-2) --- #### 4. **Vue2 官方教程及相关资料** Vue2 官方教程是一个全面的学习资源集合,旨在帮助开发者快速入门 Vue.js 并深入了解其高级特性。此外,还提供了丰富的插件生态和社区支持[^4]。 项目地址: [https://gitcode.com/gh_mirrors/vue2/vue2](https://gitcode.com/gh_mirrors/vue2/vue2) --- ### 示例代码:Vue2 及其组件基础 以下是一段简单的 Vue2 示例代码,演示了如何创建一个基本的数器组件: ```javascript <template> <div> <p>当前数值: {{ count }}</p> <button @click="increment">增加</button> </div> </template> <script> export default { data() { return { count: 0, }; }, methods: { increment() { this.count++; }, }, }; </script> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值