1. 程式人生 > >Vue入門(1)

Vue入門(1)

安裝

$ npm install vue

安裝完目錄檔案介紹

然後新建一個頁面,引入vue.js, 建立vue物件

<div id="app"></div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //掛載點
        //el:document.getElementById('app'),
        //或者可以這麼寫,更為優化,將元素直接找到,避免vue內部做判斷
template:"<h1>{{text}} Vue</h1>", //模版, data:function(){ //動態資料的宣告,data後也可以直接是一個物件 return{ text:"hello" } } })
</script>

插值表示式

{{text}}叫做插值表示式,{{}}裡可以是物件,字串,布林值或者三元表示式。
!注意:{{}}裡的值或者表示式必須在data這個函式返回的物件中宣告

指令

在vue中提供了一些對於頁面+資料的更為方便的輸出,這些操作就叫做指令,以v-xxx表示。
指令中封裝了一些DOM行為,結合屬性作為一個暗號,暗號有對應的值,根據不同的值,框架會進行相關DOM操作的繫結。
1.v-text和v-html
必須用於雙標籤
v-text  相當於innerText
v-html  相當於innerTHTML
<div id="app"> 
    <div v-text="val1">啊哈哈哈哈哈</div>
    <div v-html="val2">啊哈哈哈哈哈</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:
"#app", //發生行為的目的地 data:function(){ return{ val1: '<h1>val2</h1>', val2: '<h1>val2</h1>', } } })
</script>

效果圖:

2.v-if , v-else-if , v-else
v-if通過操作dom渲染,消耗記憶體和效能的  如果為假,直接清除掉dom節點 
以上三個指令的使用必須是相鄰的dom元素
<div id="app"> 
    <h1 v-if="num == 1">顯示v-if</h1>
    <h1 v-else-if="num == 2">顯示v-else-if</h1>       
    <h1 v-else>顯示v-else</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                num:2,
            }
        }
    })
</script>

效果圖:

3.v-show
顯示隱藏,只改變css,不消耗記憶體和效能|
為false時候相當於給元素新增display;none屬性,dom節點還存在
<div id="app"> 
    <h2 v-show="isShow">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                isShow:false,
            }
        }
    })
</script>
4.v-bind
給元素屬性賦值,v-bind:屬性名,可以簡寫為 :屬性名
是從vue到頁面的單向資料流
<div id="app"> 
    <div :class="{ active: isActive}">測試1</div>
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">測試2</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                activeColor: 'red',
                fontSize: 30,
                isActive: false
            }
        }
    })
</script>
5.v-on
給元素繫結事件 v-on:原生事件名字="進行的操作或者函式名",
可以簡寫為 @原生事件名字="進行的操作或者函式名"
<div id="app"> 
    <button @click="add">add</button>
    <button @click="del">del</button>      
    {{counter}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                counter:999,
            }
        },
        methods:{
            add(){
                console.log(this);
                this.counter ++;
                
            },
            del(){
                this.counter --;
            }
        }
    })
</script>

控制檯看下列印的this:

關於this
1. vue已經把以前this是window或者事件物件的問題搞定了
2. methods和data本身是在同一個物件中的,所以在該物件中可以通過this.隨意取
3. this.xxx取data中的值,this.xxxMethod呼叫methods中的函式。
6.v-model
雙向資料繫結
!注意:v-model只能給具有value屬性的元素進行雙向資料繫結
<div id="app"> 
    <input type="text" v-model="counter"/>當輸入100時候下面按鈕顯示出來
    <br/>
    <button v-show=" counter == '100' ">按鈕</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                counter:999
            }
        }
    })
</script>
7.v-for
陣列迴圈 v-for="value,index in arr
物件迴圈 v-for="value,key,index in obj
<div id="app"> 
    <ul>
        <li v-for="value,index in arr">     
            {{value}}--{{index}}
        </li>
    </ul>
    <ol>
	    <li v-for="value,key,index in obj">     
	        {{key}}---{{value}}--{{index}}
	    </li>
    </ol> 
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                arr: [1,2,3,4,5,6],
                    obj:{
                        name:"緣滅",
                        age:18,
                    }
            }
        }
    })
</script>

效果圖: