Vue 全局AIP 详解

最新推荐文章于 2022-07-11 10:23:02 发布
最新推荐文章于 2022-07-11 10:23:02 发布
阅读量412 收藏 1
点赞数
分类专栏： Vue 文章标签： Vue 全局API
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34531165/article/details/83088352
版权

所有demo均可以在技术胖博客找到，他的博客写得非常好，也经常更新一些新的知识，有兴趣的小伙伴可以移步去他的博客。链接：web前端技术

1.vue.directive自定义指令

<!DOCTYPE html>
<html>
<head>
	<title>vue.directive自定义指令</title>
</head>
<body>
	<h1>vue.directive自定义指令</h1>
	<hr>
	<div id="app">
		<div>定义一些属于自己的指令</div>
		<div v-jspang="red">{{count}}</div>
		<button @click="addCount">add</button>
	</div>

	<button onclick="unbind()">解绑</button>

	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>

		function unbind(){
			app.$destroy()
		}
		// el: 指令所绑定的元素，可以用来直接操作DOM。
		// binding: 一个对象，包含指令的很多信息。
		// vnode: Vue编译生成的虚拟节点

		Vue.directive('jspang',{
			bind:function(el,binding){//被绑定
				el.style = 'color:'+binding.value
			    console.log('1 - bind');
			},
			inserted:function(){//绑定到节点

			    console.log('2 - inserted');
			},
			update:function(){//组件更新
			    console.log('3 - update');
			},
			componentUpdated:function(){//组件更新完成

			    console.log('4 - componentUpdated');
			},
			unbind:function(){//解绑
			    console.log('5 - unbind');
			}
		})

// 		bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
// 		inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
//		update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
// 		componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
// 		unbind:只调用一次，指令与元素解绑时调用。


		var app = new Vue({
			el:"#app",
			data:{
				count: 10,
				red:'red'
			},
			methods:{
				addCount(){
					this.count++;
				}
			}
		})
	</script>
</body>
</html>

2.Vue.extend构造器的延伸

<!DOCTYPE html>
<html>
<head>
	<title>Vue.extend构造器的延伸</title>
</head>
<body>
	<h1>Vue.extend构造器的延伸</h1>
	<hr>
	<div id="app">
		<div>当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上</div>
		<author></author>
	</div>

	<script type="text/javascript" src="../assets/js/vue.js"></script>
	<script type="text/javascript">
		var authorExtend = Vue.extend({
			template:"<p><a :href='authorURL'>{{authoName}}</a></p>",
			data:function(){
				return{
					authoName: ' 小镇青年，心怀远方 ',
					authorURL:'https://blog.csdn.net/sinat_34531165/'
				}
			}
		}) 

		new authorExtend().$mount('author')
	</script>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				message:"你好，世界！"
			}
		})
	</script>
</body>
</html>

3.Vue.set全局操作

<!DOCTYPE html>
<html>
<head>
	<title>Vue.set全局操作</title>
</head>
<body>
	<h1>Vue.set全局操作</h1>
	<hr>
	<div id="app">
		<div>Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。</div>
		<div>{{count}}</div>
		<button @click="vueAdd">Vue对象的方法添加</button>
	</div>
	<button onclick="vueSet()">Vue.set改变</button>
	<button onclick="add()">直接操作外部数据</button>

	<script type="text/javascript" src="../assets/js/vue.js"></script>
	
	<script type="text/javascript">

	</script>
	<script>
		var outData = {
			count:0
		}

		function vueSet(){
			Vue.set(outData,'count',0)
		}
		function add(){
			outData.count++;
		}
		var app = new Vue({
			el:"#app",
			data:outData,
			methods:{
				vueAdd(){
					this.count++;
				}
			}
		})
	</script>
</body>
</html>

由于Javascript的限制，Vue不能自动检测以下变动的数组。当你利用索引直接设置一个项时，vue不会为我们自动更新。当

你修改数组的长度时，vue不会为我们自动更新。

4.Vue.set番外篇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Vue.set 全局操作</title>
</head>
<body>
    <h1>Vue.set 全局操作</h1>
    <hr>
    <div id="app">
    	<div>
    		由于Javascript的限制，Vue不能自动检测以下变动的数组。当你利用索引直接设置一个项时，vue不会为我们自动更新。当你修改数组的长度时，vue不会为我们自动更新。
    	</div>
    	<div>{{count}}</div>
        <ul>
            <li v-for="item in arr">{{item}}</li>
            <button @click="pushArr()">内部更改</button>
        </ul>
    </div>
    <button onclick="add()">外部添加</button>
 	<button onclick="addSet()">v.set外部添加</button>
    <script type="text/javascript">
    	var outData = {
    		count:0,
    		arr:['aaa','bbb','ccc']
    	}
    	function add(){
    		//如果注释掉这行 则下行不会被监听到
    		// outData.count++; 
    		app.arr[1] = 'ddcccd';
    		console.log('我已经执行了');
    	}
    	function addSet(){
    		let i = outData.count++; 
    		Vue.set(app.arr,1,i)
    	}

       	var app = new Vue({
    		el:"#app",
    		data:outData,
    		methods:{
    			pushArr(){
    				app.arr[1] = 'ddd';
    				console.log('我已经执行了')
    			}
    		}
       	})
    </script>
</body>
</html>

5.Vue 的生命周期

<!DOCTYPE html>
<html>
<head>
	<title>Vue 的生命周期</title>
</head>
<body>
	<h1>Vue 的生命周期</h1>
	<hr>
	<div id="app">
		<div>{{count}}</div>
		<button @click="add">add</button>
	</div>
	
	<button onclick="app.$destroy()">销毁 解绑</button>


	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var app = new Vue({
			el:"#app",
			data:{
				count:0
			},
			methods:{
				add(){
					this.count++;
				}
			},
			beforeCreate(){
				console.log("1-beforeCreate 初始化之后");
			},
			created(){
				console.log("2-created 创建完成");
			},
			beforeMount(){
				console.log("3-beforeMount 挂载之前");
			},
			mounted(){
				console.log("4-mounted 被创建");
			},
			beforeUpdate(){
				console.log("5-beforUpdeta 数据更新之前")
			},
			updated(){
				console.log("6-updated 数据更新之后")
			},
			activated(){
				console.log("7-activated")
			},
			deactivated(){
				console.log("8-activated")
			},
			beforeDestroy(){
				console.log("8-beforeDestroy 销毁之前")
			},
			destroyed(){
				console.log("8-destroyed 销毁之后")
			}
		})
	</script>
</body>
</html>

6.Template 制作模版

<!DOCTYPE html>
<html>
<head>
	<title>Template 制作模版</title>
</head>
<body>
	<h1>Template 制作模版</h1>
	<hr>
	<div id="app">{{message}}</div>



	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var app = new Vue({
			el:"#app",
			data:{
				message:"你好，世界！"
			},
			template:`
				<div style="color:red;">直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。</div>
			`
		})
	</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Template 制作模版</title>
</head>
<body>
	<h1>Template 制作模版</h1>
	<hr>
	<div id="app">{{message}}</div>

	<template id="demo2">
		<h2 style="color:red;">template标签里的模板</h2>
	</template>

	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var app = new Vue({
			el:"#app",
			data:{
				message:"你好，世界！"
			},
			template:"#demo2"
		})
	</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Template 写在script标签里的模板</title>
</head>
<body>
	<h1>Template 写在script标签里的模板</h1>
	<hr>
	<div id="app">{{message}}</div>

	<script type="x-template" id="demo3">
		<h2 style="color:red;">Template 写在script标签里的模板,这种写模板的方法，可以让模板文件从外部引入。</h2>
	</script>

	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var app = new Vue({
			el:"#app",
			data:{
				message:"你好，世界！"
			},
			template:"#demo3"
		})
	</script>
</body>
</html>

7.Component 初识组件

<!DOCTYPE html>
<html>
<head>
	<title>Component 初识组件</title>
</head>
<body>
	<h1>Component 初识组件</h1>
	<hr>
	<div>前言（废话）：component组件是Vue学习的重点、重点、重点，重要的事情说三遍。所以你必须学好Vue component。其实组件就是制作自定义的标签，这些标签在HTML中是没有的。比如：，那我们就开始学习这种技巧吧</div>
	<hr>
	<div id="app">
		{{message}}
		<jspang></jspang>
		<panda></panda>

		<div>组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。</div>
	</div>



	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		// 注册全局组件
		Vue.component('jspang',{
			template:`
				<div style="color:red;">全局化注册的jspang标签</div>
			`
		})
		var app = new Vue({
			el:"#app",
			data:{
				message:"你好，世界！"
			},
			components:{
				'panda':{
					template:`
						<div style="color:blue;">局部注册组件局部,构造器里的components 是加s的，而全局注册是不加s的。</div>
					`
				}
			}
		})
	</script>
</body>
</html>

8.Component 组件props 属性设置

<!DOCTYPE html>
<html>
<head>
	<title>Component 组件props 属性设置</title>
</head>
<body>
	<h1>Component 组件props 属性设置</h1>
	<hr>
	<div id="app">
		<panda :formhere="message"></panda>
	</div>



	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var app = new Vue({
			el:"#app",
			data:{
				message:"你好，世界！"
			},
			components:{
				panda:{
					template:`<div style="color:red;">Panda from {{formhere}}</div>`,
					props:["formhere"]
				}
				
			}
		})
	</script>
</body>
</html>

9.Component 父子组件关系

<!DOCTYPE html>
<html>
<head>
	<title>Component 父子组件关系</title>
</head>
<body>
	<h1>Component 父子组件关系</h1>
	<hr>
	<div id="app">
		<div v-text="message"></div>
		<div>mes:{{message}}</div>
		<father></father>
	</div>

	

	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var son = {
			template:`
				<div style="color:#ffc107;">
					外部构造器 son,子组件必须写在父组件前面，否则会报错
				</div>
				`
		}
		var father = {
			template:`
				<div>
					<div>外部构造器 Father</div>
					<son></son>
				</div>

			`,
			components:{
				"son":son
			}
		}

		
		var app = new Vue({
			el:"#app",
			data:{
				message:"你好，世界！"
			},
			components:{
				"father":father
			}
		})
	</script>
</body>
</html>

10.Component 标签

<!DOCTYPE html>
<html>
<head>
	<title>Component 标签</title>
</head>
<body>
	<h1>Component 标签</h1>
	<hr>
	<div>Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件</div>
	<div id="app">
		{{message}}

		<component-a></component-a>
		<component-b></component-b>
		<component-c></component-c>
		<hr>
		<component :is="who"></component>	
		<button @click="changeComponent">动态切换组件</button>
	</div>



	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var componentA = {
			template:`<div style="color:red;">我是componentA</div>`
		}
		var componentB = {
			template:`<div style="color:green;">我是componentB</div>`
		}
		var componentC = {
			template:`<div style="color:pink;">我是componentC</div>`
		}
		var app = new Vue({
			el:"#app",
			data:{
				message:"你好，世界！",
				who: 'componentA'
			},
			components:{
				"componentA":componentA,
				"componentB":componentB,
				"componentC":componentC
			},
			methods:{
				changeComponent(){
					if (this.who == 'componentA') {
						this.who = 'componentB'
					}else if(this.who == 'componentB'){
						this.who = 'componentC'
					}else if(this.who == 'componentC'){
						this.who = 'componentA'
					}
				}
			}
		})


	</script>
</body>
</html>

 

绪锋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记 ——全局AIP（下）（Vue.nextTick、Vue.extend、Vue.filter）
weixin_43340295的博客
09-01 177
Vue.nextTick() 将回调函数延迟在下次dom更新数据后调用，当数据更新了，在dom中渲染后，自动调用该函数。 写法： Vue.nextTick([callback,context]) 参数： {Function} [callback] {Object} [context] 什么时候需要用Vue.nextTick()？ 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。 在created()钩子函数执行的时候DOM还没有进行
java aip 分析_Java I/O API之性能分析 (下)(转)
weixin_35212962的博客
02-26 81
四、注册与处理过程详解接下来我们要分析Connection的register()方法。前面我们总是说用Selector注册的连接，其实这是一种简化的说法。实际上，用Selector注册的是一个java.nio.channels.SocketChannel对象，但只针对特定的I/O操作。注册之后，有一个java.nio.channels.SelectionKey被返回。这个选择键可以通过attach...
总结一下aipclude单页面引入vue常用的方法
GAOJINGZHEN36的博客
01-05 423
2019年主要做的是apiclude单页面引入vue开发APP。 以下是常用的一些方法总结，在这里汇总一下吧，也算是对过去进行总结，并希望2020年能有更多的收获； Alert提示内容 api.toast({ msg: rs.msg, duration: 2000, location: 'bottom' }); placeholder样式 ::-webkit-input-place...
api如何使用_如何绑定终端IP进行授权使用代理IP
weixin_39814088的博客
11-20 752
站大爷的代理IP使用有两种授权模式，分别是终端IP授权和“用户名+密码”授权，用户可根据需要进行选择授权模式，“用户名+密码”授权可以参考《如何使用带有用户名密码认证的HTTP(S)代理》，那么终端IP授权模式应该如何绑定终端IP呢？一、进入后台手动绑定终端IP开通产品后，进入后台管理的产品管理，单击所开通的产品进入管理面板，在最右侧的管理下，可以看到绑定终端IP，单击进入后可以看到“绑定终端IP...
vue 选项API和组合API的区别
哈
07-11 679
Vue2中的Options API在一个vue文件中的methods、computed、watch、data中定义属性和方法，共同处理页面逻辑。这种方式有一个明显的缺点，一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小了还好，项目大了以后一个methods中会包含几十种方法，维护代码的时候往往会分不清这个方法对应这哪个功能，增加了代码的维护时间。 Vue3中舍弃了这种 Options API，而换用 Composition API。在vue3 Composition API中，组件根据
vue自定义全局共用函数详解
10-18
今天小编就为大家分享一篇vue自定义全局共用函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 全局loading组件实例详解
08-27
Vue 全局loading组件实例详解 本文主要介绍了 Vue 全局loading组件的实例详解，旨在帮助开发者快速了解和掌握该组件的使用方法和实现原理。 一、组件的安装和卸载 在 loading.js 文件中，我们可以看到 Loading ...
Vue之mixin全局的用法详解
10-18
Vue的全局`mixin`是通过`Vue.mixin()`方法实现的，它接收一个对象作为参数，这个对象包含要混合到所有Vue实例中的属性和方法。例如： ```javascript const mixin = { methods: { formatDate(date, fmt = 'YYYY年M...
详解VUE 定义全局变量的几种实现方式
11-26
在Vue.js开发中，全局变量的管理是必不可少的，特别是在模块化的项目中。全局变量能够使得不同组件之间共享数据，简化复杂性。本文将详细解析Vue定义全局变量的三种主要实现方式。 1. **全局变量专用模块** 这种...
详解Vue 全局变量，局部变量
12-08
局组件和局部组件 1.先定义组件 Vue.component(‘组件名’, { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 ...全局组件案例
AIP软件（可用，不用注册）
01-11
AIP软件（可用，不用注册）
sdk aip 文档中文版
03-19
SDKapi中文文档，真正的中文文档，而且还可以自己更新文档内容。
vue2.0全局组件之pdf详解
08-30
Vue2.0 全局组件之 PDF 详解 在 Vue2.0 中，使用全局组件来实现 PDF 文件的预览是一种常见的需求。以下是关于 Vue2.0 全局组件之 PDF 详解的知识点总结： 1. 使用 pdf.js 库 在该组件中，我们使用了 Mozilla 开发...
vue全局使用axios的方法实例详解
10-17
主要介绍了vue全局使用axios的方法实例详解，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue2 全局变量的设置方法
08-27
Vue2 全局变量的设置方法 Vue2 中设置全局变量有两种方法：全局变量专用模块和全局变量模块挂载到 Vue.prototype 里。 1. 全局变量专用模块 全局变量专用模块是以一个特定模块来组织管理这些全局量，需要引用的...
Vue的一些API理解整理
HeliumLau的博客
04-15 1万+
全局配置（Vue.config）Vue.config是一个与全局配置有关的对象，可以在启动应用之前修改下列属性。1.silent类型： Boolean 取消Vue所有的日志和警告 Vue.config.silent = false2.optionMergeStrategies类型：Function 自定义合并策略的选项。 合并策略选项分别接受第一个参数作为父实例，第二个参数为子实例，Vue实
vue-cli&webpack&arcgis API For JS的天坑之路（一）
realDE的博客
04-19 1万+
写在前面的话（背景交代）最近参加esri比赛，但是又想趁机接触前端最新的一些框架和技术，所以，毅然决然的踏上了这个天坑之路。我现在只是成功的把地图渲染出来了，所以，我也不知道会不会有天坑二的出现。新建vue-cli工程如何用vue-cli + webpack构建一个工程，网上一大堆的代码，我就不赘述了。比如这个就是很好地入门文章，先要做的还是要把vue-cli和webpack的模块划分好，框架搭建好
vue之API—目录提示
HZKang的博客
09-29 1342
费老大劲儿把vue的api目录加提示手打了一遍，加深印象！**全局配置**silent 取消vue所有日志警告devtools 配置是否允许vue-devtools检查代码。errorHandler 指定组件的渲染和观察期间未捕获错误的处理函数warnHandler 为vue运行时警告赋予一个自定义句柄ignore
快速使用Vue3最新的15个常用API（1W5+字详解，建议收藏）
热门推荐
零一的博客
11-20 2万+
大家都知道，现在Vue3的各个版本已经陆续发布了，并且有很多的团队已经着手各个库的开发与Vue2向Vue3的升级，我们当然也不能落后，所以赶紧将你手中的Vue2升级到Vue3，跟着本文一起学习新的API吧
Vue全局使用axios配置详解
"这篇文档是关于北京启明星辰信息安全技术有限公司的泰合信息安全运营中心系统-业务支撑安全管理系统的用户手册，详细介绍了系统默认配置和使用方法，特别是涉及到vue全局使用axios的实例。" 在文档中，系统默认...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值