Vue 知识点汇总 ---5天发布 ---day01

最新推荐文章于 2024-09-25 00:15:29 发布

程序员山子

最新推荐文章于 2024-09-25 00:15:29 发布

阅读量693

点赞数

分类专栏：前端Vue Vue 文章标签： Vue Vue.js基础知识

本文链接：https://blog.csdn.net/qq_34475529/article/details/95460160

版权

Vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端Vue

1 篇文章 0 订阅

订阅专栏

# 一、 Vue.js简介

### 1. Vue.js是什么
**Vue.js**也称为Vue，读音/vju:/，类似view，错误读音v-u-e
版本：v1.0 v2.0

+ 是一个构建用户界面的框架
+ 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
+ 数据驱动+组件化的前端开发（核心思想）
+ 通过简单的API实现**响应式的数据绑定**和**组合的视图组件**
+ 更容易上手、小巧

参考：[官网](https://cn.vuejs.org/)

### 2.vue和angular的区别

#### 2.1 angular
+ 上手较难
+ 指令以ng-xxx开头
+ 所有属性和方法都存储在$scope中
+ 由google维护

#### 2.2 vue
+ 简单、易学、更轻量
+ 指令以v-xxx开头
+ HTML代码+JSON数据，再创建一个vue实例
+ 由个人维护：**尤雨溪**，华人，目前就职于阿里巴巴，2014.2开源了vue.js库

![尤雨溪](https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=d49c7e60ee1190ef15f69a8daf72f673/4afbfbedab64034f29596c8ba6c379310b551da2.jpg)

共同点：`都不兼容低版本IE`
对比：GitHub上vue的stars数量大约是angular的两倍

## 二、起步

### 1. 下载核心库vue.js
   bower info vue
   npm init --yes
   cnpm install vue --save
   版本 v2.3.4 目前最新版本(2017.6.29)

vue2.0和1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM）,页面更新效率更高，速度更快

### 2. Hello World（对比angular）

#### 2.1 angular实现
   js:
       let app=angular.module('myApp',[]);
       app.controller('MyController',['$scope',function($scope){
           $scope.msg='Hello World';
       }]);
   html:
       <html ng-app="myApp">
           <div ng-controller="MyController">
               {{msg}}
           </div>d
       </html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue鐨刣emo</title>
		<script src="js/vue.js"></script>
		<script>
			window.onload= function(){
				var vm = new Vue({
					el:"#t1",
					data:{
						message:"hello vue!"
					}
				})
			}	
		</script>
	</head>
	<body>
		<div id="t1">
			{{message}}
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令-model数据双向绑定</title>
		<script src="js/vue.js"></script>
		<script>
			window.onload= function(){
				var vm = new Vue({
					el:'.model1', // 这里2.0版本 在放在html 和 body 会报错,1.0不会; 一般绑定在指定的div上面 class 或者id 上
					data:{  // 这里的数据可以是各种类型
						name:'',  //这里即使不给值 也要写出来 不写的话,数据的双向绑定没法实现
						age:23,
						flag:true,
						nums:[1,2,3,4,5],
					    user:{id:123,name:'张三'}	
					}
				})
			}
			
		</script>
	</head>
	<body>
<!-- 		<div id="model""> -->
		<div class="model1">
		<!-- <div> -->
			用户名：<input type="text" v-model="name"><br />
			{{name}}<br />
			{{age}}<br />
			{{flag}}<br />
			{{nums}}<br />
			{{user}} 
		</div>
		 
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for指令</title>
		<script src="js/vue.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'#itan',
					data:{
						arr:[12,4,5,34,2,11],
						user:{id:9522,name:'熊国双',age:23},
						arr2:[12,4,6,34,2,11,12],
						users:[
							{id:9522,name:'熊国双',age:23},
							{id:9523,name:'熊国双1',age:24},
							{id:9524,name:'熊国双2',age:25}
						]
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="itan">
			 <ol>
				 <!--普通循环-->
				<!-- <li v-for="value in user">{{value}}</li> -->
				<!--普通循环-->
			  <!--  <li v-for="(key,value) in user">{{key}}=={{value}}</li> -->
			   <!--可以循环出重复的数据,我们可以用:key来指定元素的唯一性，从而保证在更新重复的数据时，可以进行重用，提高页面的渲染速度-->
			 <!--  <li v-for="(v,k) in arr2" :key="k">{{v}}</li> -->
			   <!--给页面数据增加索引index 。默认从0开始 ,index写在后面-->
			 <li v-for="(user,index) in users">
				  {{index+1}}:{{user.id}},{{user.name}},{{user.age}}
			   </li> 
			 </ol>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on指定</title>
		<script src="js/vue.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'#itan',
					data:{ // 用来存储数据
					 arr:[12,23,35,25,24]	
					},
					methods:{ // 存储方法属性
						show:function(){
							alert("show方法");
						},
						add(){ //this 代表当前的vue实例
							this.arr.push(123);
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="itan">
	      	<!-- 括号可写可不写 -->
		   <button v-on:click="show">点击事件测试</button>	
		   <button v-on:click="add">向数组中加入一条数据</button><br />	
			数组：{{arr}}<br />
			其他事件：<br />
			<button v-on:mouseover="show">鼠标上一上去的</button>	、
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>on-show/on-if指令</title>
		<script src="js/vue.js"></script>
		<script>
			window.onload=function(){
				let vm = new Vue({
				   el:'#item',
				   data:{
					   flag:true
				   },
				   methods:{
					   change(){
						   this.flag=!this.flag;
					   }
				   }
				});
			}
		</script>
	</head>
	<body>
		<div id="item">
			 <button v-on:click="flag=!flag">隐藏/显示</button>  <!-- 可以直接拿到数据的值 -->
			 <br/>
			 <div style="width:100px; height=100px; background-color: red;" v-show="flag" >欢迎来到马鞍山</div> <!-- 指令也可以直接拿到数据的值 -->
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件简写和事件对象</title>
		<script src="js/vue.js"></script>
	    <script>
			window.onload=function(){
				let vm = new Vue({
					el:'#itany',
					methods:{
						show(){
							console.log(111);
						},
					print(e){
						//Dom对象
						console.log(e.target.innerHTML);
						console.log(this);
					}
					}
				});
			}
	    </script>
	</head>
	<body>
		<div id="itany">
			<button v-on:click="show">点击</button>
			<button @click="show">点击</button>
			<hr />
			<!-- $事件对象 -->
			<button @click="print($event)">click me</button>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件冒泡和默认行为</title>
		<script src="js/vue.js"></script>
		<script>
			window.onload=function(){
				let vm = new Vue({
					el:"#itan",
					methods:{
						show(){
							console.log(111);
						},
						print(){
							console.log(222);
						},
						write(){
							console.log(333);
						},
						study(){
							console.log(444);
						}
						
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="itan">
			<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>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件</title>
		<script src="js/vue.js"></script>
		<script>
		/**
		 * 自定义键位别名
		 */
		Vue.config.keyCodes={
			a:65,
			f1:112
		}

		window.onload=function(){
			let vm=new Vue({
				el:'#item',
				methods:{ 
					show(e){
						console.log(e.keyCode);
						if(e.keyCode==13){
							console.log('您按了回车');
						}
					},
					print(){
						// console.log('您按了回车');
						// console.log('您按了方向键上');
						console.log('11111');
					}
				}
			});
		}
		</script>
	</head>
	<body>
		<div id ='item'>
		<!--键盘事件：@keydown,@keypress,@keyup-->
		<!--用户名：<input type="text" @keydown="show($even)"-->
		<!-- 简化按键的判断 -->
		 <!-- 用户名：<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>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<title>属性绑定和属性的简写</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
					w:'200px',
					h:'100px'
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- <img src="{{url}}"> -->
		<!-- 可以直接访问vue中的数据，不需要使用{{}} -->
		<!-- <img v-bind:src="url"> -->
		<img :src="url" :width="w" :height="h">
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class 和style属性</title>
		<script src="js/vue.js"></script>
		<script>
			window.onload=function(){
				let vm = new Vue({
					el:'#itan',
					data:{
						bb:'aa',
						dd:'cc',
						flag:true,
						num:-2,
						hello:{aa:true,cc:true},
						xx:{color:'blue',fontSize:'30px'},
				     	yy:{backgroundColor:'#ff7300'}
					}
				});
			}
		</script>
		<style>
			.aa{
				color: red;
				font-size:20px;
			}
			.cc{
				background-color: #ccc;
			}
			
		</style>
	</head>
	<body>
		<div id="itan">
			<!--class属性-->
			<!-- <p class="aa">马鞍山的日子</p> <!--访问的是普通的css-->
			<!-- <p :class="aa">马鞍山房地产</p> --> <!--不可以，Vue的属性绑定时不能直接css样式-->
			<!--方式1：变量形式-->
			<p :class="bb">马鞍山111 变量形式</p> 
			<!--方式2：数组形式-->
			 <p :class="[bb,dd]">马纳山 数组</p> 
			<!--方式3：json形式，常用!!!-->
			<p :class="{aa:true,cc:flag}">马纳山 json</p> 
			<!--方式4:变量引用json形式-->
		    <p :class="hello">马楠 变量引用json </p>
			<!--
			 style属性
			-->
			<p :style="[xx,yy]">马纳山style很少用</style> 
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模板</title>
		<script src="js/vue.js"></script>
		<script>
			window.onload=function(){
				var vm = new Vue({
					el:'#itan',
					data:{
						msg:'welcome to you ma an shan '
					},
					<!--vue的生命周期 在created的之前执行-->
					/* created:function(){
						alert(111);
					} */
				})
			}
		</script>
		<style>
			/*必须配置css样式，否则不生效*/
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="itan">
			<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>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习：用户管理</title>
	<script src="js/vue.js"></script>
	<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
	<script src="bootstrap/jquery.min.js"></script>
	<script src="bootstrap/bootstrap.min.js"></script>
	<script>
		window.onload=function(){
			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>
</head>
<body>
	<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>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义过滤器</title>
	<script src="js/vue.js"></script>
	<script>
		/**
		 * 自定义全局过滤器 3传入data 参数中
		 */
		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();
		});
		

		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					currentTime:Date.now()
				},
				filters:{ //局部过滤器 只有在局部
					number:(data,n) => {
						return data.toFixed(n);
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- <h3>{{3 | addZero}}</h3> -->
		<!-- 课后作业：自己实现toFiexed()四舍五入的功能 -->
		<h3>{{12.345678 | number(2)}}</h3>
		<!-- <h3>{{12.045 | number(2)}}</h3> -->
		<h3>{{currentTime | date}}</h3>
	</div>
</body>
</html>