Vue(day02-05~14: 自定义指令、钩子函数、计算属性和侦听器、过滤器、生命周期)

最新推荐文章于 2022-08-03 14:45:04 发布
最新推荐文章于 2022-08-03 14:45:04 发布
阅读量143 收藏
点赞数
分类专栏： 框架 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44764873/article/details/104132802
版权

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。
有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：

<input v-focus>

练习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--自定义指令用法-->
			<input type="text" v-focus/>
			<input type="text" v-color='msg'/>
		</div>
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			/*
			 * 自定义指令
			 */
			//全局指令:使用范围
			//inserted钩子函数
			Vue.directive('focus',{
				inserted: function(el){
					//获取元素焦点
					el.focus();
				}
			});
//			Vue.directive('color',{
//				bind: function(el,binding){
//					//根据指令的参数设置背景色 
//					//console.log(binding.value.color);
//					el.style.backgroundColor = binding.value.color;
//				}
//			});
			var vm = new Vue({
				el: '#app',
				data: {
					msg: {
						color: 'red'
					}
				},
				methods:{
					
				},
				//局部指令：只能在本组件使用
				directives: {
					color: {
						bind: function(el,binding){
					       el.style.backgroundColor = binding.value.color;
				        }
					}
				}
			});
		</script>
	</body>
</html>

钩子函数

参考Vue官网链接
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode
更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。 binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。 value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

注意：除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

参考资料Vue官网：计算属性和侦听器

计算属性

computed：{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--表达式的计算逻辑可能会比较复杂，使用计算属性可以是模板内容更加简洁-->
			<div>{{msg}}</div>
			<div>{{reverseString}}</div>
		</div>
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					msg: 'Hello'
				},
				//计算属性与方法的区别：计算属性是基于它们的依赖（依赖于data里面的值）进行缓存的；方法不存在缓存
				//计算属性
				computed: {
					reverseString: function(){
						return this.msg.split('').reverse().join('');
					}
				}
			})
		</script>
	</body>
</html>

侦听器

watch：{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<span>名：</span>
				<span>
					<input type="text" v-model="firstName" />
				</span>
			</div>
			<div>
				<span>姓：</span>
				<span>
					<input type="text" v-model="lastName" />
				</span>
			</div>
			<div>{{fullName}}</div>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					firstName: 'Jim',
					lastName: 'Green',
					fullName: 'Jim Green'
				},
				//侦听器:数据变化时执行异步或开销较大的操作
				watch: {
					firstName: function(val){
						this.fullName = val + ' ' +this.lastName; 
					},
					lastName: function(val){
						this.fullName = this.firstName + ' ' + val; 
					}
				},
				//31,34-41去掉
//				computed: {
//					fullName: function(){
//						return this.firstName + " " + this.lastName;
//					}
//				}
			})
		</script>
	</body>
</html>

侦听器应用：验证用户名是否可用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--验证用户名是否可用-->
		<div id="app">
			<div>
				<span>用户名：</span>
				<span>
					<input type="text" v-model.lazy="uname"/>
				</span>
				<span>{{tip}}</span>
			</div>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			/*
			 * 1.采用侦听器监听用户名变化
			 * 2.调用后台接口进行验证
			 * 3.根据验证的结果调整提示信息
			 */
			var vm = new Vue({
				el: '#app',
				data: {
					uname: '',
					tip: ''
				},
				methods: {
					checkName: function(uname){
						var that = this;
						//调用接口，但是可以使用定时任务的方式模拟接口调用
						setTimeout(function(){
							//模拟接口调用
							if(uname == 'admit'){
								that.tip = '用户名已经存在，请更换一个';
							}else{
								that.tip = '用户名可以使用';
							}
						},2000)
					}
				},
				watch: {
					uname: function(val){
						//调用后台接口验证用户名的合法性
						this.checkName(val);
						//修改提示信息
						this.tip = '正在验证...';
					}
				}
			})
		</script>
	</body>
</html>

Vue官网：过滤器

过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--过滤器:格式化数据-->
		<div id="app">
			<input type="text" v-model="msg"/>
			<div>{{msg | upper}}</div>
			<div>{{msg | upper | lower}}</div>
			<div :asd='msg | upper'>测试</div>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			/*
			 * 过滤器
			 */
//			Vue.filter('upper',function(val){
//				return val.charAt(0).toUpperCase() + val.slice(1);
//			});
			Vue.filter('lower',function(val){
				return val.charAt(0).toLowerCase() + val.slice(1);
			});
			var vm = new Vue({
				el: '#app',
				data: {
					msg: ''
				},
				//局部绑定
				filters: {
					upper: function(val){
						return val.charAt(0).toUpperCase() + val.slice(1);
					}
				}
			});
		</script>
	</body>
</html>

过滤器应用：格式化日期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{date | format('yyyy-MM-dd')}}</div>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			/*
			 * 过滤器格式化日期
			 */
			//filter参数
			Vue.filter('format',function(value,arg){
				//console.log(value);
				//console.log(arg);
				if(arg == 'yyyy-MM-dd'){
					//13视频有补充
					var ret = '';
					ret += value. getFullYear() + '-' +(value.getMonth()+1) + '-' + value.getDate();
					return ret;
				}
				return value;
			});
			var vm = new Vue({
				el: '#app',
				data: {
					date: new Date()
				},
				methods: {
					
				}
			});
		</script>
	</body>
</html>

生命周期

生命周期
测试代码（关注：mounted）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<button @click="change">更新</button>
			<button @click="destory">销毁</button>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			/*
			 * 生命周期钩子
			 * 挂载（mounted）、更新、销毁
			 */
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '生命周期'
				},
				methods: {
					change: function(){
						this.msg = '123456'
					},
					destory: function(){
						this.$destroy();
					}
				},
				beforeCreate: function(){
					console.log('beforeCreate');
				},
				created: function(){
					console.log('created');
				},
				beforeMount: function(){
					console.log('beforeMount');
				},
				mounted: function(){
					console.log('mounted');
				},
				beforeUpdate: function(){
					console.log('beforeUpdate');
				},
				updated: function(){
					console.log('updated');
				},
				beforeDestroy: function(){
					console.log('beforeDestroy');
				},
				destroyed: function(){
					console.log('destroyed');
				}
			});
		</script>
	</body>
</html>
Lo、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuecrud钩子_理清 Vue 中的钩子函数
weixin_39625747的博客
12-22 419
在开发一般的业务来说，不需要知道 Vue 中钩子函数过多的执行细节。但是如果你想写出足够稳健的代码，或者想开发一些通用库，那么就少不了要深入了解各种钩子的执行时机了。组件生命周期 hook 在组件树中的调用时机先直接看一个例子：import Vue from 'vue';Vue.component('Test', {props: {name: String},template: `{{ name ...
vue使用自定义指令监听组件宽高变化
H1455483319的博客
01-14 643
自定义指令代码 directives: { // 使用局部注册指令的方式 resize: { // 指令的名称 bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象 let width = '' let height = '' function isReize () { const style = document.defaultView.getComputedStyle(
angularJs中自定义directive的数据交互
DaMonh1902的博客
01-12 153
首先放官方文档地址：https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解，它一般用于独立Dom元素的封装，应用场合为控件重用和逻辑模块分离。后者我暂时没接触，但数据交互部分却是一样的。所以举几个前者的例子，以备以后忘记。 directive本身的作用域$scope可以选择是否封闭，不封闭则和其contr...
【Vue】通过自定义指令回顾 v-内置指令
weixin_34241036的博客
09-01 137
Vue.js 的各种指令（Directives）更加方便我们去数据驱动 DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等内置指令，这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上，尽量不去操作增删改 DOM。通过了解如何去自定义指令，可以想象内置指令是如何完成的。 一、自定义指令 在...
vue - 计算属性、监听、自定义指令
weixin_30325487的博客
05-20 103
1.计算属性 <div id="app"> <input type="text" v-model="x"> <input type="text" v-model="y"> {{get}} </div> <script> var app=new Vue({ el:"#...
crud增删改查文件——自定义钩子函数
yehaocheng520的博客
05-26 7779
import {initData,download} from '@/api/data' import {parseTime,downloadFile} from '@/utils/index' import Vue from 'vue' /** CRUD配置 */ function CRUD(options){ const defaultOptions = { tag:'default', //id字段名 idFiled:'id', //标题 title:'', //请求数据的
Vue 图书管理案例：包含过滤器，自定义指令，计算属性，侦听器，生命周期知识点
01-08
=> 箭头函数：函数里面的this指向父级作用域 this.books.some(function(item){})//里面的this指向window this.books.some((item)=>{})//指向父级作用域 2.filter返回的是数组类型 3.forEach，filter，some 的区别和...
详解vue中v-bind:style效果的自定义指令
10-15
Vue.js 是一款流行的前端...自定义指令的生命周期钩子函数提供了一种方式，让我们能在不同阶段对DOM进行精确控制，适应各种复杂场景。在实际开发中，自定义指令可以帮助我们封装复杂逻辑，提高代码的复用性和可维护性。
深入浅析Vue.js计算属性和侦听器
10-18
在Vue.js中，计算属性和侦听器是两个重要的概念，它们帮助我们处理数据的复杂逻辑和响应性。让我们深入探讨这两个特性。 **一、计算属性** 计算属性是Vue.js中用于处理和组合现有数据的便捷方式。它们提供了一个在...
vue-custom-element：Vue自定义元素-Vue.js的Web组件自定义元素
02-06
您可以在查看Vue-custom-element演示 安装 NPM npm install vue-custom-element --save import vueCustomElement from 'vue-custom-element' Vue . use ( vueCustomElement ) ; 要使用vue-cli构建Web组件，必须...
复习vue之自定义指令的生命周期
furfur-jiang的博客
07-18 1269
文章参考自官网，加入自己的例子和理解 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 只会执行一次 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。（注意是update，不是.
看了就懂的vue进阶(自定义指令，侦听器，过滤器，计算属性，生命周期，插槽，组件使用及互相传值)
Aaa_Liao的博客
06-11 503
自定义指令： bind 和 inserted 的区别 bind在inserted之前 bind 时父节点el.parentNode为 null inserted 时父节点el.parentNode存在。 bind是在vue编译解析dom之前调用，inserted在vue编译解析完dom后调用 以后都优先用inserted，因为inserted里获取到的信息比bind中多一些 在钩子函数内部可以通过第二个参数binding的value属性，获取到指令绑定的参数 指令的修饰符
vue使用自定义指令监听DOM元素变化
hj_001的博客
07-16 4335
注册指令： directives:{ resize: { // 指令的名称 bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象 console.log(el,"绑定",binding); let width = '', height = ''; function isReize() { const style = document.defaultV
vue.js中在js获取指定日期到现在时间的天数
热门推荐
ray_352801250的博客
01-03 1万+
/** * 获取指定日期(字符串类型)到当前时间的天数 * @param {Object} sDate1 格式:2018-01-04 */ dateDiff : function(sDate1) { var date2 = new Date(); var date1 = new Date(Date.parse(sDate1.replace(/-/
vuecrud钩子_Vue 实例中的生命周期钩子详解
weixin_39667509的博客
12-22 347
Vue 实例中的生命周期钩子Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。Vue 实例在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue 时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂...
redis 分布式锁 看门狗_161、缓存-分布式锁-Redisson-lock看门狗原理
weixin_39611506的博客
12-22 114
大型分布式架构电商平台，技术多面、业务深入，全网无出其右。技术涵盖：微服务架构+分布式+全栈+集群+部署+自动化运维+可视化CICD，对标阿里P6/P7，冲击40-60w年薪。项目由业务集群系统+后台管理系统构成，打通了分布式开发及全栈开发技能，包含前后分离全栈开发、Restful接口、数据校验、网关、注册发现、配置中心、熔断、限流、降级、链路追踪、性能监控、压力测试、系统预警、集群部署、持续集成...
【vue】a-tree中使用自定义指令监听DOM元素变化
hggl_bera的博客
08-03 1426
ant-design中a-tree自定义指令监听DOM元素变化修改样式
Element-ui表单验证，输入值正确却不能通过验证
weixin_44764873的博客
03-10 1700
Element-ui表单验证，输入值正确却不能通过验证 这里运用vue-cli脚手架，安装element-ui插件来写的 直接上图 当然不排除其他错误，注意点有 代码： <template> <div class="login_container"> <div class="login_box"> <!-...
vue 自定义指令 生命周期钩子函数
最新发布
09-18
Vue自定义指令有一些生命周期钩子函数可以使用。以下是Vue自定义指令可用的生命周期钩子函数： 1. bind：指令第一次绑定到元素时调用，只调用一次。 2. inserted：被绑定元素插入父节点时调用（仅保证父节点存在，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值