# 一、 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:'[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>
<!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>