一、 Vue.js简介

一、 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
npm info vue
npm init --yes
cnpm install vue --save

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>
</html>

2.2 vue实现
js:
new Vue({
el:'itany', //指定关联的选择器
data:{ //存储数据
msg:'Hello World',
name:'tom'
}
});
html:
<div id="itany">
{{msg}}
</div>

3. 安装vue-devtools插件，便于在chrome中调试vue
直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中

//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
			Vue.config.devtools=false;
			Vue.config.productionTip=false; //阻止vue启动时生成生产消息

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

	<h3>
		{{msg}}
	</h3>
</body>
</html>

三、常用指令

1. 什么是指令？
用来扩展html标签的功能
angular中常用的指令：
ng-model
ng-repeat
ng-click
ng-show/ng-hide
ng-if

2. vue中常用的指令
+ v-model
双向数据绑定，一般用于表单元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用指令：v-model</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			new Vue({
				// el:'.itany',
				el:'div', //vue2.0中不允许将vue实例挂载到<html>或<body>元素，在vue1.0中是可以的
				data:{
					name:'', //即使没有值，也不能省略，报错
					age:21,
					flag:true,
					nums:[12,4,23,5],
					user:{id:9527,name:'唐伯虎'}
				}
			});
		}
	</script>
</head>
<body>
	<!-- <div id="itany"> -->
	<!-- <div class="itany"> -->
	<div>
		用户名：<input type="text" v-model="name">
		<br>

		{{name}} <br>
		{{age}} <br>
		{{flag}} <br>
		{{nums}} <br>
		{{user}}
	</div>
</body>
</html>

+ v-for
对数组或对象进行循环操作，使用的是v-for，不是v-repeat
注：在vue1.0中提供了隐式变量，如$index、$key
在vue2.0中去除了隐式变量，已被废除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用指令：v-for</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			new Vue({
				el:'#itany',
				data:{
					arr:[12,4,5,34,2,11],
					user:{id:9527,name:'唐伯虎',age:25},
					arr2:[12,4,5,34,2,11,12],
					users:[
						{id:9527,name:'唐伯虎',age:25},
						{id:1001,name:'秋香',age:22},
						{id:1002,name:'石榴姐',age:24}
					]
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- {{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>
</body>
</html>

+ v-on
用来绑定事件，用法：v-on:事件="函数"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用指令：v-on</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{  //存储数据
					arr:[12,34,45,23,5]
				},
				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>
</head>
<body>
	<div id="itany">
		<!-- <button onclick="show()">点我</button> -->
		<button v-on:click="show">点我</button>
		<button v-on:click="add()">向数组中添加一个元素</button>
		<br>
		{{arr}}
		<hr>
		
		<button v-on:mouseover="show">鼠标经过</button>
		<button v-on:dblclick="show">鼠标双击</button>
	</div>
</body>
</html>

+ v-show/v-if
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用指令：v-show</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{ 
					flag:true
				},
				methods:{ 
					change(){
						this.flag=!this.flag;
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- <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">欢迎来到南京网博</div>
	</div>
</body>
</html>

四、练习：用户管理
使用BootStrap+Vue.js

<!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:'[email protected]'},
						{name:'jack',age:23,email:'[email protected]'}
					],
					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>×</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>

五、事件和属性

1. 事件

1.1 事件简写
v-on:click=""
简写方式 @click=""

1.2 事件对象$event
包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件简写和事件对象$event</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				methods:{ 
					show(){
						console.log(111);
					},
					print(e){
						// console.log(e);
						console.log(e.target.innerHTML); //DOM对象
						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>

1.3 事件冒泡
阻止事件冒泡：
a)原生js方式，依赖于事件对象
b)vue方式，不依赖于事件对象
@click.stop

<!DOCTYPE html>
<html lang="en">
<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);
						// e.stopPropagation();
					},
					print(){
						console.log(222);
					},
					write(){
						console.log(333);
					},
					study(){
						console.log(444);
						// e.preventDefault();
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<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>

1.4 事件默认行为
阻止默认行为：
a)原生js方式，依赖于事件对象

1.5 键盘事件
回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up

默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名

<!DOCTYPE html>
<html lang="en">
<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:'#itany',
				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="itany">
		<!-- 键盘事件：@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>
</body>
</html>

1.6 事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

2. 属性

2.1 属性绑定和属性的简写
v-bind 用于属性绑定， v-bind:属性=""

属性的简写：
v-bind:src="" 简写为 :src=""

<!DOCTYPE html>
<html lang="en">
<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>

2.2 class和style属性
绑定class和style属性时语法比较复杂：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>class和style属性</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				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="itany">
		<!-- 
			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>
</body>
</html>

六、模板

1. 简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法

2. 数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html

3. 其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					msg:'welcome to itany'
				},
				created:function(){
					// alert(111);
				}
			});
		}
	</script>
	<style>
		/* 必须配置css样式，否则不生效 */
		[v-cloak]{ 
			display:none;
		}
	</style>
</head>
<body>
	<div id="itany">
		<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>

七、过滤器

1. 简介
用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{ data | filter1(参数) | filter2(参数)}}

2. 关于内置过滤器
vue1.0中内置许多过滤器，如：
currency、uppercase、lowercase
limitBy
orderBy
filterBy
vue2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
b.使用自定义过滤器

3. 自定义过滤器
分类：全局过滤器、局部过滤器

3.l 自定义全局过滤器
使用全局方法Vue.filter(过滤器ID,过滤器函数)

3.l 自定义局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义过滤器</title>
	<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();
		});
		

		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>

猜你喜欢