美文网首页
VUE3 之 template 语法

VUE3 之 template 语法

作者: 追风人聊Java | 来源:发表于2022-02-14 17:01 被阅读0次

    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 中的标签识别出来

    image

    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 属性绑定

    image

    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 属性

    image

    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干货。

    相关文章

      网友评论

          本文标题:VUE3 之 template 语法

          本文链接:https://www.haomeiwen.com/subject/ctqhlrtx.html