文档章节

vue基础知识练习整理1

一个yuanbeth
 一个yuanbeth
发布于 07/18 09:06
字数 1746
阅读 3
收藏 0

一、Hello World

<div id="itany">
	{{msg}} <!-- 两对大括号{{}}称为模板,用来进行数据的绑定显示在页面中 -->
 </div>
<script src="js/vue.js"></script>
<script>
	var vm=new Vue({
		el:'#itany', //指定关联的元素
		data:{ //存储数据
			msg:'Hello World,I am coming!!'
		}
	});
</script>

二、常用指令:v-model

<div>
	用户名:<input type="text" v-model="name"><br>
	{{name}}<br>
	{{age}}<br>
	{{flag}}<br>
	{{nums}}<br>
	{{user}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
       el:'div', //vue2.0不允许将vue实例挂载到<html>或<body>元素
       data:{
         name:'',//即使没有值,也不能省略,省略会报错
         age:21,
         flag:true,
         nums:[12,4,23,5],
         user:{id:453655,name:'小花'}
       }
	});
</script>

三、常用指令:v-for

<div id="demo1">
	{{arr}}
		<ul>
      	<!--普通循环-->
	      <li v-for="value in arr">{{value}}</li>
        <li v-for="value in  user">{{value}}</li>
        <!--键值循环-->
      	<li v-for="(v,k) in arr">{{k}}={{v}}</li>
        <li v-for="(v,k) in  user">{{k}}={{v}}</li>
        <!-- 可以直接循环包含重复数据的集合,可以通过指定:key属性绑定唯一key,当更新元素时可重用元素,提高效率,类似于vue1.0中track-by -->
        <li v-for="(v,k) in arr2" :key="k">{{v}}</li> 

        <li v-for="(user,index) in users">
		    {{index+1}},{{user.id}},{{user.name}},{{user.age}}
	     </li>
		</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
       el:'#demo1', 
       data:{
        arr:[12,4,5,34,2,11],
        user:{id:4344,name:'小花',age:19},
        arr2:[12,4,5,34,2,11,12],
        users:[
          {id:454356,name:'小花',age:'25'},
          {id:454356,name:'小明',age:'25'},
          {id:454356,name:'小华',age:'25'},
        ]
       }
});
</script>

四、常用指令:v-on

<div id="demo1">
	<button v-on:click="show">点我</button>
	<button v-on:click="add()">向数组中添加一个元素</button>
	<br>
	{{arr}}
	<hr>

	<button v-on:mouseover="show">鼠标经过</button>
	<button v-on:dbclick="show">鼠标双击</button>
</div>
<script src="js/vue.js"></script>
<script>
	let vm = new Vue({
       el:'#demo1', 
       data:{//存储数据
        arr:[12,4,5,34,2,11]
       },
       methods:{//存储方法
       	 show:function(){
       	 	console.log('show方法');
       	 },
         add(){
			console.log(this); //this表示当前vue实例
			console.log(this===vm); //true
			this.arr.push(666); //使用this访问当前实例中的成员
			this.show();
		  }
       }
	});
</script>

五、常用指令:v-show

<div id="demo1">
	<button v-on:click="change">隐藏</button>
	<button v-on:click="flag=!flag">隐藏</button>
	<hr>
	<div style="width: 100px;height: 100px; background-color: red" v-if="flag">hello word!</div>
</div>
<script src="js/vue.js"></script>
<script>
	let vm = new Vue({
       el:'#demo1', 
       data:{//存储数据
         flag:true
       },
       methods:{//存储方法
       	 change(){
       	 	this.flag = !this.flag;
       	 }
       }
	});
</script>

六、练习:用户管理

<div class="container">
		<h2 class="text-center">添加用户</h2>
        <form class="form-horizontal">
        	<div class="form-group">
				<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓  名:</label>
				<div class="col-sm-6">
					<input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="form-group">
				<label for="age" class="control-label col-sm-2 col-sm-offset-2">年  龄:</label>
				<div class="col-sm-6">
					<input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
				</div>
			</div>
			<div class="form-group">
				<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮  箱:</label>
				<div class="col-sm-6">
					<input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
				</div>
			</div>
			<div class="form-group text-center">
				<input type="button" value="添  加" class="btn btn-primary" v-on:click="addUser">
				<input type="reset" value="重  置" class="btn btn-primary">
			</div>
        </form>
        <hr>
         

		<table class="table table-bordered table-hover">
			<caption class="h3 text-center text-info">用户列表</caption>
			<thead>
				<tr>
					<th class="text-center">序号</th>
					<th class="text-center">姓名</th>
					<th class="text-center">年龄</th>
					<th class="text-center">邮箱</th>
					<th class="text-center">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(user,index) in users" class="text-center">
					<td>{{index+1}}</td>
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
					<td>{{user.email}}</td>
					<td>
						<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button>
					</td>
				</tr>
				<tr>
					<td colspan="5" class="text-right">
						<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</button>
					</td>
				</tr>
			</tbody>
		</table>

       <!-- 模态框,弹出框 -->
		<div class="modal fade" id="del">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
						<h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户:{{users[nowIndex]?users[nowIndex].name:''}} 吗?</h4>
						<h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗?</h4>
					</div>
					<div class="modal-body text-center">
						<button class="btn btn-primary" data-dismiss="modal">取消</button>
						<button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button>
					</div>
				</div>
			</div>
		</div>
	 </div>
<script src="js/vue.js"></script>
<script src="bootstrap/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script>
	let vm=new Vue({
		el:'.container',
		data:{ 
			users:[
				{name:'tom',age:24,email:'tom@itany.com'},
				{name:'jack',age:23,email:'jack@sina.com'}
			],
			user:{},
			nowIndex:-1 //当前要删除项的索引		},
				methods:{ 
			addUser(){				this.users.push(this.user);
						this.user={};
			},
			deleteUser(){
				if(this.nowIndex===-1){ //删除所有
					this.users=[];
				}else{
					this.users.splice(this.nowIndex,1); //从指定索引位置开始删除,删除一个
				}
			}
		}
	});
</script>

七、事件简写和事件对象$event

<div id="demo1">
	<button v-on:click="show">点我</button>   <button @click="show">点我</button> <hr>
	<button @click="print($event)">Click Me</button>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
       el:'#demo1', 
      	methods:{ 
		show(){
		console.log(111);
		},
		print(e){
			// console.log(e);
			console.log(e.target.innerHTML); //DOM对象
			console.log(this);
		}
	}
});
</script>

八、事件冒泡和默认行为

<div id="demo1">
	<div @click="write">
		<p @click="print">
			<!-- <button @click="show($event)">点我</button> -->
			<button @click.stop="show">点我</button>
		</p>
	</div>
	<hr>
	<!-- <a href="#" @click="study($event)">俺是链接</a> -->
	<a href="#" @click.prevent="study">俺是链接</a>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
     el:'#demo1', 
     methods:{ 
		show(){
			console.log(111);
			// e.stopPropagation();
		},
		print(){
			console.log(222);
		},
		write(){
			console.log(333);
		},
		study(){
			console.log(444);
			// e.preventDefault();
		}
	}
});
</script>

九、键盘事件

<div id="demo1">
		<!-- 键盘事件:@keydown、@keypress、@keyup -->
		<!-- 用户名:-->
		<input type="text" @keydown="show($event)"> 
		<!-- 简化按键的判断 -->
		用户名:<input type="text" @keydown="show($event)">
		用户名:<input type="text" @keydown.13="print"> 
		用户名:<input type="text" @keydown.enter="print">
		用户名:<input type="text" @keydown.up="print"> 
		用户名:<input type="text" @keydown.f1="print">
		<!-- 事件修饰符 -->
		<button @click.once="print">只触发一次</button>
</div>
<script src="js/vue.js"></script>
<script>
Vue.config.keyCodes={
		a:65,
		f1:112
	}

let vm = new Vue({
       el:'#demo1', 
      methods:{ 
		show(e){
				console.log(e.keyCode);
				if(e.keyCode==13){
					console.log('您按了回车');
				}
			},
		print(){
				// console.log('您按了回车');
				// console.log('您按了方向键上');
				console.log('11111');
		     }
	}
});
</script>

十、属性绑定和属性的简写

<div id="demo1">
	<img src="{{url}}">
	<!-- 可以直接访问vue中的数据,不需要使用{{}} -->
	<img v-bind:src="url">
	<img :src="url" :width="w" :height="h">
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
       el:'#demo1', 
      methods:{ 
		data:{
			url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
			w:'200px',
			h:'100px'
			}
	}
});
</script>

十一、class和style属性

<div id="demo1">
		<!-- class属性-->

		<p class="aa">南京网博</p> <!-- 可以访问,普通css方式 -->

		 <p :class="aa">南京网博</p>  <!-- 不可以,Vue的属性绑定时不能直接css样式 -->

		<!-- 方式1:变量形式 -->
		<p :class="bb">南京网博</p>

		<!-- 方式2:数组形式,同时引用多个 -->
		<p :class="[bb,dd]">南京网博</p> 

		<!-- 方式3:json形式,常用!!! -->
		 <p :class="{aa:true,cc:flag}">南京网博</p> 
		<<p :class="{aa:num>0}">南京网博</p> 

		<!-- 方式4:变量引用json形式 -->
		 <p :class="hello">南京网博</p> 
		
		<!-- style属性-->
		 <p :style="[xx,yy]">itany</p>
</div>
<style>
		.aa{
			color:red;
			font-size:20px;
		}
		.cc{
			background-color:#ccc;
		}
	</style>
<script src="js/vue.js"></script>
<script>
	let vm = new Vue({
       el:'#demo1', 
		data:{
			bb:'aa',
			dd:'cc',
			flag:true,
			num:-2,
			hello:{aa:true,cc:true},
			xx:{color:'blue',fontSize:'30px'},
			yy:{backgroundColor:'#ff7300'}
		}
	});
</script>

十二、模板

<div id="demo1">
		<input type="text" v-model="msg">

		<h3>aaa<span v-cloak>{{msg}}</span></h3>
		
		<h3 v-text="msg"></h3>

		<h3 v-html="msg"></h3>

		<h3 v-once>{{msg}}</h3>

		<h3 v-pre>{{msg}}</h3>
</div>
	<style>
		/* 必须配置css样式,否则不生效 */
		[v-cloak]{ 
			display:none;
		}
	</style>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
       el:'#demo1', 
      methods:{ 
		data:{
				msg:'welcome to itany'
			},
			created:function(){
				// alert(111);
			}
	}
});
</script>

十三、自定义过滤器

<div id="demo1">
		<h3>{{3 | addZero}}</h3> 
		
		<h3>{{12.345678 | number(2)}}</h3>

		<h3>{{12.045 | number(2)}}</h3> 

		<h3>{{currentTime | date}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
	
		/**
	 * 自定义全局过滤器
	 */
	Vue.filter('addZero',function(data){
		// console.log(data);
		return data<10?'0'+data:data;
	});
	/*Vue.filter('number',(data,n) => {
		// console.log(data,n);
		return data.toFixed(n);
	});*/
	Vue.filter('date',data => {
		let d=new Date(data);
		return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
	});

	let vm = new Vue({
       el:'#demo1', 
      	data:{
			     currentTime:Date.now()
			  },
		filters:{ //局部过滤器
			number:(data,n) => {
				return data.toFixed(n);
			}
		}
	});
</script>

© 著作权归作者所有

共有 人打赏支持
一个yuanbeth
粉丝 81
博文 102
码字总数 64453
作品 0
深圳
程序员
2018 我所了解的 Vue 知识大全

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

cacao111
07/11
0
0
VueJS简明教程(二)之组件

上一篇:VueJS简明教程(一)之基本使用方法 组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue的编译器为它添加特殊功能...

秦洛1023
07/19
0
0
让IntelliJ IDEA支持.vue文件

最近将idea升级到2018的版本,需要重新配置一下vue的环境,所以随便整理了一下操作过程。 第一步:先安装vue插件: file --> settings --> plugins,然后什么都不用输入,直接点击Browse re...

四小七
05/11
0
0
使用webpack打包编写一个vue插件

一、说明: 需求:创建一个toast插件 思路:利用vue组件创建模板,使用webpack打包生成插件再全局使用。 二、开发一个vue-toast插件 借助npm平台发布一个vue插件 流程: 声明插件——写插件—...

爱敲代码的程序员
2017/11/01
0
0
前端知识点整理之框架部分(Vue.js)

一、提到框架,先引入框架模式MVC、MVVM、MVP,下面分别介绍了其概念及异同 MVC是Model-View-Controller的缩写,特点在于实现关注点分离,即应用程序中的数据模型与业务和展示逻辑解耦。它将...

凛冬来袭
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
1
0
LNMP架构(Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl)

Nginx负载均衡 网站的访问量越来越大,服务器的服务模式也得进行相应的升级,比如分离出数据库服务器、分离出图片作为单独服务,这些是简单的数据的负载均衡,将压力分散到不同的机器上。有时...

蛋黄_Yolks
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部