一个 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>

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

vue3 基础-常用模板语法的更多相关文章

  1. Vue常用模板语法

    常用模板语法   本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只 ...

  2. Vue.js学习笔记（二） - 常用模板语法

    本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次 ...

  3. .net 开源模板引擎jntemplate 教程：基础篇之语法

    一.基本概念 上一篇我们简单的介绍了jntemplate并写了一个hello world(如果没有看过的,点击查看),本文将继续介绍jntemplate的模板语法. 我们在讲解语法前,首先要了解一下标 ...

  4. 12月14日内容总结——模板层之标签、自定义模板语法、母版（模版）的继承与导入、模型层前期准备知识点、ORM常用关键字

    目录 一.模板层之标签 分支结构if for循环 with(定义变量名) 二.自定义过滤器.标签及inclusion_tag(了解) 三.母版(模板)的继承与导入(重要) 四.模型层之前期准备 模型层 ...

  5. 100多个基础常用JS函数和语法集合大全

    网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...

  6. vue基础——模板语法

    模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...

  7. 基础常用JS函数和语法

    100多个基础常用JS函数和语法集合大全  来源:http://www.cnblogs.com/hnyei/p/4605103.html 网站特效离不开脚本,javascript是最常用的脚本语言,我 ...

  8. golang 模板(template)的常用基本语法

    1. 模板 在写动态页面的网站的时候,我们常常将不变的部分提出成为模板,可变部分通过后端程序的渲染来生成动态网页,golang提供了html/template包来支持模板渲染. 这篇文章不讨论gola ...

  9. vue基础---模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  10. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

随机推荐

  1. 无分类无tag

    1 2 3

  2. 发那科机器人R2000iC齿轮箱维修方法步骤归纳

    一.发那科机器人R2000iC齿轮箱常见故障类型及原因 齿轮磨损:长时间的重载工作或润滑不良可能导致齿轮磨损,表现为噪音增大.振动加剧等. 轴承故障:轴承承受了齿轮箱的径向和轴向载荷,其故障可能导致齿 ...

  3. [解决方案]git pull : error: cannot lock ref 'refs/remotes/origin/*' (unable to update local ref)

    错误 git pull 报错不能更新本地分支 错误分析 本地分支跟远程分支不匹配 导致更新失败 解决方案 备份自己修改的代码 .git\refs\remotes (文件路径)对应删除你报错的分支 gi ...

  4. 关于JS中继承

    继承,我理解就是把所有实例可能用到的属性和方法抽出来,单独放在一个"超类"中,一方面避免重复写代码,另一方面也会节省内存.如果单独用原型继承,引用值的处理是个问题 如果单独用cal ...

  5. Selenium 报错 提示“unable to find an ant file to run”

    解决:我采用方法2解决成功 翻译:不能找到执行文件 出现问题原因:这个文件是我从电脑A拷贝到电脑B,缺少相应文件导致

  6. python excel 数据整理：如何删除重复的记录

    data = frame.drop_duplicates(subset='', keep='first', inplace='') drop_duplicates用法:subset='需要去重复的列名 ...

  7. **Selenium IDE、Selenium RC 和 WebDriver 之间有什么区别？**

  8. class com.ttsx.activity.item.dao.entity.RoleMenu ,Not found @TableId annotation, Cannot use Mybatis-Plus 'xxById' Method. 报错解决办法

    启动项目的时候,有几条WARN警告,如图: 引起原因: 是因为数据表实体类 没有di导致的. 例如: 解决办法: 增加实体id字段!或可以忽略!不影响程序!

  9. canvas 获取图片中某个坐标的颜色

    同步发布:https://blog.jijian.link/2020-04-05/canvas-get-color/ 由于功能受限,此处不能放 iframe 嵌入链接,如需看到实时效果,请移步 htt ...

  10. directory 用于数据泵 导入、导出创建的目录。

    1.查询directory目录 select * from dba_directories; 2.创建或者修改 directory目录 create or replace directory 目录名称 ...