首页 > 其他分享 >vue3 基础-常用模板语法

vue3 基础-常用模板语法

时间:2022-08-26 22:47:12浏览次数:60  
标签:show app 语法 template vue3 message click 模板

一个 vue 的单文件 SAP ( single page web application ) 即在一个 .vue 为后缀的文件中, 会包含3个部分.

  • 模板: html
  • 逻辑: javascript
  • 样式: css

这种同时存在, 然后组成一个小组件的方式其实, 其实非常符合编程思维的. 比原本拆分为 .html, .css, .js 这样的方式好维护很多. 本篇讲关于模板部分的一些 vue 的常用语法.

插值表达式 {{ }}

花括号里是可以放变量和 js 表达式的.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>常用模板语法</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world!'
        }
      },
      template: `<div>{{message.toUpperCase()}}</div>`
    })

    app.mount('#root')
  </script>
</body>
</html>

则页面会显示:

HELLO, WORLD!

v-html

告诉模板将以 html 的方式来展示数据, 举例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>常用模板语法</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world!'
        }
      },
      // v-html: 以 html 的方式来展示数据
      template: `<div v-html="message"></div>`
    })

    app.mount('#root')
  </script>
</body>
</html>

则结果为: hello, world!

v-bind

用来绑定属性, 当然也可以简写为 ":"

<!DOCTYPE html>
<html lang="en">
<head>
  <title>常用模板语法</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          disabled: false
        }
      },
      template: `<input v-bind:disabled="disabled" />`
      // template: `<input :disabled="disabled" />`
    })

    app.mount('#root')
  </script>
</body>
</html>

值得注意的是这里的属性绑定可以简写为:

<input :disabled="disabled" />

另外在补充两个常用但一看就懂的 DOM 元素的 显示 / 隐藏 指令 v-show 和 v-if

  • v-if : 当值为 true 的显示, 否则不显示, 本质是动态在 DOM 树内增删元素
  • v-show: 当值为 true 的显示, 否则不显示, 本质是 display: none
<!DOCTYPE html>
<html lang="en">
<head>
  <title>v-if 和 v-show</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world',
          show: false
        }
      },
      methods: {
        handleClick () {
          this.show = !this.show
        }
      },
      // template: `<div v-if="show">{{message}}</div>`
      template: `
      <div v-show="show" @click=>{{message}}</div>
      <button @click="handleClick">显示/隐藏</button>
      `
    })

    app.mount('#root')
  </script>
</body>
</html>

从真实的使用频率来看, 就那种频繁显示隐藏的建议用 v-show; 使用次数不多的用 v-if 这样可以减少增删 dom 的消耗.

v-on

这里最为常用的就是点击事件 v-on:click = 'xxx'.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>常用模板语法</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world'
        }
      },
      methods: {
        handleClick () {
          alert('click')
        }
      },
      template: `<div v-on:click="handleClick">{{message}}</div>`
      // template: `<div @click="handleClick">{{message}}</div>`
    })

    app.mount('#root')
  </script>
</body>
</html>

值得注意的是这里的 v-on:click 事件绑定可以简写为:

<div @click="handleClick">{{message}}</div>

动态属性和事件绑定 [ ]

即对 dom 元素的属性和事件名, 通过数据的方式进行动态的绑定, 栗子如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>动态属性和事件绑定</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world',
          // event: 'click',
          event: 'mouseenter',
          name: 'title'
        }
      },
      methods: {
        handleClick () {
          alert('click')
        }
      },
      template: `
      <div 
        @[event]="handleClick"
        @[name]="message"
      >
        {{message}}
      </div>
      `
    })

    app.mount('#root')
  </script>
</body>
</html>

阻止默认行为 @click.prevent

通常是用于表单的提交, 我们要设置默认不让其跳转 (要改为手动提交校验这样的逻辑):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>阻止默认行为</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world',
          // event: 'click',
          event: 'mouseenter',
          name: 'title'
        }
      },
      methods: {
        handleClick () {
          alert('click')
        }
      },
      template: `
      <form action="https://www.baidu.com"
        @click.prevent="handleClick"
      >
        <button type="submit">提交</button>
        {{message}}
      </form>
      `
    })

    app.mount('#root')
  </script>
</body>
</html>

简单就到这里了, 这些常用的模板语法其实就那么几个, 用多了就熟悉了.

标签:show,app,语法,template,vue3,message,click,模板
From: https://www.cnblogs.com/chenjieyouge/p/16629463.html

相关文章

  • DESTOON标签(tag)调用手册 模板制作参考手册
    什么是标签调用?标签调用是根据调用条件(condition)从数据表(table)读取调用数量(pagesize)条数据,并按排序方式(order)排序,最终通过标签模板的布局输出数据。可以看出,标签的......
  • Max(马克斯)马克斯6.0最新标签 模板制作参考标签
    Max(马克斯)马克斯6.0最新标签模板制作参考标签 马克斯6.0增加了2个标签:{playpage:videolink} 当前播放视频的数据链接; {playpage:videolinks} 当前电影的所有数据......
  • vue3使用wangeditor富文本编辑器
     npm下载 1npmiwangeditor-S       在要使用的页面导入1importEWangEditorfrom"wangeditor";2import{onMounted,reactive}from"vue";......
  • Shopify Yuva主题模板配置修改
    ShopifyYuva主题为您的在线时尚商店提供了一个现代而优雅的外观和感觉,它具有无限的可能性,以帮助您巧妙地销售。非常适用于健康和美容,珠宝和饰品,玩具和游戏,服装,婴......
  • 教程 - 深度探讨在 Vue3 中引入 CesiumJS 的最佳方式
    目录1.你应该先知道的基础知识1.1.CesiumJS的库构成1.2.选择Vite3和pnpm的理由1.3.使用External模式引入静态库-不打包静态库1.4.切勿什么都import-以及......
  • VSCode添加自定义的Vue3.2标准模板
    创建新的用户片段 点击文件——首选项——用户片段或者用快捷Ctrl+Shift+P唤出控制台然后输入“snippets”并选择接着输入vuevscode自动生成vue.json文件{......
  • 编译原理中的词法和语法分析怎么理解?
    看了一些编译原理的博文,对词法和语法的理解:  词法:是对一堆代码的一种提取,语法:是理解提取后的代码分别代表了什么意思,并赋予对应的意义,从而构建AST抽象语法树。......
  • 全国大学生数学建模竞赛LaTeX模板使用说明|Readme
    基本模板及说明\documentclass[]{cumcmthesis}%指定使用该模板,需将cumcmthesis.cls文件于tex文件置于同一目录下%可选参数,加在[]中%-withoutprefac......
  • 使用vue3对数据进行分页展示
    要获取用户的滚动位置,可以在末尾添加一列空白节点。每当出现空白时意味着滑倒网页最底部,则进行渲染数据。可以使用getBoundingClientRect来判断是否在页面底部。getBoundi......
  • 模板事务的几种写法和总结
    模板事务的好处就不多说了,这里总结几种模板事务的几种写法,直接上代码。transactionTemplate.execute(status->{//2System.out.println("......