vue，讀音view，簡單易用的前端框架。特點如下：
1.一個mvvm的前端框架，內部做好了html中dom對象和后台用js語言定義的變量的雙向綁定
2.中國人尤雨溪維護的個人項目，中文資料多，和google維護的angular框架相似
.....
bootstrap,一個css庫，內部定義了很多樣式類型（btn btn-sm btn-danger text-center table....），dom元素中class賦值相應的樣式類型，則有相應的風格。比傳統的好看。
學習視頻：https://pan.baidu.com/s/16WCTG3yY-dIA2YXasw6csA
說明：
a學習的時候vue2.x版本，和視頻中的某些功能實現有出入
b IDE后來選擇了webstorm，其智能提示目前比vscode做得好一些。
1 初識vue
a.引用庫文件 可以引用下載下來的庫文件，可以引用url
在<header>內填寫
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或
<script src="lib/vue.js"></script>
b.在header 的script中創建一個view的實例（controller），該實例內部維護一個json數據data（model），html中的dom聲明了v-mode=“xxx”（xxx是data內部的數據名稱）（view）。框架實現了mvc模式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
const controller = new Vue({
el: "#app", //選擇器
data: {
msg: "hello vue"
}
});
}
</script>
</head>
<body>
<div id='app'>
<h2>{{msg}}</h2>
</div>
</body>
</html>
上述code的說明：
a.如果把 window.onload里 的function中的vue實例的const去掉，該實例則為全局變量，此時可用瀏覽器的調試工具（F12）中的控制台，輸入controller.msg='nihao',html中對應刷新nihao
b.vue中的el表示element，表示選擇器，可以填寫id，例如#app；可以填寫class ;可以填寫 html中元素類別名稱，例如div。但是選擇器對應的標識不能對應html和body，會出錯。
c html中引用{{xxxx}} xxxx是data中定義的字段，這種寫法引用變量的內容
vue實例中的data是一個json的變量，里面可以定義不同類型的字段，支持bool，double，array，json，string...
例如：
data:{msg:"hello vue",
msg2:12,
msg3:true,
arr:['apple','orange','banana'],
json:{a:'apple',b:'orange',c:'banana'}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload=function(){
const controller = new Vue
({
el:"div",//選擇器
data:{msg:"hello vue",
msg2:12,
msg3:true,
arr:['apple','orange','banana'],
json:{a:'apple',b:'orange',c:'banana'}
}
});
};
</script>
</head>
<body>
<div>
<!-- 雙向數據綁定 -->
<input type="text" v-model='msg'>
<br>
<input type="text" v-model='msg'>
<br>
{{msg2}}
<br>
{{msg3}}
<br>
{{arr}}
<br>
{{json}}
</div>
</body>
</html>
2.v-for
用於結合html中的ul，ol，table循環迭代data中集合元素的語法
例如在ul標簽中可以
<ul v-for="(v,index) in arr">
<li> {{v}} {{index}}</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
const controller = new Vue({
el: "div", //選擇器
data: {
arr: ['apple', 'orange', 'banana'],
json: {
a: 'apple',
b: 'orange',
c: 'banana'
}
}
});
};
</script>
</head>
<body>
<div>
<ul v-for="(v,index) in arr">
<li> {{v}} {{index}}</li>
</ul>
<hr>
<!-- value,key,index順序莫顛倒 -->
<ul v-for='(value,key,index) in json'>
<li>
value:{{value}} key:{{key}} index {{index}}
</li>
</ul>
<hr>
</div>
</body>
</html>
上述代碼中：
v-for后跟字符串，由於是弱類型，解析型的語言，新手容易出錯。
不需要index信息則 v-for=‘value in arry’則可，需要index信息則v-for='(v,index) in arr' 其中v,index 為自定義名，視頻教學中說不這樣寫可以寫$index,實際上不行，可能是版本不同的問題。
3.v-mode
指定html中的元素綁定到vue實例中的data的變量上，可以多個html元素綁定到同一份的實例數據，例如2個html textbox同步內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload=function(){
const controller = new Vue
({
el:".box",//選擇器
data:{msg:"hello vue",
foods:['apple','orange','banana']}
});
};
</script>
</head>
<body>
<div class='box'>
<!-- 雙向數據綁定 -->
<input type="text" v-model='msg'>
<br>
<input type="text" v-model='msg'>
</div>
</body>
</html>
4.v-show
用於控制html元素的顯示和隱藏
v-show="show" //show是vue中data里一個定義為bool的字段
<div style="width:100px;height:100px;background:red" v-show="show"></div>
注意，在v-show后賦值內容引用data不需要{{}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
const controller = new Vue({
el: "div", //選擇器
data: {
show:true
},
methods: {
hide: function () {
this. arr.push ('tomato')
}
}
})
}
</script>
</head>
<body>
<div>
<input type="button" value="clickme" v-on:click="show = false">
<div style="width:100px;height:100px;background:red" v-show="show"></div>
</div>
</body>
</html>
5.事件v-on
html元素中使用 v-on:事件名="方法名" 為html事件注冊事件響應方法
方法定義在vue實例中的json的methods的字段內，該methods字段也是一個json，內部可以定義多個方法。
事件名可以是click mouseover mouseleave dblclick...
例如：
<script>
window.onload = function ()
{
const controller = new Vue({
el: "div", //選擇器
data: {},
methods: {
show: function () {alert('1') }
}
})
}
</script>
...
<input type="button" value="clickme" v-on:click="show()">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
const controller = new Vue({
el: "div", //選擇器
data: {
arr: ['apple', 'orange', 'banana'],
json: {
a: 'apple',
b: 'orange',
c: 'banana'
}
},
methods: {
add: function () {
this. arr.push ('tomato')
}
}
})
}
</script>
</head>
<body>
<div>
<input type="button" value="clickme" v-on:click="add()">
<br>
<ul v-for='value in arr'>
<li>{{value}}</li>
</ul>
<hr>
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
</body>
</html>
6.用戶管理
使用了bootstrap和vue實現了用戶管理功能，可以新增，刪除用戶；
bootstrap用於優化美化布局 對html元素使用class聲明賦值。做出了一個比傳統風格好看的界面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/vue.js"></script>
<script>
window.onload=function () {
const control = new Vue({
el:"#app",
data:{
msg1:'hello',
myData:[{name:"jay",age:'18'},
{name:"spring",age:'16'}
],
username:'',
age:'',
nowIndex:-1
},
methods:{
add:function () {this.myData.push({name:this.username,age:this.age});
this.reset()
},
reset:function(){this.username='';this.age='';},
deleteData:function(n) {
if(n==-2)
this.myData=[];
else
this.myData.splice(n,1);
}
}
})
}
</script>
</head>
<body>
<div id="app" class="container">
<form role="form">
<div class="form-group">
<label for="username">用戶名:</label>
<input type="text" id="username" class="form-control" placeholder="輸入用戶名" v-model="username">
</div>
<div class="form-group">
<label for="age">年齡:</label>
<input type="text" id="age" class="form-control" placeholder="輸入年齡" v-model="age">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn-primary" v-on:click="add">
<input type="reset" value="重置" class="btn-danger" >
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption style="caption-side:top" class="h2 text-info text-center">用戶信息表</caption>
<tr class="text-center text-danger">
<th>序號</th>
<th>名字</th>
<th>年齡</th>
<th>操作</th>
</tr>
<tr class="text-center" v-for="(item,index) in myData">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index">刪除</button>
</td>
</tr>
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm"data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">刪除全部</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暫無數據...</p>
</td>
</tr>
</table>
<div role="dialog" class = "modal fade" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">確認刪除么?</h4>
<button class="close" data-dismiss="modal">
<span>×</span></button>
</div>
<div class="modal-body text-right">
<button class="btn btn-sm btn-primary" data-dismiss="modal">取消</button>
<button class="btn btn-sm btn-danger" data-dismiss="modal" v-on:click="deleteData(nowIndex)">確認</button>
</div>
</div>
</div>
</div>
</body>
</html>
其中"data-toggle="modal" 表示使用模態窗口
data-target="#layer" 表示引用具體模態窗口的id
data-dismiss="modal"表示關閉模態窗口
一點感受：
界面目前的編程實現風格是聲明出來，然后由瀏覽器幫忙畫。但是由於html松散零碎，於是有很多不同的ui庫，於是由再抽象了一層，開發人員分層后，熟悉的是抽象的編程接口。