Vue入門——常見指令及其詳細代碼示例

Vue常見指令

元素屬性綁定：v-bind
條件判斷：v-if、v-else、v-else-if
循環：v-for
事件監聽：v-on
雙向資料綁定：v-model

1. 什麼是雙向綁定
2. 為什麼要實作資料的雙向綁定
3. 在表單中使用雙向資料綁定
4. 代碼示例

`input`單行文本,單選/複選按鈕
`textarea`多行文本
`select`下拉框
綜合代碼

指令字首帶有 v- ，來表示他們是Vue提供的特性，會在渲染DOM上應用特殊的響應式行為。

元素屬性綁定：v-bind

除了文本插值，我們還可以用 v-bind 來綁定元素屬性

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
</head>
<body>

<!--view視圖層-->
<div id="v-bind">
    <span v-bind:title="message">
        滑鼠懸停幾秒檢視此處動态綁定的值
    </span>
</div>

<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!--建立Vue對象-->
<script>
    var vue = new Vue({
            el: "#v-bind",
            //Model模型層：資料
            data: {
                message: "nice!"
            }
        }
    )
</script>
</body>
</html>

效果示範：

v-bind

稱之為指令。該指令的意思是将這個元素節點的title屬性和Vue示例的message屬性保持一緻

此時如果再次打開浏覽器控制台，改變

message

的值，同樣會看到綁定了title屬性的HTML進行了更新

條件判斷：v-if、v-else、v-else-if

條件判斷使用 v-if 指令

v-else 指令給 v-if 添加一個 “else” 塊

v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊。可以鍊式的多次使用

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>

<div id="v-if">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>none</h1>
</div>

<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!--建立Vue對象-->
<script>
    var vue = new Vue({
            el: "#v-if",
            //Model模型層：資料
            data: {
                type: "A"
            }
        }
    )
</script>
</body>
</html>

效果示範：

剛開始為A

修改type的值為B，視圖立即更新為B

修改type的值為D，視圖立即更新為none

循環：v-for

v-for 指令可以綁定數組的資料來渲染一個項目清單

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>

<!--view視圖層-->
<div id="v-for">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!--建立Vue對象-->
<script>
    var vue = new Vue({
            el: "#v-for",
            //Model模型層：資料
            data: {
                items: [
                    {message: "JAVA"},
                    {message: "Python"},
                    {message: "C++"}
                ]
            }
        }
    )
</script>
</body>
</html>

效果示範：

我們同樣可以在控制台修改數組的值進行實時顯示

添加一個元素：

删除一個元素：

事件監聽：v-on

為了讓使用者和你的應用進行互動，我們可以用 v-on 指令添加一個事件監聽器，通過它調用在 Vue 執行個體中定義的方法

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>

<div id="v-on">
    <button v-on:click="sayHi">Click Here</button>
</div>

<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!--建立Vue對象-->
<script>
    var vue = new Vue({
            el: "#v-on",
            data: {
                message: "hello"
            },
            methods: {  //方法必須定義在Vue的Methods對象裡面
                sayHi: function (event) {
                    alert(this.message);
                }
            }
        }
    )
</script>
</body>
</html>

效果示範：點選按鈕彈出hello

雙向資料綁定：v-model

Vue 還提供了 v-model 指令，它能輕松實作表單輸入和應用狀态之間的雙向綁定

1. 什麼是雙向綁定

Vue.js 是一個

MVVM

架構，即實作了與視圖層的雙向資料綁定

即當資料變化時，視圖發生變化；當視圖發生變化時，資料也同步發生變化。

注意：資料的雙向綁定一定是對于UI控件來說的，非UI控件不會涉及到資料的雙向綁定。單向資料綁定是使用狀态管理工具的前提。如果我們使用

vuex

，那麼資料流也是單向的，這是就會和雙向綁定産生沖突

2. 為什麼要實作資料的雙向綁定

在

Vue.js

中，如果使用

vuex

，實際上資料還是單向的，之是以說資料雙向綁定，這是對于UI控件來說的，對于我們處理表單，Vue.js的雙向資料綁定使用起來十分友善。即兩者并不互相排斥，在全局性資料流使用單向，友善跟蹤；局部性資料流使用雙向，簡單易操作

3. 在表單中使用雙向資料綁定

可以用

v-model

指令在表單

<input>

、

<textarea>

、及

select

元素上建立雙向資料綁定。它會根據控件類型自動選取正确的方法來更新元素。

盡管有些神奇，但

v-model

本質上隻不過是文法糖，它負責監聽使用者的輸入事件以更新資料，并對一些極端場景進行一些特殊處理

注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是将 Vue 執行個體的資料作為資料來源。應該通過 JavaScript 在元件的 data 選項中聲明初始值

4. 代碼示例

`input` 單行文本,單選/複選按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model雙向資料綁定</title>
</head>
<body>
<div id="v-model">
    單行文本：
    <input type="text" v-model="text">
    <br>
    内容為：{{text}}
    <br>------------------------------------------------<br>

    單選按鈕：
    <input type="radio" name="sex" value="男" v-model="radio">男
    <input type="radio" name="sex" value="女" v-model="radio">女
    <br>
    選中了：{{radio}}
    <br>------------------------------------------------<br>

    複選按鈕：
    <input type="checkbox" id="Java" value="Java" v-model="checkbox"/>
    <label for="Java">Java</label>
    <input type="checkbox" id="JavaScript" value="JavaScript" v-model="checkbox"/>
    <label for="JavaScript">JavaScript</label>
    <input type="checkbox" id="C++" value="C++" v-model="checkbox"/>
    <label for="C++">C++</label>
    <br>
    選中的值：{{checkbox}}
    <br>------------------------------------------------<br>

</div>

<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!--建立Vue對象-->
<script>
    var vue = new Vue({
        el: "#v-model",
        data: {
            text: "hello",
            radio: "",
            checkbox: []
        }
    })
</script>
</body>
</html>

效果示範：

我們在輸入框/單選按鈕/複選按鈕輸入/選中什麼時，相應資料顯示會同步更新;

同樣，我們也可以在控制台中修改text/radio/checkbox的值視圖和資料都會同步更新

即實作了資料的雙向綁定

`textarea` 多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model雙向資料綁定</title>
</head>
<body>
<p id="v-model">
    <textarea v-model="message"></textarea>
    {{message}}
</p>

<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!--建立Vue對象-->
<script>
    var vue = new Vue({
        el: "#v-model",
        data: {
            message: "hello"
        }
    })
</script>
</body>
</html>

效果示範：

`select` 下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model雙向資料綁定</title>
</head>
<body>
<p id="v-model">
    下拉框:
    <select v-model="selected">
        <option value="" disabled>--請選擇--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    value:{{selected}}
</p>

<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!--建立Vue對象-->
<script>
    var vue = new Vue({
        el: "#v-model",
        data: {
            selected: ""
        }
    })
</script>
</body>
</html>

效果示範：

選擇後

綜合代碼

綜合了以上所有常用UI控件的雙向綁定代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model雙向資料綁定</title>
</head>
<body>
<div id="v-model">
    單行文本：
    <input type="text" v-model="text">
    <br>
    内容為：{{text}}
    <br>------------------------------------------------<br>

    單選按鈕：
    <input type="radio" name="sex" value="男" v-model="radio">男
    <input type="radio" name="sex" value="女" v-model="radio">女
    <br>
    選中了：{{radio}}
    <br>------------------------------------------------<br>

    複選按鈕：
    <input type="checkbox" id="Java" value="Java" v-model="checkbox"/>
    <label for="Java">Java</label>
    <input type="checkbox" id="JavaScript" value="JavaScript" v-model="checkbox"/>
    <label for="JavaScript">JavaScript</label>
    <input type="checkbox" id="C++" value="C++" v-model="checkbox"/>
    <label for="C++">C++</label>
    <br>
    選中的值：{{checkbox}}
    <br>------------------------------------------------<br>

    多行文本：
    <textarea v-model="message"></textarea>
    <br>
    文本内容：{{message}}
    <br>------------------------------------------------<br>

    下拉框:
    <select v-model="selected">
        <!--提供一個值為空的禁用選項-->
        <option value="" disabled>--請選擇--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    下拉框選中内容:{{selected}}
    <br>------------------------------------------------<br>
</div>

<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!--建立Vue對象-->
<script>
    var vue = new Vue({
        el: "#v-model",
        data: {
            selected: "",
            message: "hello",
            text: "hello",
            radio: "",
            checkbox: []
        }
    })
</script>
</body>
</html>

Vue入門——常見指令及其詳細代碼示例

Vue常見指令

元素屬性綁定：v-bind

條件判斷：v-if、v-else、v-else-if

循環：v-for

事件監聽：v-on

雙向資料綁定：v-model

1. 什麼是雙向綁定

2. 為什麼要實作資料的雙向綁定

3. 在表單中使用雙向資料綁定

4. 代碼示例

`input` 單行文本,單選/複選按鈕

`textarea` 多行文本

`select` 下拉框

綜合代碼

更多内容詳見微信公衆号：Python研究所

繼續閱讀

龍珠訓練營task04

趕工心得（一）

自學Zabbix3.10.2-事件通知Notifications upon events-Actions報警配置點選傳回：自學zabbix集錦

HDU 5678 ztr loves trees

一個小小的移動web版音樂播放器

拓端tecdat|R語言彈性網絡Elastic Net正則化懲罰回歸模型交叉驗證可視化

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

二叉樹及其應用--二叉樹建立

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

詳解STM32單片機的堆棧

Vue入門——常見指令及其詳細代碼示例

Vue常見指令

元素屬性綁定：v-bind

條件判斷：v-if、v-else、v-else-if

循環：v-for

事件監聽：v-on

雙向資料綁定：v-model

1. 什麼是雙向綁定

2. 為什麼要實作資料的雙向綁定

3. 在表單中使用雙向資料綁定

4. 代碼示例

​ ​input​ ​單行文本,單選/複選按鈕

​ ​textarea​ ​多行文本

​ ​select​ ​下拉框

綜合代碼

更多内容詳見微信公衆号：Python研究所

繼續閱讀

`input` 單行文本,單選/複選按鈕

`textarea` 多行文本

`select` 下拉框