Vue开发实战学习笔记

  • 简易的Vue程序
  • 组件
  • 事件
  • 插槽
  • 单文件组件
  • 双向绑定
  • 虚拟DOM与key属性
  • 组件更新
    • 状态data与属性props
    • vue的响应式更新
  • 计算属性和侦听器
    • 计算属性 computed
    • 侦听器watch
    • computed vs watch
  • 生命周期的应用场景和函数式组件
    • 生命周期
    • 函数式组件
  • 指令
  • provide/inject
  • 跨层级组件实例

简易的Vue程序

在vscode中新建一个html文件，输入html5快捷生成代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

添加vue的相关代码 查看双向绑定的结果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">{{message}} {{message + message}}<div :id="message"></div><ul><li v-for="item in list"><span v-if="!item.del">{{item.title}}</span><span v-else style="text-decoration: line-through">{{item.title}}</span><button v-show="!item.del">删除</button></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {message: 'hello world',list: [{title: '课程1',del: false}, {title: '课程2',del: true}],}})</script>
</body></html>

组件

为了使用小型、独立和可复用的模块构建大型应用我们引入了组件的概念，来看一下基于上述内容的组件第一次抽象，我们抽离出了todo-list组件和todo-item组件：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">{{message}} {{message + message}}<div :id="message"></div><!-- <ul><todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item></ul> --><todo-list></todo-list></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>Vue.component('todo-item', {props: {title: String,del: {type: Boolean,default: false,},},template: `<li><span v-if="!del">{{title}}</span><span v-else style="text-decoration: line-through">{{title}}</span><button v-show="!del">删除</button></li>`,data: function() {return {}},methods: {},})Vue.component('todo-list', {template: `<ul><todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item></ul>`,data: function() {return {list: [{title: '课程1',del: false}, {title: '课程2',del: true}],}}})var vm = new Vue({el: '#app',data: {message: 'hello world',}})</script>
</body></html>

事件

代码中的@click是绑定原生组件的方法，@delete是绑定自定义组件的方法，我们在handleClick中通过this.$emit('delete', this.title)抛出事件，在handelDelete中就能拿到对应的参数了。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">{{message}} {{message + message}}<div :id="message"></div><!-- <ul><todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item></ul> --><todo-list></todo-list></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>Vue.component('todo-item', {props: {title: String,del: {type: Boolean,default: false,},},template: `<li><span v-if="!del">{{title}}</span><span v-else style="text-decoration: line-through">{{title}}</span><button v-show="!del" @click="handleClick">删除</button></li>`,data: function() {return {}},methods: {handleClick(e) {console.log('点击删除按钮')this.$emit('delete', this.title)}},})Vue.component('todo-list', {template: `<ul><todo-item @delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del"></todo-item></ul>`,data: function() {return {list: [{title: '课程1',del: false}, {title: '课程2',del: true}],}},methods: {handleDelete(val) {console.log('handleDelete', val)}}})var vm = new Vue({el: '#app',data: {message: 'hello world',}})</script>
</body>
</html>

诸如冒泡等方法也可以在vue中通过修饰符来进行实现。

插槽

在上面的代码中，我们的todo-item是直接写死在todo-list里面，这样其实是不是很合理的，我们希望能往todo-list中传入todo-item这样就能够自动进行渲染。
但是当我们把todo-item从todo-list中取出来，todo-list中就只剩下了ul标签，那么todo-item应该放置在什么位置呢？在这个基础上引入了插槽的概念。
插槽分为匿名插槽、具名插槽和作用域插槽，在作用域插槽中，template绑定:value = "value" ，父组件通过v-slot:pre-icon="{value}"来拿到value值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">{{message}} {{message + message}}<div :id="message"></div><!-- <ul><todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item></ul> --><todo-list><todo-item @delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del"><template v-slot:pre-icon="{value}"><span>前置图标 {{value}}</span></template></todo-item></todo-list></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>Vue.component('todo-item', {props: {title: String,del: {type: Boolean,default: false,},},template: `<li><slot name="pre-icon" :value="value"></slot><span v-if="!del">{{title}}</span><span v-else style="text-decoration: line-through">{{title}}</span><slot name="suf-icon">												


											

唐金州的Vue开发实战学习笔记（基础篇）相关推荐
	

    
								
  1. 唐金州的Vue开发实战学习笔记（生态篇）
		
    Vue开发实战学习笔记 Vuex Why Vuex How Vuex Vuex的核心概念和底层原理 Vuex的最佳实践 Vue Router Why Vue Router 路由类型及底层原理 Nuxt ...
    
		
    2. 
						
  2. 三十五、Linux性能优化实战学习笔记-基础篇：C10K 和 C1000K 回顾
		
    目录 C10K 怎么在32位系统的系统中支持并发 1 万的请求呢? 网络I/O 模型优化 I/O 多路复用的分类 select 或者 poll epoll 为什么Redis通常是选择使⽤epoll这种 ...
    
		
    3. 
						
  3. “物联网开发实战”学习笔记-（四）智能音箱制作和语音控制
		
    "物联网开发实战"学习笔记-(四)智能音箱制作和语音控制 这次来造一个属于自己的智能音箱,这里详细介绍了智能音箱的语音控制的实现. 智能音箱的技术架构 智能音箱主要涉及拾音.前端信 ...
    
		
    4. 
						
  4. “物联网开发实战”学习笔记-（二）手机控制智能电灯
		
    "物联网开发实战"学习笔记-(二)手机控制智能电灯 如果搭建好硬件平台后,这一次我们的任务主要是调试好智能电灯,并且连接到腾讯云的物联网平台. 腾讯云物联网平台 腾讯物联网平台的优 ...
    
		
    5. 
						
  5. “物联网开发实战”学习笔记-（五）根据土壤湿度、环境温湿度和光照强度自动浇花
		
    "物联网开发实战"学习笔记-(五)根据土壤湿度.环境温湿度和光照强度自动浇花 研究场景需求 自动浇花这个场景,很明显是为了自动控制水泵,及时给植物补充水分.同时用户的目的并不只是浇 ...
    
		
    6. 
						
  6. Redis学习笔记①基础篇_Redis快速入门
		
    若文章内容或图片失效,请留言反馈.部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 资料链接:https://pan.baidu.com/s/1189u6u4icQYHg_9_7ovWmA( ...
    
		
    7. 
						
  7. MySQL学习笔记-基础篇1
		
    MySQL 学习笔记–基础篇1 目录 MySQL 学习笔记--基础篇1 1. 数据库概述与MySQL安装 1.1 数据库概述 1.1.1 为什么要使用数据库 1.2 数据库与数据库管理系统 1.2.1 ...
    
		
    8. 
						
  8. MySQL学习笔记-基础篇2
		
    MySQL学习笔记-基础篇2 目录 MySQL学习笔记-基础篇2 8.子查询 8.1 需求分析与问题解决 8.1.1 实际问题 8.1.2 子查询的基本使用 8.1.3 子查询的分类 8.2 单行子查 ...
    
		
    9. 
						
  9. 小程序开发实战学习笔记
		
    序言 原本题目写的时候实战经验,但是觉着算不上什么经验,就改成学习笔记了? 注册小程序账号 开发和发布流程 小范围讨论公公抽离之类 不写公共样式因为不知道别人会不会用你的 目录结构 小程序包含一个描述 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. php中@作用,@字符在PHP中有什么作用？
		
    2. 
						
  2. C#-微信公众平台接口-上传临时素材
		
    3. 
						
  3. jQuery：localStorage用法
		
    4. 
						
  4. 二叉树的层序遍历 IIPython解法
		
    5. 
						
  5. linux拉取指定时间内,Linux 日期和时间操作详解
		
    6. 
						
  6. 信息学奥赛一本通 1978：【18NOIP普及组】标题统计 | 洛谷 P5015 [NOIP2018 普及组] 标题统计
		
    7. 
						
  7. SpringCloud系列博客父工程xml依赖
		
    8. 
						
  8. 11月24日 layouts and rendering in rails(部分没有看)
		
    9. 
						
  9. Python模拟分析演员之间亲密程度
		
    10. 
						
  10. 2006. 差的绝对值为 K 的数对数目
		
    11. 
						
  11. Winform 初识记录
		
    12. 
						
  12. Python3.6机器学习sklearn中导入train_test_split库出错“Unresolved reference ‘train_test_split’”
		
    13. 
						
  13. 【问答系统】QA问答系统(Question Answering)
		
    14. 
						
  14. 通过napalm-huawei-vrp模块对华为交换机信息进行分析（ENSP模拟器）
		
    15. 
						
  15. 2018只剩32天，动着心思想跳槽的你，还要YY到什么时候
		
    16. 
						
  16. python对文件操作的统一步骤_基于Python实现对各种数据文件的操作
		
    17. 
						
  17. 微信小程序使用QQ音乐API完整实例
		
    18. 
						
  18. SPSS教程—实现多层感知器神经网络
		
    19. 
						
  19. php实现豆瓣isbn查询API接口制作
		
    20. 
						
  20. DDWRT 下设置OPEN×××
		
    21. 
		

	


热门文章
	

    
									
  1. android+360加固教程,Jenkins+Android自动打包续2：用360加固程序加固
			
    2. 
						
  2. 荣耀10xmax升级鸿蒙,荣耀10xmax和10x评测 荣耀X10 Max比X10“Max”在哪儿？
			
    3. 
						
  3. OpenInfra Days官网正式上线，分论坛议题征集已开始！
			
    4. 
						
  4. 最新小程序源码（微信/抖音小程序源码和小程序游戏源码开发）
			
    5. 
						
  5. 个人收藏-学习SHarePoint比较不错的网站
			
    6. 
						
  6. Jenkins和GitLab CI/CD：CI/CD工具之战
			
    7. 
						
  7. 【秋招纪实录】一篇特别正经的【国企】求职经验分享
			
    8. 
						
  8. ESP8266读DHT11温湿度，开发微信小程序实时显示
			
    9. 
						
  9. 组织机构同步和人员同步
			
    10. 
						
  10. 为什么要使用PM2及PM常用指令
			
    11.