Vue快速入門-有解無憂

一、Vue的介紹

Vue是一個漸進式的js框架，只注重視圖層，結合了HTML+CSS+JS，非常的易用，并且有很好的生態系統，而且vue體積很小，速度很快，優化很到位，

二、MVVM 模式的實作者——雙向資料系結模式

Model:模型層，在這里表示 JavaScript 物件
View:視圖層，在這里表示 DOM(HTML 操作的元素)
ViewModel:連接視圖和資料的中間件，Vue.js 就是 MVVM 中的 ViewModel 層的實作者

在這里插入圖片描述
在 MVVM 架構中，是不允許資料和 視圖 直接通信的，只能通過 ViewModel 來通信，而 ViewModel 就是定義了一個 Observer 觀察者

ViewModel 能夠觀察到資料的變化，并對視圖對應的內容進行更新
ViewModel 能夠監聽到視圖的變化，并能夠通知資料發生改變

至此，我們就明白了，Vue.js就是一個MVVM的實作者，他的核心就是實作了DOM 監聽 與資料系結

注

MVC
M model V view C controller
MVVM
M model V view VM viewmodel: 連接視圖和資料的中間件

三、Vue 的快速開始

1. 如何獲得vue的cdn檔案

https://www.bootcdn.cn/vue/

ps: cdn 內容分發網路
這是一種加速策略，能夠從離自己最近的服務器上快速的獲得外部的資源，

2. 如何在頁面中使用vue

	兩個部分:
		1) html：  <div id="app"></div>
		2)需要有一個Vue物件（實體）

3. vue物件里有哪些東西，分別是什么用？

	new Vue({
		el:'' //該vue物件系結在哪個div上
		data:{
}    //提供資料的，里面存放鍵值對
})

4. 在html的被vue系結的元素中，通過插值運算式來獲取vue物件中的資料，

<body>
    <div id="app">
        歡迎你！年齡是{{age}}的{{name}}
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({

        el:'#app',//element
        //資料哪里來？
        data:{
            name:'小明',//以后，資料就是通過發送ajax請求，來獲得的，
            age:18
        }
    });//json格式的物件  使用大括號包裹，里面放了鍵值對，在js中鍵可以沒有引號,多個鍵值對之間使用‘,’分隔，
</script>

四、差（插）值運算式

差值運算式是用在html中被系結的元素中的，目的是通過差值運算式來獲取vue物件中的屬性和方法，

語法格式：{{vue的內容}},注意差值運算式不能寫在html的標簽中，不能作為屬性的值的部分.
vue物件中的屬性是哪里提供？

new  Vue({
			data:{}   <== 這個data就提供了屬性
})

vue物件中的方法是哪里提供？

new  Vue({
			methods:{     <== 這各methods就是提供方法的
			sayHi:function(){
			alert("hello  vue")
		}
	}
});

除此之外，差值運算式也能夠這么使用：

<div id="app">
    {{[0,1,2,3,4][1]}}<br/>
    {{ {name:'xiaoming',age:20}.name }}  
</div>

五、Vue中的關鍵字

這些關鍵字都是作為html頁面的標簽中的屬性

1. v-model

	是將標簽的value值與vue實體中的data屬性值進行系結，
	如在input輸入框中輸入值，對應的major也會隨之改變

請輸入您的專業：<input type="text" v-model="major"  />
new Vue({
    el:'#app',
    data:{
        major:'java'
    }
});

2. v-on

通過配合具體的事件名，來系結vue中定義的函式,常伴隨事件一起使用

<input type="text" v-on:click="changeMajor"  />

new Vue({
    el:'#app',
    data:{
        major:'java'
    },
    methods:{
        sayHi:function(){
            alert("HELLO VUE!");
        },
        changeMajor:function(){
            console.log("change Title")
        }
    }
});

??注：當在差值運算式中使用方法時，應在方法名后加括號

補充知識：

（1）event.target.value:
比如在回應函式里，可以指明使用event內置的引數物件，該物件表示當前事件，可以通過event.target.value來獲得當前事件物件的value的值，

<div id="app">
<div>{{title}}</div>
<input type="text" v-on:input="changeTitle" />
</div>

new Vue({
   el:"#app",
   data:{
   title:"hello world!"
},
    methods:{
changeTitle:function(event)
{ 
   this.title = event.target.value;
}
});

（2）this的用法
this表示當前vue物件 “new Vue()”,可以通過“this.”來呼叫當前vue物件的屬性和方法，
（3）v-on還可以簡寫
v-on:input="" ==> @input=""

3. v-bind

我們知道差值運算式是不能寫在html的標簽的屬性內的，那如果一定要用vue中的屬性作為html標簽的屬性的內容，就可以通過v-bind進行屬性系結，

new Vue
({
		data:
		{
			link:'http://www.baidu.com'
		}
});

<a v-bind:href="link"></a>

注意： v-bind也可以簡寫：

<a v-bind:href='link'></a> ==> <a :href='link'>

v-bind指令用于設定HTML屬性

4.v-once

此時該標簽中的差值運算式，只獲取一次資料，之后資料的變化不影響此差值運算式的值，

5. v-html和v-text

v-html會將vue中的屬性的值作為html的元素來使用
v-text會將vue中的屬性的值只作為純文本來使用，

new Vue({
    el:'#app',
    data:{
        link:'http://www.baidu.com',
        mylink:'<a href="http://www.baidu.com">百度</a>',
    }

});
<span v-html="mylink"></span>
<span v-text="mylink"></span>

效果：
在這里插入圖片描述

六、Vue中的事件

1.vue中如何使用事件

2.事件的引數傳遞

分成三個部分：
設參：  
<button type="button" @click="addbtnfn(2)" >增加</button>
傳參:
addbtnfn:function(step){
接參:
this.count+=step;
}

3.vue中的事件修飾符

	@click.stop  阻止點擊事件的傳播
	@mousemove.stop 阻止滑鼠移動事件
	@keyup.space 空格鍵彈起時
	...

七、computed 計算屬性

一些常用的函式，可以快取起來，在呼叫時直接使用快取中的程序（結果），以此來提高效率，
注意： computed里雖然存放的是函式，但在呼叫時，computed里的東西是一個屬性，所以我們在呼叫時不能使用’()’ 因為()是在呼叫函式，而不是在呼叫屬性，

八、watch 監控屬性

通過watch里給屬性系結函式，當屬性的值發生變化時，該函式就會自動被呼叫，呼叫時可以接收兩個引數，第一個引數時屬性改變后的值，第二個引數是屬性改變前的值，

<div id="app">
    {{title}}
    <input type="text" v-model="title">
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    var v1 = new Vue({
        el:'#app',
        data:{
            title:"hello vue"
        },
        watch:{
            title:function(newValue,oldValue){
                console.log(newValue+":"+oldValue);
            }
        }

    });
</script>

watch中函式帶有的newValue和oldValue可以傳遞函式的新值和原值

九、 Vue改變樣式

1.通過給html元素的class屬性系結vue中的屬性值，得到樣式的動態系結

	new Vue({
		data:{
			temp: true
}
})
	<div :class="{red:temp}"/> 
	
	如果temp是true ==>>  <div class="red"/>
	如果temp 是false==>>  <div/>

2.通過computed回傳一個物件，物件里放著多個鍵值對

<body>
    <div id="app">
        <div v-bind:class="{red:temp}" class="mydiv"></div>
        <hr/>
        <div :class="myClassStyle" class="mydiv"></div>
        <hr/>
        <div class="mydiv"></div>
        <button type="button" @click="temp=!temp">點我</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    //v-bind:class="{red:true}==> class="red"
    new Vue({
        el:'#app',
        data:{
            temp:false
        },
        computed:{
            myClassStyle:function(){
                return {
                    red:this.temp,
                    mywidth:this.temp
                }
            }
        }
    })
</script>

3.通過直接雙向系結vue中的屬性來改變樣式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .mydiv{
            width: 400px;
            height: 220px;
            background-color: gray;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .mywidth{
            width:450px;
        }
        .green{
            background-color: green;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">     
        <div :class="mycolor" class="mydiv"></div> ==》  <div class='green'/>
        <input type="text" v-model="mycolor">
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    //v-bind:class="{red:true}==> class="red"
    //div class="green"
    new Vue({
        el:'#app',
        data:{
            temp:false,
            mycolor:'green'
        }
    })
</script>

4.在html標簽中使用多個樣式的組合

.red{
    background-color: red;
}
.mywidth{
    width:450px;
}
<div :class="[mycolor,mw]"  class="mydiv"></div>

//注意：不能這么寫：div :class="mycolor"  :class="mw" class="mydiv"></div>

new Vue({
    el:'#app',
    data:{
        temp:false,
        mw:'mywidth',
        mycolor:'green'
    }

5.在內嵌的css樣式里指明style屬性的值

<body>

    <div id="app">
        <div v-bind:class="{red:temp}" class="mydiv"></div>
        <hr/>
        <div :class="myClassStyle" class="mydiv"></div>
        <hr/>
        <div :class="mycolor" class="mydiv"></div>
        <hr/>
        <div :class="[mycolor,mw]"  class="mydiv"></div>
        <hr/>
        <div :style="{backgroundColor:bc}" class="mydiv"></div>

/*注意：style參考了vue中的內容，因此是一個鍵值對，所以需要大括號，物件的鍵是不能出現“background-color”，應該改成
backgroundColor.*/
    	<button type="button" @click="temp=!temp">點我</button>
        <input type="text" v-model="mycolor">
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    // document.getElementById("#sp").style.backgroundColor
    //v-bind:class="{red:true}==> class="red"
    //div class="green"
    new Vue({
        el:'#app',
        data:{
            temp:false,
            mw:'mywidth',
            mycolor:'green',
            bc:'blue'
        },
        computed:{
            myClassStyle:function(){
                return {
                    red:this.temp,
                    mywidth:this.temp
                }
            }
        }
    })
</script>

6.在style里使用多個樣式的組合（陣列）

<body>

    <div id="app">
        <div :style="[myStyle,{height:myHeight+'px'}]" class="mydiv"></div>
        <button type="button" @click="temp=!temp">點我</button>
        顏色：<input type="text" v-model="bc"><br/>
        高度:<input type="text" v-model="myHeight">
    </div>


</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            temp:false,
            mw:'mywidth',
            mycolor:'green',
            bc:'blue',
            myHeight:300
        },
        computed:{
            myClassStyle:function(){
                return {
                    red:this.temp,
                    mywidth:this.temp
                }
            },
            myStyle:function(){
                return {
                    backgroundColor:this.bc,
                }
            }
        }
    })

</script>

十、Vue的核心：虛擬DOM和diff演算法

vue的高效的核心，就是虛擬的dom和diff演算法，vue不通過修改dom樹來達到修改的效果，而是直接在頁面上該那個元素，此時這個元素就是一個虛擬的dom，那么vue怎么去改呢？通過diff演算法，計算出虛擬的dom修改后和修改前的區別，然后在虛擬dom的原基礎上進行修改，這樣的效率就大大提升了，

十一、Vue中的分支陳述句

1.v-if

<div v-if="temp">!!!</div>	
當temp的值是true時，div中的內容才會顯示

2.v-else

就是v-if的對立面

3.v-else-if

就是在else里再嵌套一個if

<div id="app">
    <div v-if="temp">看到我了！</div>       
    當temp是true時能顯示
        
    <div v-else-if="temp1">!!!!前方高能!!!!</div>  
    當temp是false時，且temp1是true時能顯示

    <div v-else="temp">看到他了！</div>  
    當temp是false時，且temp1是false時能顯示

    <button type="button" @click="temp=!temp">點我</button>

</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data:{
            temp:false,
            temp1:false
        }
    });
</script>
</html>

4. v-show

用法上和v-if是相同的，也就是說 v-show=“布林值變數” 是true的時候，就會顯示內容，是false的時候就不會顯示內容，但是v-show改變的是元素的樣式，不顯示內容時樣式是： display是none，而v-if是直接讓元素消失和直接添加元素，效率上，v-show更高，

5.template模板標簽的使用

在vue中經常會碰到這個標簽，目前可以使用該標簽配合v-if實作多個元素一起出現，或一起消失，注意，template不能和v-show一起用，

<template v-if="temp">
    <div>
        <div>hello vue1</div>
        <p>hello vue2</p>
    </div>
</template>

十二、Vue中的回圈陳述句

v-for 是vue中回圈的關鍵字

1.普通的for

我們需要定義資料源，然后通過v-for來遍歷資料源，再使用差值運算式輸出資料

<body>
<div id="app">

    <ul>
        <li v-for="a in args">{{a}}</li>
    </ul>

</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });

</script>

2.帶著索引的for

<li v-for=" (a,i)  in  args" :key='i'>{{i}}{{a}}</li>

此時的i就是每次回圈的回圈變數，從0開始一直到元素個數-1

3.遍歷一個物件

<ul>
    <li v-for="(v,k,i) in students">{{i}}--{{k}}--{{v}}</li>
</ul>
new Vue({
    el:'#app',
    data:{
        args:[1,2,3,4,5,6],
        students:{
            name:'xiaoming',
            age:20
        }
    }
});

4.遍歷一個物件陣列：嵌套的for回圈

<ul>
    <li v-for=" student in students">
        <span v-for="(v,k,i) in student">{{i}}--{{k}}--{{v}}--------------------</span>
    </li>
    
</ul>
new Vue({
    el:'#app',
    data:{
        args:[1,2,3,4,5,6],
        students:[
            {
                name:'xiaoming',
                age:20
            },
            {
                name:'xiaowang',
                age:21
            }
        ]
    }
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/287623.html

標籤：其他

上一篇：前端工程師直線學習路徑

下一篇：springboot電信客戶忠誠度（原始碼下載）