一、 Vue.js 简介
1. Vue.js 是什么
- 是一个构建用户界面的框架
- 是一个轻量级 MVVM(Model-View-ViewModel)框架,和 angular、react 类似,其实就是所谓的数据双向绑定
- 数据驱动+组件化的前端开发(核心思想)
- 通过简单的 API 实现**响应式的数据绑定**和**组合的视图组件**
- 更容易上手、小巧
2. MVVM框架
1.1定义:
Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
【模型】指的是后端传递的数据。
【视图】指的是所看到的页面。
【视图模型】mvvm模式的核心,它是连接view和model的桥梁。
它有两个方向:
一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。
实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。
Vue就是基于MVVM模式实现的一套框架
在vue中:
- Model:指的是js中的数据,如对象,数组等等。
- View:指的是页面视图
- viewModel:指的是vue实例化对象
1.2总结:
在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。
3.vue 和 angular 的区别
3.1 angular
- 上手较难
- 指令以 ng-xxx 开头
- 所有属性和方法都存储在\$scope 中
- 由 google 维护
3.2 vue
- 简单、易学、更轻量
- 指令以 v-xxx 开头
- HTML 代码+JSON 数据,再创建一个 vue 实例
共同点:`都不兼容低版本IE`,`对 seo 搜索引擎不友好`
对比:GitHub 上 vue(156k) 的 stars 数量大约是 angular(59.6k) 的两倍多
二、起步
1. 下载核心库 vue.js
npm init --yes
npm install vue --save
版本 v2.6.11 目前最新版本(2020.2.2)
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拖放到扩展程序中(更多工具--扩展程序 )或者直接在浏览器中输入 chrome://extensions/打开
//配置是否允许vue-devtools检查代码,方便调试,生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息
三、 常用指令
1. 什么是指令?
用来扩展html标签的功能
angular中常用的指令:
- ng-model
- ng-repeat
- ng-click
- ng-show/ng-hide
- ng-if
2. vue 中常用的指令
v-model
双向数据绑定,一般用于表单元素
在表单 <input>、<textarea> 及 <select> <checkbox> 元素上创建双向数据绑定。
代码演示:02.html
<div class="itapp">
{{msg}} {{arr}} {{users}}
<input type="text" v-model="name">
<select v-model="tag">
<option value="01">01</option>
<option value="02">02</option>
</select>
<!-- <input type="checkbox" value="01" v-model="test" >
<input type="checkbox" value="02" v-model="test" >
{{name}} {{test}} -->
{{tag}}
</div>
<script>
var vm=new Vue({
el:'.itapp', //指定关联的元素
data:{ //存储数据
msg:'Hello World',
arr:[1,2,3],
age:21,
users:{
id:12,name:'秋香'
},
name:'',
test:'',
tag:'01'
}
});
</script>
v-for
对数组或对象进行循环操作,使用的是 v-for,不是 v-repeat
注:在 vue1.0 中提供了隐式变量,如$index、$key
在 vue2.0 中去除了隐式变量,已被废除
代码演示 代码演示:03.html
<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">
<ul>
<!-- 普通循环 -->
<!-- <li v-for="value in arr">{{value}}</li> -->
<!-- <li v-for="value in user">{{value}}</li> -->
<!-- 健值循环 -->
<!-- key指定唯一性 -->
<!-- <li v-for="(item,index) in user" :key="index">{{index}} -- {{item}}</li> -->
<li v-for="(item,index) in users" :key="index"> {{index+1}}---{{item.id}} {{item.name}} {{item.age}}</li>
</ul>
</div>
</body>
v-on
用来绑定事件,用法:v-on:事件="函数"
代码演示:04.html
<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();
},
print(e){
// console.log(e);
console.log(e.target.innerHTML); //DOM对象
console.log(this);
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- <button onclick="show()">点我</button> -->
<button v-on:click="show">点我</button>
<!-- 简写 -->
<button @click="show">点我</button>
<button @click="add">数组中添加元素</button>
<button @mouseover="show">鼠标经过</button>
<button @dblclick="show">双击</button>
</div>
</body>
v-show/v-if
用来显示或隐藏元素,v-show 是通过 display 实现,v-if 是每次删除后再重新创建,与 angular 中类似
代码演示:05.html
<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>
四、 练习:用户管理
<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=[];
// this.users.length=0;
} else {
//从指定索引的位置开始删除
this.users.splice(this.nowIndex,1)
}
}
}
});
}
</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" @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" :key="index" 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>
五、 事件和属性
1.1 事件简写
v-on:click="" 简写方式 @click=""
1.2 事件对象\$event
包含事件相关信息,如事件源、事件类型、偏移量
target、type、offsetx
代码演示:07.html
window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(){
console.log(111);
},
print(e){
var tatget = e.target;
// console.log(e);
console.log(tatget.innerHTML); //DOM对象
// console.log(this);
}
}
});
}
<body>
<div id="itany">
<button v-on:click="show">点我</button>
<button @click="show">点我</button>
<hr>
<button @click="print($event)">Click Me</button>
</div>
</body>
1.3 事件冒泡
阻止事件冒泡:
- 原生js方式,依赖于事件对象 stopPropagation
- vue方式,不依赖于事件对象
@click.stop
1.4 事件默认行为
阻止默认行为:
- 原生js方式,依赖于事件对象 preventDefault
- vue方式,不依赖于事件对象
@click.prevent
代码演示:08.html
<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>
<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="http://www.baidu.com" @click="study($event)">俺是链接</a> -->
<a href="http://www.baidu.com" @click.prevent="study">俺是链接</a>
</div>
</body>
1.5 键盘事件
回车:@keydown.13 或@keydown.enter
上:@keydown.38 或@keydown.up
默认没有@keydown.a/b/c...事件,可以自定义键盘事件,也称为自定义键码或自定义键位别名
代码演示:09.html
/**
* 自定义键位别名
*/
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');
}
}
});
}
<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>
1.6 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求
Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
- .stop - 调用 event.stopPropagation()。 阻止冒泡行为的事件传播
- .prevent - 调用 event.preventDefault()。 阻止默认行为
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>
提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
添加事件监听器时使用事件捕获模式
即元素自身触发的事件先在此处理,然后才交由内部元素进行处理
<div v-on:click.capture="doThis">...</div>
只当在 event.target 是当前元素自身时触发处理函数
即事件不是从内部元素触发的
<div v-on:click.self="doThat">...</div>
点击事件将只会触发一次
<a v-on:click.once="doThis"></a>
滚动事件的默认行为 (即滚动行为) 将会立即触发
而不会等待 `onScroll` 完成
这其中包含 `event.preventDefault()` 的情况
<div v-on:scroll.passive="onScroll">...</div>
这个 .passive 修饰符尤其能够提升移动端的性能。
按键修饰符
2. 属性
2.1 属性绑定和属性的简写
v-bind 用于属性绑定, v-bind:属性=""
属性的简写: v-bind:src="" 简写为 :src=""
代码演示:10.html
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',
tag:'122'
}
});
}
<body>
<div id="itany">
<!-- <img src="{{url}}"> -->
<!-- 可以直接访问vue中的数据,不需要使用{{}} -->
<!-- <img v-bind:src="url" v-bind:tag="tag"> -->
<img :src="url" :width="w" :height="h">
</div>
</body>
2.2 class 和 style 属性
<style>
.aa{
color:red;
font-size: 30px;
}
.bb {
background-color: #ccc;
}
</style>
<div id="itapp">
<!-- 方式1: 变量的形式 -->
<p :class="bb">武汉</p> <!-- 不可以,Vue的属性绑定时不能直接css样式 -->
<!-- 方式2:数组的形式 -->
<p :class="[bb,dd]">武汉</p>
<!-- 方式3:JSON 常用-->
<p :class="{aa:true,bb:true}">武汉</p>
<p :class="{aa:num>2}">武汉</p>
<p style="color:red;font-size:40px">hello world</p>
<!-- v-bind:style -->
<p :style="[xx,yy]">hello world</p>
</div>
new Vue({
el:'#itapp',
data:{
bb:'aa',
dd:'bb',
num:1,
xx:{color:'blue',fontSize:'30px'},
yy:{backgroundColor:'#ff7300'}
}
})
六、 模板
1. 简介
Vue.js使用基于HTML的模板语法,可以将DOM绑定到Vue实例中的数据模板就是{{}},用来进行数据绑定,显示在页面中
也称为Mustache语法
2. 数据绑定的方式
- 双向绑定 v-model
- 单向绑定
- 使用两对大括号{{}},可能会出现闪烁的问题,可以使用v-cloak解决
- 使用v-text、v-html
3. 其他指令
- v-once 数据只绑定一次
- v-pre 不编译,直接原样显示
<script>
window.onload=function(){
let vm=new Vue({
el:'#itapp',
data:{
msg:'dfdf',
msg2:'dfdf <b>sdsdsd</b>',
},
created:function(){
// alert(111);
},
methods:{
// change(){
// this.msg = '测试'
// }
},
mounted(){
this.msg = '测试'
}
});
}
</script>
<style>
/* 必须配置css样式,否则不生效 */
[v-cloak]{
display:none;
}
</style>
<div id="itapp">
<input type="text" v-model="msg">
<!-- 用来解决可能会出现闪烁的问题 -->
<h3>标题:<span v-cloak>{{msg}}</span></h3>
<h3 v-text='msg'></h3>
{{msg}}
<p v-html="msg2"></p>
<p v-once>{{msg}}</p>
<p v-pre>{{msg}}</p>
</div>
七、 过滤器
1. 简介
用来过滤模型数据,在显示之前进行数据处理和筛选
语法:{{ data | filter1(参数) | filter2(参数)}}
2. 关于内置过滤器
vue1.0中内置许多过滤器,如:
currency、uppercase、lowercase
limitBy
orderBy
filterBy
vue2.0中已经删除了所有内置过滤器,全部被废除
如何解决:
a.使用第三方工具库,如lodash、date-fns日期格式化、accounting.js货币格式化等
b.使用自定义过滤器
3. 自定义过滤器
分类:全局过滤器、局部过滤器
使用全局方法Vue.filter(过滤器ID,过滤器函数)
<script>
/**
* 自定义全局过滤器
*/
Vue.filter('addZero',function(data){
console.log(data);
return data<10?'0'+data:data;
})
// Vue.filter('number',function(data,n){
// console.log(data,n);
// return data.toFixed(n)
// })
// Vue.filter('dateformat',function(data){
// var 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:'#itapp',
data:{
currentTime:Date.now()
// 2020-02-08
},
filters:{ //局部过滤器
number:(data,n) => {
return data.toFixed(n);
},
dateformat(data){
var d = new Date(data);
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
}
}
});
}
</script>
<div id="itapp">
<h3>{{3 | addZero}}</h3>
<!-- 课后作业:自己实现toFiexed()四舍五入的功能 -->
<h3>{{12.345678 | number(2)}}</h3>
<!-- <h3>{{12.045 | number(2)}}</h3> //toFixed天生就有bug ,不稳定-->
<h3>{{currentTime | dateformat}}</h3>
</div>