提示：今日總結：Vue的五大基本語法

---

基本資料渲染和指令

提示：這裡講的把模型的資料繫結到HTML中
博主提前準備好了vscode程式碼生成器，這裡只展示關鍵程式碼和執行效果

v- bind特性的指令。可以使用插值表示式{{}}進行資料渲染，簡寫的形式可以直接就是冒號：

		<h1 v-bind:title="message">
            {{content}}
        </h1>
        <!-- v-bind 指令的簡寫形式： 冒號（:） -->
        <h1 :title="message">
            {{content}}
        </h1>

第二個h1標籤裡的v-bind是簡寫方案，可以直接用：

<script>
new Vue({
            el: '#app',
            data: {
                content: '我是標題',
                message: '頁面載入於 ' + new Date().toLocaleString()
            }
        })
</script>

執行結果：

單雙向繫結

單雙向的資料繫結，都是通過v-model進行雙向資料繫結

		<!-- v-bind:value只能進行單向的資料渲染 -->
        <input type="text" v-bind:value="searchMap.keyWord">
        <!-- v-model 可以進行雙向的資料繫結  -->
        <input type="text" v-model="searchMap.keyWord">
        <p>您要查詢的是：{{searchMap.keyWord}}</p>

<script>
new Vue({
            el: '#app',
            data: {
                searchMap:{
                        keyWord: '普歌'
                 }
            }
        })
</script>

單向繫結只會影響當前的輸入框；但是雙向繫結的情況下修改輸入框會同步改變作用域內的所有輸入框

---

事件

例子：點選查詢按鈕，可以按照輸入框裡的內容去查詢資訊
在div內寫兩個按鈕，按鈕內通過v-on進行處理滑鼠的點選，這樣可以呼叫事件中的method節點

<script>
new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '普歌  '
                },
                //查詢結果
                result: {}
            },
            methods:{
                searcg(){
                    console.log('peosing')
                }
            }
        })
    </script>

<button @click="searcg">查詢</button>
<button v-on:click="searcg">查詢</button>

可以通過v-on來進行滑鼠的點選（v-on可以用@符號進行替代）進行相應的事件處理

修飾符

他可以阻止事件原本的預設行為，改成你想要他乾的事

<form action="save" v-on:submit.prevent="onSubmit">
    <label for="username">
        <input type="text" id="username" v-model="user.username">
        <button type="submit">儲存</button>
    </label>
</form>

methods: {
    onSubmit() {
        if (this.user.username) {
            console.log('提交表單')
        } else {
            alert('請輸入使用者名稱')
        }
    }
}

修飾符是起到讓哪個指令用特殊的方式去繫結的作用，但是.prevent修飾符告訴v-on指令不要去用原本的預設方式去提交表單。

條件渲染

v-if可以做到真正的條件渲染，但是他是懶惰的，條件為真才會渲染資料；但是v-show不管條件是真是假，都會去渲染元素，去切換CSS。

如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

<input type="checkbox" v-model="ok">同意許可協議
<!-- v:if條件指令：還有v-else、v-else-if 切換開銷大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>

<!-- v:show 條件指令 初始渲染開銷大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>

列表渲染

在列表裡，進行資料的渲染

這裡的in是固定的關鍵字，10次代表迴圈的次數，n表示存放的位置。在使用陣列存放的時候，需要用到索引index，注意，圓括號中的index必須在後面。

		<!-- 1、簡單的列表渲染 -->
        <ul>
            <li v-for="n in 10">{{ n }} </li>
        </ul>
        <ul>
            <!-- 如果想獲取索引，則使用index關鍵字，注意，圓括號中的index必須放在後面 -->
            <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
        </ul>

        <table >
            <!-- <tr v-for="item in userList"></tr> -->
            <tr v-for="(item, index) in userList">
                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.username}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>

    <script>
        new Vue({
            el: '#app',
            data: {
                    userList: [
                        { id: 1, username: 'helen', age: 18 },
                        { id: 2, username: 'peter', age: 28 },
                        { id: 3, username: 'andy', age: 38 }
                    ]
                } 
        })
    </script>

效果如下

今日的學習分享一結束，友情連結https://www.pugtd.cn/