第1章 Vue.js2.0由浅入深：基本用法

　　1.Vue.js是什么

　　Vue.js也称为Vue，读音/vju:/，类似view，错误读音vue

　　版本：v1.0 v2.0

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

　　参考：中文官网

　　2.vue和angular的区别

　　2.1 angular

　　上手较难
　　指令以ngxxx开头
　　所有属性和方法都存储在$scope中由google维护

　　2.2vue

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

　　共同点：都不兼容低版本IE

　　二，起步

　　1，下载核心库vue.js

　　官网下载地址：https://cn.vuejs.org/v2/guide/installation.html

　　本次我们使用的版本是2.3.4

　　可以在html的<scripts></scripts>直接引入链接，但是更好的方法是下载下来使用相对路径引入

https://cdn.jsdelivr.net/npm/vue@2.3.4/dist/vue.js

　　注意：@后跟版本号下载不同版本

　　2，Hello World（对比angular）

　　2.1angular实现

js:
let app=angular.module('myApp',[]);
app.controller('MyController',['$scope',function($scope){
$scope.msg='Hello World';
}]);
html:
<html ngapp="myApp">
<div ngcontroller="MyController">
{{msg}}
</div>
</html>

　　2.2vue实现

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

　　以上为伪代码，下面是实际实现代码1.html

　　目录结构如下

　　下载的vue.js已经在目录js下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="js/vue.js"></script>
    <!-- js -->
    <script>
        window.onload=function(){
          // 配置是否允许vue-devtools检查代码，允许调试，生产环境设置为false
          // Vue.config.devtools=false;
          // Vue.config.productionTip=false;
          var vm = new Vue({
          el: '#itany',
            data: {
            message: 'Hello world'
          } 
        });
      }
  </script>
   
 
</head>
<body>
    <!-- html -->
    <div id="itany">
        {{ message }}
    </div>
   
</body>
</html>

　　页面预览

　　3，安装vuedevtools插件，便于在chrome中调试vue

　　使用chrome打开

　　安装vue-devtools步骤

　　直接把解压后的文件夹拖过来即可安装

　　如果需要新版本可以去以下地址下载：https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521

　　下载下来的文件也可以通过拖拽安装　　

　　安装以后查看

　　生产环境需要配置如下api，默认均为true

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

　　这个全局配置api可以参考官网：https://cn.vuejs.org/v2/api/#devtools

　　三，常用指令

　　1，什么是指令

　　用来扩展html标签的功能

angular中常用的指令：
ngmodel
ngrepeat
ngclick
ngshow/nghide
ngif

　　2，vue中常用指令

　　v-model

　　双向数据绑定，一般用于表单元素

　　示例02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令：v-model</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el: "#itany",
                data: {
                    name:'tom'
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        用户名：<input type='text' v-model="name">
        <br>
        {{ name }}
    </div>
</body>
</html>

　　页面显示

　　name设置了一个默认值tom

　　手动输入任意字符在下面也会相应展示对应字符

　　可以显示任意数据类型，添加其他几个数据类型整数，布尔型，列表，数组（相当于字典）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令：v-model</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el: "#itany",
                data: {
                    name:'tom',
                    age:21,
                    flag:true,
                    nums:[12,4,23,5],
                    user:{id:9527,name:'唐伯虎'}
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        用户名：<input type='text' v-model="name">
        <br>
        {{ name }} <br>
        {{ age }}  <br>
        {{ flag }} <br>
        {{ nums }} <br>
        {{ user }}
     </div>
</body>
</html>

　　页面显示

　　注意：在定义时使用#代表关联的是id，如果是class则使用.符合，也可以关联所有标签，例如关联<div>标签，例如

 el: 'div'

　　但是不能关联大的标签例如<body> <html>否则会报错

[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.

　　如果在标签里面引用了没有定义的变量，则在页面不显示，在f12调试模式则会报错

　　v-for

　　对数组或对象进行循环操作，使用的是v-for，不是v-repeat

　　示例 03.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令：v-model</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el: "#itany",               
                data: {
                    arr:[12,4,5,6,3],
                    user:{id:9527,name:"唐伯虎",age:25}
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <ul>
            <li v-for="value in arr">{{value}}</li>
            <!-- 默认为值循环 -->
            <li v-for='value in user'>{{value}}</li>
            <!-- 键值循环，注意这里是v在前k在后的 -->
            <li v-for="(v,k) in user">{{k}}={{v}}</li>
        </ul>
    </div>
    
</body>
</html>

　　页面显示如下

　　迭代默认是不加序号的，可以在迭代时添加序号，相当于索引，索引是从0开始的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令：v-model</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el: "#itany",               
                data: {
                    arr:[12,4,5,6,3],
                    user:{id:9527,name:"唐伯虎",age:25},
                    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> -->
            <!-- 键值循环，注意这里是v在前k在后的 -->
            <!-- <li v-for="(v,k) in user">{{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

　　绑定事件

　　用来绑定事件，用法：von:事件="函数"

　　示例04.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令：v-model</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el: "#itany",               
                data: {
                    
                },
                methods:{  //用来定义方法
                    show:function(){
                        console.log('show方法')
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
       <button v-on:click="show">点我</button>
    </div>
    
</body>
</html>

　　解析

<button v-on:click="show">点我</button>
v-on # 绑定事件
click # 对应的事件是点击事件
="show" # 点击事件调用的是show方法

　　页面显示

　　下面使用一个方法往数组中添加数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令：v-model</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el: "#itany",               
                data: {
                    arr:[12,34,45,23,5]
                },
                methods:{  //用来定义方法
                    show:function(){
                        console.log('show方法');
                    },
                    add(){
                        console.log(this);
                        // 默认不能直接访问arr需要使用this代表这个vue示例本身来调用
                        // 使用this访问当前实例中的成员
                        this.arr.push(666);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- 如果调用的方法没有参数可以不加() -->
       <button v-on:click="show()">点我</button>
       <button v-on:click="add()">向数组中添加一个元素</button>
       <br>
       {{arr}}
 
    </div>
    
</body>
</html>

　　当我们点击按钮时，调用了add方法，然后使用push往数组添加一个数据，点击一次添加一次

　　注意：调用实例时需要使用this加对应的方法，如果直接调用则会报错说没有定义

　　v-show/v-if

　　用来显示和隐藏元素，v-show是通过display实现，v-if是每次删除重新创建

　　示例05.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令：v-show</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el: "#itany",               
                data: {
                  flag:true
                },
                methods:{
                    change(){
                        this.flag=false;
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <button v-on:click="change">隐藏</button>
        <!-- <button v-on:click="flag=false">隐藏</button> -->
        <div style="width: 100px;height: 100px;background-color: red;" v-show="flag">欢迎来到南京网</div>
    </div>
    
</body>
</html>

　　页面显示

　　点击一次就隐藏了

　　注意：可以两种方法

　　1，调用函数change()点击一次把flag设置成false

　　2，不绑定方法直接在事件里面把flag设置为false

　　如果想要点击隐藏再次点击显示呢？

　　1，change方法取反

change(){
                        this.flag=!this.flag;
                    }

　　2，直接设置flag去取反

flag=!flag

　　对比v-show和v-if的不同

　　v-show通过设置display来隐藏

　　v-if直接删除div标签来隐藏

　　四，用户管理

　　练习题：写一个用户管理页面，可以展示用户并且添加和删除用户，用户字段为姓名，年龄，邮箱

　　代码如下06.html

　　注意：使用了bootstrap，query需要下载好放在对应的目录

<!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>×</span>
                        </button>
                        <!-- users[nowIndex]?users[nowIndex].name:''
                        users[nowIndex] 有没有这个索引
                        如果有则取这个索引的name属性值
                        如果没有则取空值-->
                        <!-- 如果选择是单个用户删除则nowIndex为当前用户的索引值则弹出框显示确认要删除选中的用户xxx吗
                        如果选择的是删除所有则nowIndex为-1则显示确认要删除所有用户吗 -->
						<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>

　　页面展示

　　代码解析

　　增加用户代码，往列表users里面增加一个字典user，这个字典的取值是从input取出来的

addUser(){
    this.users.push(this.user);
    this.user={};
},

　　删除用户代码，

deleteUser(){
	if(this.nowIndex===-1){ //删除所有
		this.users=[];
	}else{
		this.users.splice(this.nowIndex,1); //从指定索引位置开始删除，删除一个
						}
}

　　在点击删除的时候绑定了一个用户index给变量nowIndex

v-on:click="nowIndex=index"

　　如果点击的是删除所有则变量nowIndex的值为-1

 v-on:click="nowIndex=-1"

　　然后则两个删除并不直接调用删除函数而是出状态框，弹出框，在弹出框点击确认才调用删除方法

　　删除用户确认框要展示本次删除的用户名需要使用以下代码

　　如果能取到值则取值的name属性，如果取不到则取空

{{users[nowIndex]?users[nowIndex].name:''}}

　　而不能使用

{{users[nowIndex].name}}

　　页面加载的时候就报错name没有定义

　　为什么会出现这个报错因为在页面加载的时候nowIndex的值为-1然后使用这个索引去users取值是取不到的，所以报错2.0有这个问题1.0不报错，1.0取不到就取不到了

　　注意：在vue里面判断相等不相等使用以下符号

===
!===

　　课后作业：实现通过复选框选中删除（未完成不知道怎么写）

　　只知道以下方法可以取到索引值到一个列表

 <input type='checkbox'  v-model="checkdChange":value="index">

　　五，事件和属性

　　1.事件

　　1.1事件简写

　　v-on:click=“”简写方式@v-on=“”

　　事件简写示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件简写和事件对象</title>
    <script src="js/vue.js"></script>
    <!-- js -->
    <script>
        window.onload=function(){
          let vm=new Vue({
          el: '#itany',
          methods: {
            show(){
                console.log('123');
            }
          } 
        });
      }
  </script>
   
 
</head>
<body>
    <!-- html -->
    <div id="itany">
        <!-- <button v-on:click="show">点我</button> -->
        <button @click="show">点我</button>
    </div>
   
</body>
</html>

　　以下两种写法绑定事件对象的效果是一样的

<button v-on:click="show">点我</button>
<button @click="show">点我</button>

　　1.2事件对象$event

　　以下示例点击按钮显示按钮的文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件简写和事件对象</title>
    <script src="js/vue.js"></script>
    <!-- js -->
    <script>
        window.onload=function(){
          let vm=new Vue({
          el: '#itany',
          methods: {
            show(){
                console.log('123');
            },
            print(e){
                console.log(e.target.innerHTML); // DOM对象
            }
          } 
        });
      }
  </script>
   
 
</head>
<body>
    <!-- html -->
    <div id="itany">
        <!-- <button v-on:click="show">点我</button> -->
        <button @click="show">点我</button>
        <button @click="print">Click Me</button>

    </div>
   
</body>
</html>

　　页面显示

　　1.3 事件冒泡

　　阻止事件冒泡

　　a)原生js方式

　　示例08.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡和默认行为</title>
    <script src="js/vue.js"></script>
    <!-- js -->
    <script>
        window.onload=function(){
          let vm=new Vue({
          el: '#itany',
          methods: {
            show(){
                console.log('111');
            },
            print(){
                console.log('222');
            },
            write(){
                console.log('333');
            },
          } 
        });
      }
  </script>
   
 
</head>
<body>
    <!-- html -->
    <div id="itany">
        <div @click="write">
            <p @click="print">
                <button @click="show">点我</button>
            </p>
        </div>

    </div>
   
</body>
</html>

　　页面显示

　　点击按钮一次把按钮的方法和段落p即标签div的方法都调用了

　　阻止冒泡，修改代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡和默认行为</title>
    <script src="js/vue.js"></script>
    <!-- js -->
    <script>
        window.onload=function(){
          let vm=new Vue({
          el: '#itany',
          methods: {
            show(e){
                console.log('111');
                e.stopPropagation();
            },
            print(){
                console.log('222');
            },
            write(){
                console.log('333');
            },
          } 
        });
      }
  </script>
   
 
</head>
<body>
    <!-- html -->
    <div id="itany">
        <div @click="write">
            <p @click="print">
                <button @click="show($event)">点我</button>
            </p>
        </div>

    </div>
   
</body>
</html>

　　页面显示

　　b）vue方式，不依赖事件对象

　　加一个stop修饰符即可，更加简洁

<button @click.stop="show">点我</button>

　　1.4事件默认行为

　　阻止事件默认行为

　　a）原生js方式

　　演示代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡和默认行为</title>
    <script src="js/vue.js"></script>
    <!-- js -->
    <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>
    <!-- html -->
    <div id="itany">
        <div @click="write">
            <p @click="print">
                <button @click.stop="show">点我</button>
            </p>
        </div>
        <hr>
        <a href="#" @click="study()">俺是链接</a>
    </div>
   
</body>
</html>

　　页面显示

　　修改传递事件对象event修改以下代码

 <a href="#" @click="study($event)">俺是链接</a>

study(e){
        console.log('444');
        e.preventDefault();
},

　　b)vue方法

　　加修饰符

<a href="#" @click.prevent="study()">俺是链接</a>

　　1.5键盘事件

　　按下键盘键打印asscii码

　　09.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <script src="js/vue.js"></script>
    <!-- js -->
    <script>
        window.onload=function(){
          let vm=new Vue({
          el: '#itany',
          methods: {
                show(e){
                    console.log(e.keyCode);
                }
          } 
        });
      }
  </script>
   
 
</head>
<body>
    <!-- html -->
    <div id="itany">
        <!-- @keydown @keypress @keyup -->
        
       用户名:<input type='text' @keydown='show($event)'>
       <!-- 简化按键的判断 -->
    </div>
   
</body>
</html>

　　页面显示

　　vue的方法

　　代码修改如下09.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <script src="js/vue.js"></script>
    <!-- js -->
    <script>
        window.onload=function(){
          let vm=new Vue({
          el: '#itany',
          methods: {
                show(e){
                    console.log(e.keyCode);
                },
                print(){
                    console.log('11111')
                }
          } 
        });
      }
  </script>
   
 
</head>
<body>
    <!-- html -->
    <div id="itany">
        <!-- @keydown @keypress @keyup -->
        
       <!-- 用户名:<input type='text' @keydown='show($event)'> -->
       <!-- 简化按键的判断 -->
        用户名:<input type='text' @keydown.13='print'>
    </div>
   
</body>
</html>

　　asscii码为13对应的是回车键

　　所以在按下回车键的时候调用print方法

　　13不直观只有知道回车的asscii码为13才可以使用，可以使用别名enter

 用户名:<input type='text' @keydown.enter='print'>

　　效果也是一样的，大部分按键都有别名例如方向上键是up

　　如果没有别名也可以自定义别名，例如字母a-z是没有别名的1.0可以2.0不行

　　在<scripts></scripts>加入以下代码即可，前提是知道按键对应的asscii码

Vue.config.keyCodes={
			a:65,
			f1:112
}

　　注意：f1是键盘上的f1键不是字符f1，因为f1是浏览器的帮助按键会冲突，需要演示f1按键按下的过程需要crtl+f1

　　1.6事件修饰符

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

　　2.属性

　　2.1属性的绑定和简写

　　模板可以使用{{}}引用vue示例的属性，但是无法在标签内使用这种方法引用，例如我在vue定义了一张图片的url需要在标签<img>内引用

　　10.html

　　不允许这样调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的绑定和属性的简写</title>
    <script src="js/vue.js"></script>
    <!-- js -->
    <script>

        window.onload=function(){
          let vm=new Vue({
          el: '#itany',
          data: {
              url:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
              w:'200px',
              h:'100px'
          }
        });
      }
  </script>
   
 
</head>
<body>
    <!-- html -->
    <div id="itany">
        
        <img src={{url}}>
    </div>
   
</body>
</html>

　　页面报错

　　需要使用v-bing来引用，修改代码，使用v-bingd绑定，直接使用url调用不需要{{}}

   <img v-bind:src="url">

　　简写方法，省略v-bind使用符号:

  <img :src="url">

　　多定义几个变量

 data: {
              url:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
              w:'200px',
              h:'100px'
          }

　　引用

 <img :src="url" :width="w" :height="h">

　　2.2 class和style

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

　　示例11.html

<!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解决

　　　　　　　必须设置css样式否则不生效

　　　　示例：12.html

<!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:{
                    msg:'welcome to itany'
                },
                created:function(){
                    alert(111)
                }
			});
		}
    </script>
    <style>
        [v-cloak]{
            display: none
        }
    </style>
</head>
<body>
	<div id="itany">
       <h3 >{{msg}}</h3> 
       <!-- 当成纯文本 -->
       <h3 v-text="msg"></h3>
       <!-- 可以识别html标签 -->
       <h3 v-html="msg"></h3>
	</div>
</body>
</html>

　　不使用v-cloak

　　解析：在创建的时候调用弹出错误，msg没有获得值所以显示原始文档{{msg}}

　　注意：chrome可能演示不出此效果，可以换其他浏览器例如火狐

 created:function(){
                    alert(111)
                }

　　使用v-cloak，需要配合样式使用，否则不生效

<!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:{
                    msg:'welcome to itany'
                },
                created:function(){
                    alert(111)
                }
			});
		}
    </script>
    <style>
        [v-cloak]{
            display: none
        }
    </style>
</head>
<body>
	<div id="itany">
       <h3 v-cloak>{{msg}}</h3> 
       <!-- 当成纯文本 -->
       <h3 v-text="msg"></h3>
       <!-- 可以识别html标签 -->
       <h3 v-html="msg"></h3>
	</div>
</body>
</html>

　　页面显示

　　　　方式2:使用v-text，v-html

<!-- 当成纯文本 -->
<h3 v-text="msg"></h3>
<!-- 可以识别html标签 -->
<h3 v-html="msg"></h3>

　　两者不同在于一个当成超文本一个可以识别html标签

　　v-once 数据只绑定一次

　　演示12.html

<!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:{
                    msg:'welcome to itany'
                },
                // created:function(){
                //     alert(111)
                // }
			});
		}
    </script>
    <style>
        [v-cloak]{
            display: none
        }
    </style>
</head>
<body>
	<div id="itany">
       <input v-model="msg">
       <h3 v-cloak>{{msg}}</h3> 
       <!-- 当成纯文本 -->
       <h3 v-text="msg"></h3>
       <!-- 可以识别html标签 -->
       <h3 v-html="msg"></h3>
       <h3 v-once>{{msg}}</h3>
	</div>
</body>
</html>

　　页面显示

　　解析：input框内双向数据绑定，其他标签会跟随输入框的文本变化而变化，而设置了v-once的标签只在第一次引用，不再变化

　　v-pre 不编译，直接原样显示

　　如果我们就是需要显示{{}}则使用v-pre相当于其他语言的转义

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

　　页面显示原始字符

　七，过滤器

　　1，简介

　　用来过滤模型数据，在显示渲染之前进行数据处理和筛选

　　语法：{{ data | filter1(参数) | filter2(参数)}}

　　2，关于内置过滤器

　　vue1.0中内置许多过滤器，如：

　　currency，upercase，lowercase

　　limitBy

　　orderBy

　　filterBy

　　vue2.0把内置过滤器都删除了

　　如何解决

　　a，使用第三方工具库、如loadash，date-fns日期格式化、accounting.js货币格式化等

　　b，自定义过滤器

　　3，自定义过滤器

　　分类：全局过滤器，局部过滤器

　　3.1 自定义全局过滤器

　　使用全局方法Vue.filter(过滤器ID，过滤器函数)

　　自定义一个全局过滤器，传递一个数字如果大于10则保持原样，如果小于10即是个位数则补0

　　13.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义过滤器</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
            // 自定义全局过滤器
            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 => {
                // console.log(data,n)
                let d=new Date(data)
                return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
            });
			let vm=new Vue({
				el:'#itany',
				data:{
                    currentTime: Date.now()
                }, 
                filter:{ // 局部过滤器
                    number:(data,n) =>{
                        return data.toFixed(n);
                    }
                }             
			});
		}
    </script>
    <style>
        [v-cloak]{
            display: none
        }
    </style>
</head>
<body>
	<div id="itany">
        <h3>{{18 | addZero }}</h3>
        <h3>{{12.345678 | number(3)}}</h3>
        <h3>{{currentTime|date}}</h3>
	</div>
</body>
</html>

　　解析：自定义全局过滤器addZero

{{18 | addZero }} # 把18作为参数传递给自定义全局过滤器addZero
Vue.filter('addZero',function(data){
                // console.log(data)
                return data<10?'0'+data:data
            });
# data为10
# 返回为如果data小于10则加一个字符0返回否则返回data

　　同理下面的全局过滤器除了传递原始数字还传递参数n代表取小数点后几位数

 Vue.filter('number',(data,n) => {
                // console.log(data,n)
                return data.toFixed(n)
            });

　　下面过滤器传递当前时间戳显示易理解的日期时间信息

Vue.filter('date',data => {
                // console.log(data,n)
                let d=new Date(data)
                return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
            });

　　3.2自定义局部过滤器

　　局部过滤器只能是vue示例局部使用

　　定义方式和全局过滤器类似

filter:{ // 局部过滤器
                    number:(data,n) =>{
                        return data.toFixed(n);
                    }
                }

deleteUser(){
                        if(this.nowIndex===-1){ //删除所有
                            this.users=[];
                        }else{
                            this.users.splice(this.nowIndex,1); //从指定索引位置开始删除，删除一个
                        }
                    }

posted @ 2021-12-10 14:40 minseo 阅读(72) 评论(0) 编辑收藏举报

刷新页面返回顶部

minseo

第1章 Vue.js2.0由浅入深：基本用法

1.Vue.js是什么

2.vue和angular的区别

2.1 angular

2.2vue

二，起步

1，下载核心库vue.js

2，Hello World（对比angular）

3，安装vue­devtools插件，便于在chrome中调试vue

三，常用指令

1，什么是指令

2，vue中常用指令

四，用户管理

五，事件和属性

1.事件

1.1事件简写

1.2事件对象$event

1.3 事件冒泡

1.4事件默认行为

1.5键盘事件

1.6事件修饰符

2.属性

2.1属性的绑定和简写

2.2 class和style

六，模板

1.简介

2.数据绑定的方式

七，过滤器

1，简介

2，关于内置过滤器

3，自定义过滤器

3.1 自定义全局过滤器

3.2自定义局部过滤器

公告

　　1.Vue.js是什么

　　2.vue和angular的区别

　　2.1 angular

　　2.2vue

　　二，起步

　　1，下载核心库vue.js

　　2，Hello World（对比angular）

　　3，安装vuedevtools插件，便于在chrome中调试vue

　　三，常用指令

　　1，什么是指令

　　2，vue中常用指令

　　四，用户管理

　　五，事件和属性

　　1.事件

　　1.1事件简写

　　1.2事件对象$event

　　1.3 事件冒泡

　　1.4事件默认行为

　　1.5键盘事件

　　1.6事件修饰符

　　2.属性

　　2.1属性的绑定和简写

　　2.2 class和style

　　六，模板

　　1.简介

　　2.数据绑定的方式

　七，过滤器

　　1，简介

　　2，关于内置过滤器

　　3，自定义过滤器

　　3.1 自定义全局过滤器

　　3.2自定义局部过滤器