Vuejs——（1）入門（單向綁定、雙向綁定、列表渲染、響應函數）

版權聲明：出處http://blog.csdn.net/qq20004604

 

目錄(?)[+]

 

參照鏈接：

http://cn.vuejs.org/guide/index.html

【起步】部分

 

本文是在其基礎上進行補全和更詳細的探尋

 

嗯，根據朋友的建議，我改投vue陣營了

 

 

（一）單向綁定

<div id="app">
    {{ message }}
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    })
</script>

①el應該表示綁定的意思，綁定id=app這個標簽

也可以改為以下這樣：

<div class="app">
    {{ message }}
</div>

el: '.app',

一樣有效。

 

但如果是多個的話，只對第一個有效：

<div class="app">
    {{ message }}
</div>
<div class="app">
    {{ message }}
</div>

Hello Vue.js!

{{ message }}

 

 

②data里的message變量，表示{{message}的值

 

 

（二）雙向綁定

<div id="app">
    {{ message }}
    <br/>
    <input v-model="message"/>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    })
</script>

效果是：

①input輸入框里有初始值，值是data里的message屬性的值；

 

②修改輸入框的值可以影響外面的值；

 

 

（三）函數返回值

<div id="app">
    {{ message() }}
    <br/>
    <input v-model="message()"/>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: function () {
                return 'Hello Vue.js!';
            }
        }
    })
</script>

效果：

①輸出值也是message的返回值；

②缺點：失去雙向綁定！

 

 

（四）渲染列表

<div id="app">
    <ul>
        <li v-for="list in todos">
            {{list.text}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            todos: [
                {text: "1st"},
                {text: "2nd"},
                {text: "3rd"}
            ]
        }
    })
</script>

 

v-for里的list，類似for in里面的i，

個人認為，

①可以把list in todos，理解為for list in todos

②然后把下一行的list.text理解為 todos[list].text

 

然后這個v-for標簽在哪里，就是以他為單位進行多次復制。

 

 

（五）處理用戶輸入

<div id="app">
    <input v-model="message">
    <input type="button" value="值+1" v-on:click="add"/>
    <input type="button" value="值-1" v-on:click="minus"/>
    <input type="button" value="重置歸零" v-on:click="reset"/>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 1
        },
        methods: {
            add: function () {
                this.message++; //這步要加this才能正確獲取到值
            },
            minus: function () {
                this.message--;
            },
            reset: function () {
                this.message = 0;
            }
        }
    })
</script>

效果：

①對輸入框的值，點擊一次add按鈕，則值+1；

②如果不能加，則像正常表達式加錯了那樣返回結果，例如NaN；

③data里的message的值，是初始值；

④methods里是函數集合，他們之間用逗號分隔；

⑤獲取值的時候，要加上this，例如this.message獲取的是message的值。

 

 

（六）多功能

<div id="app">
    <input v-model="val" v-on:keypress.enter="addToList">
    <ul>
        <li v-for="val in values">
            {{val.val}}
            <input type="button" value="刪除" v-on:click="removeList($index)"/>
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            val: "1",
            values: []
        },
        methods: {
            addToList: function () {
                var val = parseInt(this.val.trim());  //注意，因為當上面的val是字符串類型的時候，才能用trim()，如果是數字類型，則用this.val
                if (val) {
                    this.values.push({val: val});
                }
                this.val = String(val + 1);
            },
            removeList: function (index) {
                this.values.splice(index, 1);
            }
        }
    })
</script>

效果：

①初始輸入框內值為1；

②在輸入框內按回車鍵，則會將輸入框的內容轉為數字，並添加到一個列表里，該列表里轉換后的數字和一個刪除按鈕，並且輸入框內的值，變為轉為數字后的值加一。

如圖：

 

③他的添加，利用的是雙向綁定，將輸入的值push到data里面的values這個數組之種，然后利用渲染列表的效果，輸出多行值。

 

④在button標簽里，函數的參數名給了一個參數，是該行索引，參數名是$index

 

⑤標簽里，觸發的函數的函數名，可以加括號，也可以不加括號，實測似乎是沒有影響的。

 

 

 

（七）標簽和API總結（1）

① {{ 變量名 }}

表示綁定的變量，調用時需要用this.變量名

 

② v-model=”變量”

雙向綁定使用，如果input里不加任何type就是文本，如果加type就是type，例如：

<input v-model="DATE" type="date"/>
<li>{{DATE}}</li>

就會將日期類型的輸入框的值，和li標簽顯示的內容綁定在一起。

 

③ v-on:click=”函數名”

點擊時觸發該函數，可加()也可以不加，

$index作為參數表示索引，索引值從0開始。

 

 

④ v-for

雙向綁定的在數組內容更新后，會實時更新，v-model也是；

類似for in語句，被多次使用的是

 

⑤ v-on:事件

即觸發的事件，有click（點擊），keypress（按鍵按下）

事件后面可以跟更具體的，例如keypress.enter是回車，keypress.space是空格等

更多的需要之查看

 

⑥ new vue

通過new一個vue的實例，然后傳一個對象作為參數給這個實例；

其中：

el 表示綁定的模板（只會匹配到綁定的第一個）

data 表示數據，可以直接被取用，例如用在v-model或者是{{變量名}}中

methods 表示方法

 

⑦ 函數內部調用變量

通過this.變量名，例如：

data: {
    val: "1",
    values: []
},
methods: {
    addToList: function () {
        console.log(this.val);

這里的this.val就是上面的data.val，也是html里的{{val}}，也是v-model=”val”，但不是

<li v-for="val in values">
    {{val.val}}
    <input type="button" value="刪除" v-on:click="removeList($index)"/>
</li>

 

里面的val.val，至於原因，個人認為是這里的val處於v-for的作用域內，因此val in values 里的val其在作用域鏈中的優先級更高