一、vue简绍
1. Vue.js是什么
Vue.js也称为Vue，读音/vju:/，类似view，错误读音v-u-e。 版本分为v1.0 和 v2.0
2、Vue.js的特点
1、 是一个构建用户界面的框架
2、是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
3、数据驱动+组件化的前端开发（核心思想）
4、通过简单的API实现**响应式的数据绑定**和**组合的视图组件**
5、更容易上手、小巧
3、为什么要学Vue.js
1、简单、易学、更轻量
2、 指令以v-xxx开头，好记
3、 + HTML代码+JSON数据，再创建一个vue实例
二、vue语法格式介绍
js:
new Vue({
el:'#itany', //指定关联的选择器
data:{ //存储数据
msg:'Hello World',
name:'tom'
},
methods:{//存储方法
showme:function(temp){
alter(temp)
}}
});
html:
<div id="itany">
{{msg}} //两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中
</div>
三、安装vue-devtools插件，便于在chrome中调试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，该插件可以在google商城上安装
Vue.config.devtools=true; #是否在开发环境检测vue,默认为true，如果为flase那么在开发环境下不能使用vue-devtools检查代码
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>
四、Vue常用指令
1、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',//可以通过class类来指定关联的选择器
//el:'body',//可以指定元素名称指定关联的选择器，vue2.0中不允许将vue实例挂载到<html>或<body>元素，在vue1.0中是可以的
el:'div',
data:{
name:'', //即使没有值，也不能省略，不然就会报错，因为html元素会找不到该值
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>
2、 v-for：对数组或对象进行循环操作（：在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> --> //循环体如果是个数组，v代表的是数值，k代表的是索引值
<!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> --> //循环体如果是个字典，v代表的是值，k代表的是键 <!-- 可以直接循环包含重复数据的集合，可以通过指定: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>
3、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>
4、v-show/v-if ：用来显示或隐藏元素，(v-show是通过display实现，v-if是每次删除后再重新创建)
<!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:flase">隐藏</button> -->
<button v-on:click="flag=!flag">隐藏</button> #flag=!flag表示对flag进行取反 <hr>
<div style="width: 100px;height: 100px; background-color: red" v-if="flag">欢迎来到南京网博</div>
</div>
</body>
</html>
5、v-text和v-html ：用来显示标签文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="vue.js" ></script>
</head>
<body> <div id="app">
<p>{{temp}}</p>
<b v-text="temp"></b>
<div v-html="temp"></div>
<div>{{temp+'我不相信！！'}}</div>
<div>{{temp2?888:999}}</div>
</div> <script>
var vm = new Vue({
el: "#app", //document.getElementById()
data: {
temp: "我是美女！！！",
temp2: false
}
})
//var temp2 = "我是美国人!"
setTimeout(function(){
vm.temp = "吴老师是美男子！"
},5000) </script>
</body>
</html>
6、v-if\v-else指令：根据表达式的真假值，动态地插入、移除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="myapp">
<p v-if="temp">老师来了是889977689999999</p>
<p v-else>65554567677777</p>
</div> <script>
var vm = new Vue({
el: "#myapp",
data: {
temp: true
}
})
</script>
</body>
</html>
7、v-bind指令：绑定元素的属性，可以动态改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="vue.js"></script>
<div id="app">
<a :href="url" > baidu</a>
<a v-bind:href="url">baidu2</a>
</div> </head>
<body>
<script>
new Vue(
{
el:'#app',
data:{
temp:1,
url:'http://www.baidu.com'
}
}
)
</script>
</body>
</html>
五、vue+boostrap练习
<!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={};//添加完用户清空input框
},
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>//data-toggle表示的是行为是model模态对话框，data-target表示的是弹出模态对话框的目标
<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> <!-- 模态框，弹出框 -->//固定写法,模态对话框里面都是包裹三次，model》model-dialog》model-content》然后再写模态对话框的头部和身体数据
<div class="modal fade" id="del">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">//ata-dismiss="modal"取消模态对话框，class="close"表示叉
<span>×</span>
</button>//通过？ :进行if/else判断，因为当js代码加载到这里时此时的nowindex的值默认为-1，所以user[nowindex]是取不到值的，如果娶不到值就为空
<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、 事件简写
v-on:click="" ----简写方式 @click=""
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);//在methodes的方法里面这个this都是表示的vue实例
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<button v-on:click="show">点我</button>
<button @click="show">点我</button>
<hr> <button @click="print($event)">Click Me</button>//vue中的$event等价于js中的event对象
</div>
</body>
</html>
3、 事件冒泡(当你在一个元素中触发一个事件时这个事件会传播，默认时向上传播，这就是冒泡)
阻止事件冒泡：
方式1：原生js方式，依赖于事件对象
方式2：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();阻止事件的冒泡，这是原生js方式，一定要先拿到事件对象才能阻止。e是show（e） 接受过来的参数
},
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> -->//$event是个事件对象
<button @click.stop="show">点我</button>//通过vue方式解决事件冒泡，不依赖于事件对象，会自动调用stopPropagation()方法
</p>
</div>
<hr> <!-- <a href="#" @click="study($event)">俺是链接</a> -->
<a href="#" @click.prevent="study">俺是链接</a>
</div>
</body>
</html>
4、 事件默认行为
阻止默认行为：
方式1：原生js方式，依赖于事件对象
方式2：vue方式，不依赖于事件对象（@click.prevent，通过修饰符来完成）
示例：
<!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:{
study(){
console.log(444);
// e.preventDefault();//原生js阻止事件默认行为
}
}
});
}
</script>
</head>
<body>
<div id="itany"> <hr> <!-- <a href="#" @click="study($event)">俺是链接</a> -->
<a href="#" @click.prevent="study">俺是链接</a>
</div>
</body>
</html>
5、 键盘事件
回车键：@keydown.13 或@keydown.enter。。。
上键：@keydown.38 或@keydown.up。。。。
默认vue2.o没有@keydown.a/b/c这26个英文字母的事件，但是可以自定义键盘事件，也称为自定义键码或自定义键位别名
示例：
<!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>
6、 事件修饰符
stop - 调用 event.stopPropagation()。
prevent - 调用 event.preventDefault()。
capture - 添加事件侦听器时使用 capture 模式。
self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
native - 监听组件根元素的原生事件。
once - 只触发一次回调。
left - (2.2.0) 只当点击鼠标左键时触发。
right - (2.2.0) 只当点击鼠标右键时触发。
middle - (2.2.0) 只当点击鼠标中键时触发。
passive - (2.3.0) 以 { passive: true } 模式添加侦听器
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、 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形式，常用！！！aa表示的是属性值，布尔值表示是否运用这个属性值 -->
<!-- <p :class="{aa:true,cc:flag}">南京网博</p> -->
<!-- <p :class="{aa:num>0}">南京网博</p> --> <!-- 方式4：变量引用json形式 -->
<!-- <p :class="hello">南京网博</p> --> <!--
style属性
-->
<p :style="xx">itany</p>
<p :style="[xx,yy]">itany</p> </div>
</body>
</html>
七、 模板
1、 简介
1、Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
2、模板就是{{}}双大括号，用来进行数据绑定，显示在页面中。{{}}也称为Mustache语法
2、 数据绑定的方式
1、双向绑定：v-model
2、单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决，就是数据没显示出来那个双大括号不要显示
方式2：使用v-text、v-html
3、其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示
4、示例：
<!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 v-cloak >aaa{{msg}}</h3> //数据的单项绑定
<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、关于内置过滤器
1、 vue1.0中内置许多过滤器，如：currency、uppercase、lowercase limitBy、 orderBy、 filterBy
2、vue2.0中已经删除了所有内置过滤器，全部被废除
3、 解决办法：
1、使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
2、使用自定义过滤器
3、 自定义过滤器
1、 自定义全局过滤器
使用全局方法Vue.filter(过滤器ID,过滤器函数)
2、自定义局部过滤器
自定义局部过滤器和自定义全局过滤器的方式相同，只不过他们俩编写的位置不同而已，引入方式都是一样的。
4、示例：
<!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<?''+data:data; //如果数据小于10就在数据前面自动补0,如果数据大于10就返回数据。
});
/*Vue.filter('number',(data,n) => {
// console.log(data,n);//接受的第一个参数为要过滤的数据，后面的参数为传递的值，可以有n个参数。
return data.toFixed(n); //toFixed是数字四舍五入的方法，n表示小数点的后几位。
});*/
Vue.filter('date',data => {
let d=new Date(data);
return d.getFullYear()+'-'+(d.getMonth()+)+'-'+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>{{ | addZero}}</h3> --> <!-- 课后作业：自己实现toFiexed()四舍五入的功能 -->
<h3>{{12.345678 | number()}}</h3>
<!-- <h3>{{12.045 | number()}}</h3> --> <h3>{{currentTime | date}}</h3> </div>
</body>
</html>