VUE3 之 template 语法

技术VUE3 之 template 语法 VUE3 之 template 语法1. 概述
老话说的好:干一行,爱一行,踏实工作才是真正快乐的源泉。言归正传,今天继续聊 VUE3 的话题,今天聊聊temp

VUE3之模板语法

1. 概述

老话说的好:干一行,爱一行,踏实工作才是真正快乐的源泉。

言归正传,今天继续聊VUE3的话题,今天聊聊模板语法。

闲话不多说,直接上代码。

2.template 语法

2.1 与数据绑定

脚本' src='./vue。全球。js /脚本

/head

身体

分区/部门

/body

脚本

const app=Vue.createApp({ //创建一个某视频剪辑软件应用实例

数据(){ 0

返回{

消息:"你好"

}

},

模板: 'div{{message}}/div' //插值表达式

});

//vm就是某视频剪辑软件应用的根组件

const VM=app。挂载(' # MyDiv ');//绑定身份证明(识别)为myDiv的元素

模板中使用{{message}},则VUE会使用数据中的消息的值去替换模板中{ {消息}}的值。

但如果数据中的消息含有标签,则会直接显示出来,而不是当标签来用。

2.2 数据中含有标签

脚本' src='./vue。全球。js /脚本

/head

身体

分区/部门

/body

脚本

const app=Vue.createApp({ //创建一个某视频剪辑软件应用实例

数据(){ 0

返回{

消息:“H3你好/H3”

}

},

模板:“div v-html=”消息/div '

});

//vm就是某视频剪辑软件应用的根组件

const VM=app。挂载(' # MyDiv ');//绑定身份证明(识别)为myDiv的元素

模板中使用' v-html='消息'的写法,就可以将数据中消息中的标签识别出来

2.3 数据与 title 属性绑定

脚本' src='./vue。全球。js /脚本

/head

身体

分区/部门

/body

脚本

const app=Vue.createApp({ //创建一个某视频剪辑软件应用实例

数据(){ 0

返回{

消息: '你好,

标题: '我标题'

}

},

模板: ' div v-bind : title=' title " { message } }/div '

});

//vm就是某视频剪辑软件应用的根组件

const VM=app。挂载(' # MyDiv ');//绑定身份证明(识别)为myDiv的元素

使用v-bind:title='title '将数据中的标题变量与模板中的标题属性绑定

2.4 数据控制 input 元素是否禁止编辑

脚本' src='./vue。全球。js /脚本

/head

身体

分区/部门

/body

脚本

const app=Vue.createApp({ //创建一个某视频剪辑软件应用实例

数据(){ 0

返回{

myDisabled : true

}

},

模板: '输入v-bind :禁用=“我的禁用”

});

//vm就是某视频剪辑软件应用的根组件

const vm

= app.mount('#myDiv'); // 绑定id为 myDiv 的元素

v-bind:disabled = "myDisabled",数据绑定 disabled 属性

2.5 只取第一次的数据

    script src="../vue.global.js"/script
/head
body
    div /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 /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 /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 /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 /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 /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 /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,欢迎大家关注

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/147921.html

(1)

相关推荐

  • RegExp对象的方法有哪些

    技术RegExp对象的方法有哪些这篇文章主要介绍“RegExp对象的方法有哪些”,在日常操作中,相信很多人在RegExp对象的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Reg

    攻略 2021年11月14日
  • 怎么理解JavaScript中的语法和代码结构

    技术怎么理解JavaScript中的语法和代码结构本篇内容主要讲解“怎么理解JavaScript中的语法和代码结构”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么理解Jav

    攻略 2021年11月20日
  • 分析PostgreSQL日志相关的配置参数log_XXX

    技术分析PostgreSQL日志相关的配置参数log_XXX本篇内容主要讲解“分析PostgreSQL日志相关的配置参数log_XXX”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家

    攻略 2021年11月5日
  • 缓存视频怎样转入本地视频,uc下载的视屏怎么转到本地

    技术缓存视频怎样转入本地视频,uc下载的视屏怎么转到本地打开UC浏览器点击下面状态栏中间的菜单按钮,选择【我的视频】;然后点击【已缓存的视频】;长按视频弹出的菜单中就可以看到【打开目录】;再然后长按需要移动的视频,选择【

    生活 2021年10月25日
  • 金牛座和什么星座最配,金牛座和什么星座最配呢

    技术金牛座和什么星座最配,金牛座和什么星座最配呢金牛座与其它星座的互动关系 最欣赏的星座-处女座 最信任的星座-狮子座金牛座和什么星座最配、射手座
    最佳学习对象-天蝎座
    最佳工作搭档-双子座
    最容易被影响星座-水瓶

    生活 2021年10月26日
  • 软件设计-模板方法模式

    技术软件设计-模板方法模式 软件设计-模板方法模式数据库连接对数据库的操作一般包括连接、打开、使用、关闭等步骤,在数据库操作模板类中我们定义了connDB()、openDB()、useDB()、clos

    礼包 2021年12月14日