VUE3 之 template 語法

本文轉載自查看原文 2021-12-15 22:23 2972 VUE3/ VUE/ 前端

1. 概述

老話說的好：干一行，愛一行，踏實工作才是真正快樂的源泉。

言歸正傳，今天繼續聊 VUE3 的話題，今天聊聊 template 語法。

閑話不多說，直接上代碼。

2. template 語法

2.1 與數據綁定

    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {               
                message : "hello"
            }
        },
       
        template : "<div>{{message}}</div>"     // 插值表達式
       
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

template 中使用 {{message}} ，則 VUE 會使用 data 中的 message 的值去替換 template 中 {{message}} 的值。

但如果 data 中的 message 含有標簽，則會直接顯示出來，而不是當標簽來用。

2.2 數據中含有標簽

    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {

　　　　　　　　　　message : "<h3>hello</h3>"

            }
        },
       
        template : '<div v-html="message"></div>'       
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

template 中使用 v-html="message" 的寫法，就可以將 data 中 message 中的標簽識別出來

2.3 數據與 title 屬性綁定

    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {
　　　　　　　　　　message : "hello",

　　　　　　　　　　　title : "myTitle"

            }
        },

　　　　　　template : '<div v-bind:title="title">{{message}}</div>'

    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

使用 v-bind:title="title" 將 data 中的 title 變量與 template 中的 title 屬性綁定

2.4 數據控制 input 元素是否禁止編輯

    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {
　　　　　　　　　　myDisabled : true
            }
        },
　　　　　template : '<input v-bind:disabled = "myDisabled">'
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

v-bind:disabled = "myDisabled"，數據綁定 disabled 屬性

2.5 只取第一次的數據

    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {
　　　　　　　　　　message : "hello"
            }
        },
　　　　　template : "<div v-once>{{message}}</div>"
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素
    vm.$data.message = "hello world";

使用 v-once 修飾后，message 只取 data 中 message 的第一次賦值，這里顯示 hello，而不是 hello world

2.6 數據控制元素是否顯示

    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {
　　　　　　　　　　message : "hello",
                 show : true
            }
        },
　　　　　template : '<div v-if="show">{{message}}</div>'
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

使用 v-if="show"，綁定 data 中的 show 變量，true 顯示，false 不顯示。

2.7 為元素添加事件

    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {
　　　　　　　　　　message : "hello"

            }
        },
　　　　　methods: {
            myClick() {
                alert('點擊我了')
            }
            
        },
　　　　　template : '<div v-on:click="myClick">{{message}}</div>'
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

使用 v-on:click="myClick"，將 methods 中的 myClick 方法綁定為點擊事件。

2.8 為元素添加事件簡便寫法

template : '<div @click="myClick">{{message}}</div>'

將 v-on:click 改為 @click

2.9 數據與title屬性綁定簡便寫法

template : '<div :title="title">{{message}}</div>'

將 v-bind:title 改為 :title 即可

2.10 動態屬性

    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {
　　　　　　　　　　message : "hello",
　　　　　　　　　　attribute: "title",
　　　　　　　　　　title : "myTitle"

            }
        },
　　　　　
　　　　　template : '<div :[attribute]="title">{{message}}</div>'
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

:[attribute]="title"，屬性也與數據關聯

2.11 動態事件

    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {
　　　　　　　　　　message : "hello",
                 event: "click"

            }
        },
　　　　　methods: {
            myClick() {
                alert('點擊我了')
            }
        },
　　　　　template : '<div @[event]="myClick">{{message}}</div>'
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

@[event]="myClick"，具體綁定哪個事件，由 data 中的 event 數據決定

2.12 阻止form表單submit

　　<script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {
　　　　　　　　　　

            }
        },
　　　　　methods: {
            submitClick(e) {
                e.preventDefault();
                alert('點擊我了')
            }
        },
　　　　　template : `
                        <form action="https://www.zhuifengren.cn" @click="submitClick">
                            <button type="submit">提交</button>
                        </form>
                    `
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

在方法中使用 e.preventDefault(); 代碼阻止 submit 提交。

2.13 阻止form表單submit 的另一種方式

　　<script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 創建一個vue應用實例
        data() {
            return {

            }
        },
　　　　　methods: {
           myClick() {
                alert('點擊我了')
            }
        },
　　　　　template : `
                        <form action="https://www.zhuifengren.cn" @click.prevent="myClick">
                            <button type="submit">提交</button>
                        </form>
                    `
    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

@click.prevent 也可阻止submit

3. 綜述

今天聊了一下 VUE3 的 template 語法，希望可以對大家的工作有所幫助

歡迎幫忙點贊、評論、轉發、加關注：）

關注追風人聊Java，每天更新Java干貨。

4. 個人公眾號

追風人聊Java，歡迎大家關注

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue3語法糖 vue3 setup 語法糖 Vue3基礎-模板語法 vue3在vscode報vue/no-multiple-template-root Vue3中setup語法糖學習 Vue3 script setup 語法糖詳解 Vue3新的script setup語法糖 Vue3 script setup 語法糖，超爽體驗 vue3新語法糖script setup基本用法 vue3 setup語法糖父子組件的通信