1.MVVM框架
1.M：模型層（Model）睡腿，主要負責業(yè)務數據相關；
2.V：視圖層（View）爷光，顧名思義垫竞，負責視圖相關，細分下來就是html+css層蛀序；
3.VM：（ViewModel）V與M溝通的橋梁欢瞪，也可以看作為控制器，負責監(jiān)聽M或者V的修改徐裸，是實現MVVM雙向綁定的要點遣鼓；
MVVM支持雙向綁定，意思就是當M層數據進行修改時重贺，VM層會監(jiān)測到變化譬正，并且通知V層進行相應的修改，反之修改V層則會通知M層數據進行修改檬姥，以此也實現了視圖與模型層的相互解耦；
2.初識Vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<p>{{mytxt}}</p>
</div>
<script>
let vm=new Vue({
el:'#d1',
data:{
mytxt:'歡迎使用Vue.js'
}
})
</script>
</body>
</html>
3.Vue數據的綁定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入vue -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="d2">
<!-- 雙向綁定 -->
<input type="text" name="" id="" v-model="pname" />
<br>
<p>產品名稱：{{pname}}</p>
<!-- 單項綁定-->
<input type="text" name="" id="" v-bind:value="price" />
<br>
<p>產品價格：{{price}}</p>
</div>
<script type="text/javascript">
let sm=new Vue({
el:'#d2',
data:{
pname:'計算機',
price:1000
}
})
</script>
</body>
</html>
4.屬行的綁定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
.one{
color: yellow;
}
.two{
color: red;
}
</style>
</head>
<body>
<div id="d">
<p v-bind:class="bg">李濟啊</p>
<input type="button" name="" id="" value="點擊換顏色" v-on:click="ccc" />
<ul v-for="k in arr">
<li>{{k}}</li>
</ul>
<input type="button" name="" id="" value="加++" v-on:click="addarr" />
</div>
<script type="text/javascript">
let z=new Vue({
el:'#d',
data:{
bg:'one',
arr:[1,2,3]
},
methods:{
ccc(){
if(this.bg=='one'){
this.bg='two'
}else{
this.bg='one'
}
},
addarr(){
/* 后臺增加,頁面不變
for(let k in this.arr){
this.arr[k]+=2
}
console.log(this.arr) */
//變異方法改變數組在頁面的呈現
for(let k in this.arr){
this.arr.splice(k,1,this.arr[k]+=1)
}
}
}
})
</script>
</body>
</html>
5.函數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="d">
<input type="button" name="" id="" value="點擊" v-on:click="show" />
<input type="button" name="" id="" value="點擊" v-on:click="display" />
<input type="button" name="" id="" value="增加" v-on:click="add"/>
<p>運算結果{{num}}</p>
</div>
<script type="text/javascript">
let z=new Vue({
el:'#d',
data:{
num:1
},
methods:{
//以匿名函數的形式聲明
show:function(){
alert('歡迎使用Vue中的函數')
},
//非匿名函數不加function
display(){
alert('另一種形式的Vue函數聲明')
},
add(){
this.num+=1;
}
}
})
</script>
</body>
</html>
6.函數之頁面切換案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid blue;
}
.show{
display: block;
}
.hide{
display: none;
}
li{
display: inline-block;
border: 1px solid red;
}
#d1{
background-color: yellow;
}
#d2{
background-color: pink;
}
#d3{
background-color: aqua;
}
</style>
</head>
<body>
<div id="con">
<ul>
<li id="m1" v-on:click="xianshi2()">菜單1</li>
<li id="m2" v-on:click="xianshi2()">菜單2</li>
<li id="m3" v-on:click="xianshi2()">菜單3</li>
</ul>
<div v-show="num==0" id="d1">
功能區(qū)1
</div>
<div v-show="num==1" id="d2">
功能區(qū)2
</div>
<div v-show="num==2" id="d3">
功能區(qū)3
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#con',
data:{
num:0
},
methods:{
xianshi2(){
//獲取當前被點擊的li
let cur=event.srcElement;
//得到li所在的ul
let ul=cur.parentElement;
//獲取所有l(wèi)i的集合
let lis=ul.children;
for(var i in lis){
if(lis[i]==cur){
this.num=i;
break;
}
}
console.log(this.num)
}
}
})
</script>
</body>
</html>
7.監(jiān)聽器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="port">
<input type="button" name="" id="" value="改變" v-on:click="change()" />
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#port',
data:{
num:10
},
methods:{
change(){
this.num+=3;
}
},
//淺度監(jiān)聽器
watch:{
//函數名跟定義變量名一樣
num(newvalue,oldvalue){
console.log("原有數值"+oldvalue+"新數值"+newvalue);
}
}
})
</script>
</body>
</html>
8.過濾器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="h">
<p>{{num|fail}}</p>
</div>
<script type="text/javascript">
Vue.filter('fail',function(value){
let date=new Date
let mouth=date.getMonth()+1
return 'CNN'+value+"EP"+date.getFullYear()+mouth+date.getDate()+date.getHours()+date.getMinutes()+date.getSeconds()
})
Vue.filter('star',function(value){
return "CNN"+value
})
let z=new Vue({
filters:{
tail(value){
return value+"EP"
}
},
el:'#h',
data:{
num:210423
}
})
</script>
</body>
</html>
9.猜數字案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title>猜數字</title>
<!--樣式代碼放置于style標簽里-->
<style>
/*
形式1：
#標簽ID名{
標簽屬性名（例如邊框粉怕、背景等）：屬性值1 屬性值2 屬性值3... ;
標簽屬性名（例如邊框健民、背景等）：屬性值1 屬性值2 屬性值3... ;
標簽屬性名（例如邊框、背景等）：屬性值1 屬性值2 屬性值3... ;
....
}
形式2：
標簽名稱{
標簽屬性名（例如邊框贫贝、背景等）：屬性值1 屬性值2 屬性值3... ;
標簽屬性名（例如邊框秉犹、背景等）：屬性值1 屬性值2 屬性值3... ;
標簽屬性名（例如邊框蛉谜、背景等）：屬性值1 屬性值2 屬性值3... ;
....
}
還有其他形式
* */
#main{
/*border: 1px solid black;*/
background-image: url(img/main.png);
background-size:cover;
height: 477px;
width:555px;
position: fixed;
top:51px;
left:498px;
}
#txt{
/*border: 2px solid blue;*/
width:360px;
height: 62px;
position: fixed;
left:624px;
top:300px;
}
#im{
/*border: 2px solid red;*/
height: 120px;
width:110px;
position: fixed;
left:750px;
top:370px;
}
#result{
/*border: 2px solid green;*/
height: 193px;
width: 177px;
position: fixed;
left:1095px;
top:214px;
}
input{
width:360px;
height:45px;
text-align: center;
border: none;
outline: none;
font-size: 20px;
}
#button{
height: 120px;
width:110px;
}
#big{
height: 193px;
width: 177px;
}
body{
background-image: url(img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
html{
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div id="main">
<div id="txt">
<input type="text" id="info" v-model="num" />
</div>
<div id="im">
<img id="button" src="img/button.png" v-on:click="com" />
</div>
</div>
<div id="result">
<img id="big" v-bind:src="imgsrc" />
</div>
</div>
<script type="text/javascript">
//當頁面載入就生成一個隨機數
var num = 31 * Math.random();
//對隨機數取整
var num2 = Math.round(num);
let z = new Vue({
el: '#app',
data: {
num: '',
imgsrc: 'img/noPic.png'
},
methods: {
com() {
let iv = this.num;
if (iv.length == 0) {
alert('請輸入數字，文本框里不能為空白');
} else if (isNaN(iv)) {
alert('你的不是數字崇堵，請重新輸入');
} else {
//以用戶輸入數值iv和隨機數num2進行比較
//如果用戶輸入的數值大于隨機數型诚，則顯示圖片big.png
if (iv > num2) {
this.imgsrc = "img/big.png";
//如果用戶輸入的數值小于隨機數，則顯示圖片small.png
} else if (iv < num2) {
this.imgsrc = "img/small.png";
//如果用戶輸入的數值等于隨機數鸳劳，則顯示圖片win.png
} else {
this.imgsrc = "img/win.png";
}
}
}
}
})
</script>
</body>
</html>
10.員工信息案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<th>人物編號</th>
<th>人物姓名</th>
<th>人物年齡</th>
<th>人物職位</th>
</tr>
<tr v-for="i in info">
<td>{{i.no}}</td>
<td>{{i.name}}</td>
<td>{{i.age}}</td>
<td>{{i.job}}</td>
<td><input type="button" name="" id="" value="刪除" v-on:click="del(index)" /></td>
</tr>
</table>
<input type="text" name="" id="" value="" placeholder="名字" v-model="name" /><br>
<input type="text" name="" id="" value="" placeholder="年齡" v-model="age" /><br>
<input type="text" name="" id="" value="" placeholder="職位" v-model="job" /><br>
<input type="button" name="" id="" value="添加員工" v-on:click="add()" />
</div>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
info: [{
no: 1,
name: '曹操',
age: '60',
job: '丞相'
}, {
no: 2,
name: '袁紹',
age: '50',
job: '將軍'
}],
name: '',
age: '',
job: ''
},
methods: {
add() {
let no = 0;
if (this.info.length == 0) {
no = 1;
} else {
no = this.info[this.info.length - 1].no + 1;
}
this.info.push({
no: no,
name: this.name,
age: this.age,
job: this.job
});
},
del(index) {
this.info.splice(index, 1);
}
}
});
</script>
</body>
</html>
