Vue學習筆記(四)

1 表單綁定

能夠利用v-model在表單控件元素上建立雙向的數據綁定,v-model會根據控件類型自動選取正確的方法來更新元素。html

2 文本框

文本框的綁定例子以下:數組

<div id="app">
    <p>input</p>
    <input v-model="message">
    <p>{{message}}</p>
    
    <p>textarea</p>
    <textarea v-model="message2"></textarea>
</div>
new Vue({
    el:'#app',
    data:{
        message:'',
        message2:''
    }
})

3 按鈕

3.1 單選

data中的值爲<input>value,如:app

<div id="app">
    <input type="radio" value="Value1" v-model="picked">
    <input type="radio" value="Value2" v-model="picked">
    <span>選中的值爲:{{picked}}</span>
</div>
new Vue({
    el: '#app',
    data: {
        picked:'Value1'
    }
})

3.2 多選

單個多選綁定的數據是一個布爾值,多個多選綁定的是一個數組:函數

<div id="app">
    <input type="checkbox" v-model="checked">
    <span>是否選中:{{checked ? "選中" : "不選中"}}</span>
    <br>
    
    <input type="checkbox" value="Value1" id="box1" v-model="checked2">
    <label for="box1">Value1</label>
    <input type="checkbox" value="Value2" id="box2" v-model="checked2">
    <label for="box2">Value2</label>
    <input type="checkbox" value="Value3" id="box3" v-model="checked2">
    <label for="box3">Value3</label>
    <br>
    <span>選中的值爲:{{checked2}}</span>
</div>
new Vue({
    el: '#app',
    data: {
        checked:'Value1',
        checked2:[]
    }
})

在這裏插入圖片描述

4 列表

<div id="app">
    <select name="fruit" v-model="selected">
        <option value="">請選擇一個</option>
        <option value="蘋果">蘋果</option>
        <option value="香蕉">香蕉</option>
    </select> 

    <div>
        選擇的水果是:{{selected}}
    </div>
</div>
new Vue({
    el: '#app',
    data: {
        selected:''
    }
})

5 修飾符

  • .lazy:默認狀況下,v-model在input事件中同步輸入框的值與數據,但能夠添加一個修飾符.lazy,從而轉變爲在change事件中同步數據,好比<input v-model.lazy="meesage">
  • .number:自動將用戶的輸入值轉化爲Number類型,若是原值的轉換結果是NaN會返回原值,好比<input v-model.number="age" type="number">
  • .trim:自動過濾用戶輸入的首尾空格,好比<input v-model.trim="message">

修飾符能夠混合使用,例子:ui

<div id="app">
    <input type="text" v-model.lazy="test">
    <br>
    <p>{{test}}</p>

    <input type="text" v-model.number.lazy="test2">
    <br>
    <p>{{test2}}</p>

    <input type="text" v-model.trim="test3">
    <br>
    <p>{{test3}}</p>
</div>

6 組件

組件能夠擴展HTML元素,封裝可重用的代碼,組件系統能夠用獨立可複用的小組件來構建大型應用,幾乎任意類型的應用界面均可以抽象爲一個組件樹。
註冊一個全局組件語法以下:this

Vue.component(tagName,options)

其中tagName爲組件名,options爲配置選項。註冊後,按以下方式調用組件:spa

<tagName></tagName>

7 全局組件

全局組件就是全部實例都能使用的組件,例如:3d

<div id="app">
    <test-title></test-title>
</div>
Vue.component('test-title',{
    template:'<h1>Test Title</h1>'
})
new Vue({el:'#app'})

注意標籤名不能大寫,好比寫成:code

<div id="app">
    <testTitle></testTitle>
</div>
Vue.component('testTitle',{
    template:'<h1>Test Title</h1>'
})

頁面不會顯示標題。component

8 局部組件

局部組件就是在本實例內使用的組件,好比:

<div id="app">
    <test-title></test-title>
</div>
new Vue({
    el: '#app',
    components: {
        'test-title': {
            template:'<h1>Test Title</h1>'
        }
    }
})

也能夠把模板的內容分離出來成爲一個變量:

var myTemplate = {
    template:'<h1>Test Title</h1>'
}
new Vue({
    el: '#app',
    components: {
        'test-title': myTemplate
    }
})

9 prop

prop是子組件來接受父組件傳遞過來的數據的一個自定義屬性,父組件的數據須要經過props把數據傳遞給子組件,子組件須要顯示地使用props選項聲明prop

<div id="app">
    <test-title title="Test Title"></test-title>
</div>
Vue.component('test-title',{
    props:['title'],
    template:'<h1>{{title}}</h1>'
    //template:'<h1>{{this.title}}</h1>'
})
new Vue({el: '#app'})

9.1 動態prop

相似於v-bind綁定HTML特性到一個表達式,也能夠利用v-bind動態綁定props值到父組件的數據中,每當父組件的數據變化時,該變化會傳遞給子組件:

<div id="app">
    <input v-model="message">
    <br>
    <test-title v-bind:title="message"></test-title>
</div>
Vue.component('test-title',{
    props:['title'],
    template:'<h1>{{title}}</h1>'
})
new Vue({
    el: '#app',
    data: {
        message:''
    }
})

首先當輸入框內容發生變化時,更新父組件的message,再傳遞給子組件的title,最後更新<test-title>的內容。
下面是一個綁定無序列表的例子:

<div id="app">
    <ol>
        <test-item v-for="i in items" v-bind:val="i"></test-item>
    </ol>
</div>
Vue.component('test-item',{
    props:['val'],
    template:'<h1>{{val.text}}</h1>'
})
var vm = new Vue({
    el: '#app',
    data: {
        items:[
            {text:'111'},
            {text:'222'}
        ]
    }
})

注意prop是單向綁定的,當父組件屬性變化時傳導到子組件,可是不會反過來。

9.2 子組件回傳

父組件使用props傳遞數據給子組件,若是子組件把數據傳遞回去須要使用自定義事件,能夠在v-on綁定自定義事件,每一個Vue實例都實現了事件接口,也就是:

  • 使用$on(eventName)監聽事件
  • 使用$emit(eventName)觸發事件

另外父組件能夠在使用子組件的地方直接用v-on來監聽子組件觸發的事件,例子:

<div id="app">
    <p>總計:{{total}}</p>
    <test v-on:increment="incrementTotal"></test>
    <br><br>
    <test v-on:increment="incrementTotal"></test>
</div>
Vue.component('test',{
    template:'<button v-on:click="incrementHandler">點擊增長,目前爲{{counter}}</p>',
    data:function(){
        return {
            counter:0
        }
    },
    methods:{
        incrementHandler:function(){
            this.counter += 1
            this.$emit('increment')
        }
    }
})
new Vue({
    el: '#app',
    data: {
        total:0
    },
    methods:{
        incrementTotal:function(){
            this.total += 1
        }
    }
})

效果:
在這裏插入圖片描述
當點擊任意一個按鈕增長時,更新子組件內的counter,同時使用this.$emit向父組件傳值,這裏沒有參數,若是有參數的話在後面加上便可:this.$emit("func",parm)

父組件中引用子組件的地方須要添加v-on:func,其中v-on:func中的func須要與this.$emit("func")中的func同名,接着在v-on:func="func2"中修改func2爲父組件的函數便可。簡寫方式爲:

@func="func2"

在某個組件的根元素上監聽一個原生事件可使用.native修飾v-on,好比:

<test-title v-on:click.native="func"></test-title>

9.3 關於子組件的data

上面的例子中data不是一個對象而是一個函數,若是data直接返回一個已有對象會影響其餘實例,好比修改上面的data爲:

var counter = {
    counter:0
}
//...
data:function(){
    return counter
}

效果以下:
在這裏插入圖片描述
也就是子組件共享了數據,而修改成:

data:function(){
    return {
        counter:0
    }
}

效果以下:
在這裏插入圖片描述這是由於返回給每一個實例一份獨立的拷貝。

相關文章
相關標籤/搜索