文档章节

vue基础知识练习整理2

一个yuanbeth
 一个yuanbeth
发布于 07/18 14:13
字数 2418
阅读 16
收藏 0

一、发送AJAX请求

<div id="demo1">
		<button @click="send">发送AJAX请求</button>
		<button @click="sendGet">GET方式发送AJAX请求</button>
		<button @click="sendPost">POST方式发送AJAX请求</button>
		<hr>
		<br>
		GitHub ID: <input type="text" v-model="uid">
		<button @click="getUserById(uid)">获取指定GitHub账户信息并显示</button>
		<br>
		姓名:{{user.name}} <br>
		头像:<img :src="user.avatar_url" alt="">
		
		<hr>

		<button @click="sendJSONP">向360搜索发送JSONP请求</button>
		<button @click="sendJSONP2">向百度搜索发送JSONP请求</button>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
	let vm = new Vue({
       el:'#demo1', 
       data:{
			user:{
				// name:'alice',
				// age:19
			},
			uid:''
		},
       methods:{
			send(){
				axios({
					method:'get',
					url:'user.json'
				}).then(function(resp){
					console.log(resp.data);
				}).catch(resp => {
					// console.log(resp);
					console.log('请求失败:'+resp.status+','+resp.statusText);
				});
			},
			sendGet(){
						// axios.get('server.php?name=tom&age=23')
						axios.get('server.php',{
							params:{
								name:'alice',
								age:19
							}
						})
						.then(resp => {
							console.log(resp.data);
						}).catch(err => {
							console.log('请求失败:'+err.status+','+err.statusText);
						});
					},
			sendPost(){
				// axios.post('server.php',{
				// 		name:'alice',
				// 		age:19
				// })
				// axios.post('server.php','name=alice&age=20&') //方式1
				axios.post('server.php',this.user,{
					transformRequest:[
						function(data){
							let params='';
							for(let index in data){
								params+=index+'='+data[index]+'&';
							}
							return params;
						}
					]
				})
				.then(resp => {
					console.log(resp.data);
				}).catch(err => {
					console.log('请求失败:'+err.status+','+err.statusText);
				});
			},
			getUserById(uid){
						axios.get(`https://api.github.com/users/${uid}`)
						.then(resp => {
							// console.log(resp.data);
							this.user=resp.data;
						});
					},
    		sendJSONP(){
				//https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
				this.$http.jsonp('https://sug.so.360.cn/suggest',{
					params:{
						word:'a'
					}
				}).then(resp => {
					console.log(resp.data.s);
				});
			},
			sendJSONP2(){
				//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1420_21118_17001_21931_23632_22072&req=2&csor=1&cb=jQuery110208075694879886905_1498805938134&_=1498805938138
				this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
					params:{
						wd:'a'
					},
					jsonp:'cb' //百度使用的jsonp参数名为cb,所以需要修改
				}).then(resp => {
					console.log(resp.data.s);
				});
			}
       }
	});
</script>


二、发送AJAX请求2

<div id="demo1">
		<input type="text" v-model="keyword" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp">
		<ul>
			<li v-for="(value,index) in myData" :class="{current:index==now}">
				{{value}}
			</li>
		</ul>
		<p v-show="myData.length==0">暂无数据....</p>
	</div>

		.current{
			background-color:#ccc;
		}
	</style>
<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
	let vm = new Vue({
       el:'#demo1', 
       data:{
			keyword:'',
			myData:[],
			now:-1 //当前选中项的索引
		},
      	methods:{ 
			getData(e){
				//如果按方向键上、下,则不发请求
				if(e.keyCode==38||e.keyCode==40) 
					return;

				this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
					params:{
						wd:this.keyword
					},
					jsonp:'cb'
				}).then(resp => {
					this.myData=resp.data.s;
				});
			},
			changeDown(){
				this.now++;
				this.keyword=this.myData[this.now];
				if(this.now==this.myData.length){
					this.now=-1;
				}
			},
			changeUp(){
				this.now--;
				this.keyword=this.myData[this.now];
				if(this.now==-2){
					this.now=this.myData.length-1;
				}
			}
		}
	});
</script>

三、Vue生命周期

<div id="demo1">
		{{msg}}
		<br>

		<button @click="update">更新数据</button>
		<button @click="destroy">销毁组件</button>
</div>
<script src="js/vue.js"></script>
<script>
	let vm=new Vue({
				el:'#demo1',
				data:{
					msg:'welcome to demo1'
				},
				methods:{
					update(){
						this.msg='欢迎来到南京网博!';
					},
					destroy(){
						// this.$destroy();
						vm.$destroy();
					}
				},
				beforeCreate(){
					alert('组件实例刚刚创建,还未进行数据观测和事件配置');
				},
				created(){  //常用!!!
					alert('实例已经创建完成,并且已经进行数据观测和事件配置');
				},
				beforeMount(){
					alert('模板编译之前,还没挂载');
				},
				mounted(){ //常用!!!
					alert('模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的展示');
				},
				beforeUpdate(){
					alert('组件更新之前');
				},
				updated(){
					alert('组件更新之后');
				},
				beforeDestroy(){
					alert('组件销毁之前');
				},
				destroyed(){
					alert('组件销毁之后');
				}
			});
</script>

四、计算属性

<div id="demo1">
		<!-- 
			1.基本用法
		 -->
		 <h2>{{msg}}</h2>
		 <h2>{{msg2}}</h2>

		 <!-- 对数据处理再显示 -->
		 <h2>{{msg.split(' ').reverse().join(' ')}}</h2>
		 <h2>{{reverseMsg}}</h2>
		 <button @click="change">修改值</button>

		<!-- 2.计算属性 vs 方法 -->
		<h2>{{num1}}</h2>
		<h2>{{num2}}</h2>
		<h2>{{getNum2()}}</h2>

		 <button onclick="fn()">测试</button>
		
		<!-- 3.get和set -->
		 <h2>{{num2}}</h2>
		 <button @click="change2">修改计算属性</button>

	</div>
<script src="js/vue.js"></script>
<script>
		var vm=new Vue({
			el:'#demo1',
			data:{ //普通属性
				msg:'welcome to demo1',
				num1:8
			},
			computed:{ //计算属性
				msg2:function(){ //该函数必须有返回值,用来获取属性,称为get函数
					return '欢迎来到vue';
				},
				reverseMsg:function(){
					//可以包含逻辑处理操作,同时reverseMsg依赖于msg
					return this.msg.split(' ').reverse().join(' ');
				},
				num2:{
					get:function(){
						console.log('num2:'+new Date());
						return this.num1-1;
					},
					set:function(val){
						// console.log('修改num2值');
						// this.num2=val;
						this.num1=111;
					}
				}
			},
			methods:{
				change(){
					// this.msg='i love you';
					this.num1=666;
				},
				getNum2(){
					console.log(new Date());
					return this.num1-1;
				},
				change2(){
					this.num2=111;
				}
			}
			
		});
		function fn(){
			setInterval(function(){
				// console.log(vm.num2);
				console.log(vm.getNum2());
			},1000);
		}
</script>

五、vue实例的属性和方法

<div id="demo1">
		{{msg}}
	
		<h2 ref="hello">你好</h2>
		<p ref="world">世界</p>
		<hr>

		<h1 ref="title">标题:{{name}}</h1>
 </div>
	<script>
		var vm=new Vue({
			// el:'#itany',
			data:{
				msg:'welcome to itany'
			},
			name:'tom',
			age:24,
			show:function(){
				console.log('show');
			}
		});

		/**
		 * 属性
		 */
		//vm.属性名 获取data中的属性
		 console.log(vm.msg);

		//vm.$el 获取vue实例关联的元素
		 console.log(vm.$el); //DOM对象
		 vm.$el.style.color='red';

		//vm.$data //获取数据对象data
		 console.log(vm.$data);
		 console.log(vm.$data.msg);

		//vm.$options //获取自定义属性
		console.log(vm.$options.name);
	    console.log(vm.$options.age);
		vm.$options.show();

		//vm.$refs 获取所有添加ref属性的元素
		 console.log(vm.$refs);
		 console.log(vm.$refs.hello); //DOM对象
		 vm.$refs.hello.style.color='blue';


		/**
		 * 方法
		 */
		vm.$mount()  手动挂载vue实例
		vm.$mount('#itany');

		var vm=new Vue({
			data:{
				msg:'欢迎来到南京网博',
				name:'tom'
			}
		}).$mount('#itany');

		vm.$destroy() 销毁实例
		 vm.$destroy();

		// vm.$nextTick(callback) 在DOM更新完成后再执行回调函数,一般在修改数据之后使用该方法,以便获取更新后的DOM
		//修改数据
		vm.name='汤姆';
		//DOM还没更新完,Vue实现响应式并不是数据发生改变之后DOM立即变化,需要按一定的策略进行DOM更新,需要时间!!
		// console.log(vm.$refs.title.textContent);
		vm.$nextTick(function(){
			//DOM更新完成,更新完成后再执行此代码
			console.log(vm.$refs.title.textContent);
		});
	</script>

六、添加和删除属性:$set、$delete

<div id="itany">
		<button @click="doUpdate">修改属性</button>
		<button @click="doAdd">添加属性</button>
		<button @click="doDelete">删除属性</button>

		<hr>	
		<h2>{{user.name}}</h2>
		<h2>{{user.age}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				user:{
					id:1001,
					name:'tom'
				}
			},
			methods:{
				doUpdate(){
					this.user.name='汤姆'
				},
				doAdd(){
					// this.user.age=25; //通过普通方式为对象添加属性时vue无法实时监视到
					// this.$set(this.user,'age',18); //通过vue实例的$set方法为对象添加属性,可以实时监视
					// Vue.set(this.user,'age',22);
					if(this.user.age){
						this.user.age++;
					}else{
						Vue.set(this.user,'age',1);
					}

					// console.log(this.user);
				},
				doDelete(){
					if(this.user.age){
						// delete this.user.age; //无效
						Vue.delete(this.user,'age');
					}
				}
			}
		});

	</script>

七、监视数据的变化:$watch

<div id="itany">
		<input type="text" v-model="name">
		<h3>{{name}}</h3>
		<hr>
		
		<input type="text" v-model="age">
		<h3>{{age}}</h3>
		<hr>

		<input type="text" v-model="user.name">
		<h3>{{user.name}}</h3>
</div>
<script src="js/vue.js"></script>
	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				name:'tom',
				age:23,
				user:{
					id:1001,
					name:'alice'
				}
			},
			watch:{ //方式2:使用vue实例提供的watch选项
				age:(newValue,oldValue) => {
					console.log('age被修改啦,原值:'+oldValue+',新值:'+newValue);
				},
				user:{
					handler:(newValue,oldValue) => {
						console.log('user被修改啦,原值:'+oldValue.name+',新值:'+newValue.name);
					},
					deep:true //深度监视,当对象中的属性发生变化时也会监视
				}
			}
		});

		//方式1:使用vue实例提供的$watch()方法
		vm.$watch('name',function(newValue,oldValue){
			console.log('name被修改啦,原值:'+oldValue+',新值:'+newValue);
		});

	</script>

八、自定义指令

<div id="itany">
		<!-- <h3 v-hello>{{msg}}</h3> -->
		<button @click="change">更新数据</button>

		<h3 v-world:wbs17022.hehe.haha="username">{{msg}}</h3>

		<!-- <p v-world>网博,专业的前端培训</p> -->

		<!-- <h3 v-wbs>网博</h3> -->

		<input type="text" v-model="msg" v-focus>
 </div>
<script src="js/vue.js"></script>
<script>
		/**
		 * 自定义全局指令
		 * 注:使用指令时必须在指名名称前加前缀v-,即v-指令名称
		 */
		Vue.directive('hello',{
			bind(){ //常用!!
				alert('指令第一次绑定到元素上时调用,只调用一次,可执行初始化操作');
			},
			inserted(){
				alert('被绑定元素插入到DOM中时调用');
			},
			update(){
				alert('被绑定元素所在模板更新时调用');
			},
			componentUpdated(){
				alert('被绑定元素所在模板完成一次更新周期时调用');
			},
			unbind(){
				alert('指令与元素解绑时调用,只调用一次');
			}
		});
		//钩子函数的参数
		Vue.directive('world',{
			bind(el,binding){
				// console.log(el); //指令所绑定的元素,DOM对象
				// el.style.color='red';

				console.log(binding); //name
			}
		});
		//传入一个简单的函数,bind和update时调用
		Vue.directive('wbs',function(){
			alert('wbs17022');
		});


		var vm=new Vue({
			el:'#itany',
			data:{
				msg:'welcome to itany',
				username:'alice'
			},
			methods:{
				change(){
					this.msg='欢迎来到南京网博'
				}
			},
			directives:{ //自定义局部指令
				focus:{
					//当被绑定元素插入到DOM中时获取焦点
					inserted(el){
						el.focus();
					}
				}
			}
		});
	</script>

九、练习:自定义指令

<style>
		#itany div{
			width: 100px;
			height: 100px;
			position:absolute;
		}
		#itany .hello{
			background-color:red;
			top:0;
			left:0;
		}
		#itany .world{
			background-color:blue;
			top:0;
			right:0;
		}

</style>
<div id="itany">
		<div class="hello" v-drag>itany</div>
		<div class="world" v-drag>网博</div>
</div>
<script src="js/vue.js"></script>
	<script>
		Vue.directive('drag',function(el){
			el.onmousedown=function(e){
				//获取鼠标点击处分别与div左边和上边的距离:鼠标位置-div位置
				var disX=e.clientX-el.offsetLeft;
				var disY=e.clientY-el.offsetTop;
				// console.log(disX,disY);

				//包含在onmousedown里面,表示点击后才移动,为防止鼠标移出div,使用document.onmousemove
				document.onmousemove=function(e){
					//获取移动后div的位置:鼠标位置-disX/disY
					var l=e.clientX-disX;
					var t=e.clientY-disY;
					el.style.left=l+'px';
					el.style.top=t+'px';
				}

				//停止移动
				document.onmouseup=function(e){
					document.onmousemove=null;
					document.onmouseup=null;
				}

			}
		});

		var vm=new Vue({
			el:'#itany',
			data:{
				msg:'welcome to itany',
				username:'alice'
			},
			methods:{
				change(){
					this.msg='欢迎来到南京网博'
				}
			}
		});
	</script>

十、动画

<style>
		p{
			width: 300px;
			height: 300px;
			background-color:red;
		}
		.fade-enter-active,.fade-leave-active{
			transition:all 3s ease;
		}
		.fade-enter-active{
			opacity:1;
			width:300px;
			height:300px;
		}
		.fade-leave-active{
			opacity:0;
			width:50px;
			height:50px;
		}
		/* .fade-enter需要放在.fade-enter-active的后面 */
		.fade-enter{
			opacity:0;
			width: 100px;
			height: 100px;
		}

	</style>
	<div id="itany">
		<button @click="flag=!flag">点我</button>
		
		<transition name="fade" 
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter"
			@before-leave="beforeLeave"
			@leave="leave"
			@after-leave="afterLeave"
		>
			<p v-show="flag">网博</p>
		</transition>
	</div>

 <script src="js/vue.js"></script>
	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				flag:false
			},
			methods:{
				beforeEnter(el){
					// alert('动画进入之前');
				},
				enter(){
					// alert('动画进入');
				},
				afterEnter(el){
					// alert('动画进入之后');
					el.style.background='blue';
				},
				beforeLeave(){
					// alert('动画即将之前');
				},
				leave(){
					// alert('动画离开');
				},
				afterLeave(el){
					// alert('动画离开之后');
					el.style.background='red';
				}
			}
		});
	</script>

十一、动画2

<link rel="stylesheet" href="css/animate.css">
<script src="js/vue.js"></script>
<style>
		p{
			width: 300px;
			height: 300px;
			background-color:red;
			margin:0 auto;
		}
</style>
<div id="itany">
		<button @click="flag=!flag">点我</button>
		
		<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
			<p v-show="flag">网博</p>
		</transition>
	</div>
	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				flag:false
			}
		});
	</script>

十二、多元素动画

<link rel="stylesheet" href="css/animate.css">
	<script src="js/vue.js"></script>
	<style>
		p{
			width: 100px;
			height: 100px;
			background-color:red;
			margin:20px auto;
		}
	</style>
<div id="itany">
		<button @click="flag=!flag">点我</button>
		
		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
			<p v-show="flag" :key="1">itany</p>
			<p v-show="flag" :key="2">网博</p>
		</transition-group>
	</div>
	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				flag:false
			}
		});
	</script>

十三、练习:多元素动画

<link rel="stylesheet" href="css/animate.css">
<script src="js/vue.js"></script>
	<style>
		p{
			width: 100px;
			height: 100px;
			background-color:red;
			margin:20px auto;
		}
	</style>

<div id="itany">
		<input type="text" v-model="name">
		
		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
			<p v-for="(v,k) in arr2" :key="k" v-show="flag">
				{{v}}
			</p>
		</transition-group>
	</div>

	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				flag:true,
				arr:['tom','jack','mike','alice','alex','mark'],
				name:''
			},
			computed:{
				arr2:function(){
					var temp=[];
					this.arr.forEach(val => {
						if(val.includes(this.name)){
							temp.push(val);
						}
					});
					return temp;
				}
			}
		});
	</script>

© 著作权归作者所有

共有 人打赏支持
一个yuanbeth
粉丝 81
博文 112
码字总数 68180
作品 0
深圳
程序员
私信 提问
你可能需要的一本前端小册:Vue 项目构建与开发入门

最近抽时间写了一本关于 Vue 的小册:《Vue 项目构建与开发入门》,前前后后断断续续花了大概两个月的时间。作为 Vue 的第一批用户,同时也作为一名专栏作者,虽然我之前写过好几篇关于 Vue ...

劳卜
11/28
0
0
Vue+Koa+Mongodb 小练习

Vue+Koa+Mongodb 小练习 作者: Pawn 本文首发: Pawn博客 功能: 基于vue koa mongodb进行登录,注册,留言的简单网站。 体验地址: demo.lcylove.cn github: github.com/LiChangyi/d… 前面...

Pawn2018
09/19
0
0
Vue中路由管理器Vue Router使用方式(一)

一、在模块编程中安装VueRouter 1.Npm安装vue-router 2.在main.js中引用并使用VueRouter 3.定义路由,创建路由实例 4.注册路由实例 二、Vue Router基础使用示例 1.App.vue 页面定义,使用rou...

tianma3798
10/16
0
0
2018 我所了解的 Vue 知识大全

年初第一个 flag 就是掌握 vue ,哈哈! Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很...

cacao111
07/11
0
0
Vue.js进阶教程第一步:vue2.0前端-何韬-专题视频课程

Vue.js进阶教程第一步:vue2.0前端—22327人已学习 课程介绍 Vue.js2.0进阶教程第一部分,Vue.js框架基础入门视频课程主要学习Vue.js的基础语法结构,api使用方式,vue.js组件的驱动方式,如...

pkutao
2017/01/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Yearning基于Inception的开源SQL审核平台

基础环境: python3 nodejs vuejs mysql python-ldap pymysql mysql 新建数据库 create database Yearning DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; Navicat导入初始化数据 : ......

以谁为师
19分钟前
1
0
flutter Expanded用法

使用的地方:一个分类,类似京东的,左右两边都可以滑动 Widget build(BuildContext context) { return Row(children: [ Column( children: <Widget>[ Ex......

大灰狼wow
24分钟前
3
0
Java8 Map中新增的方法使用总结

前言 得益于 Java 8 的 default 方法特性,Java 8 对 Map 增加了不少实用的默认方法,像 getOrDefault, forEach, replace, replaceAll, putIfAbsent, remove(key, value), computeIfPresent,......

kaixin_code
34分钟前
2
0
@TransactionConfiguration

@TransactionConfiguration过时与替代写法 @TransactionConfiguration 替代写法

miaojiangmin
36分钟前
0
0
浅谈Vue响应式(数组变异方法)

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法。 看来想让女...

开元中国2015
37分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部