# 一、 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库
共同点：`都不兼容低版本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>×</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>