模板语法

Posted 小拽A

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模板语法相关的知识,希望对你有一定的参考价值。

1.模板语法

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

1.2.在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

2.插值

2.1.插文本:

  数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:

    <span>Message: {{ msg }}</span>

  通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新

    <span v-once>This will never change: {{ msg }}</span>

2.3.插标签

  双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html 指令:

    <div v-html="rawHtml"></div>

3.属性

3.1.v-bind指令

    <div v-bind:id="dynamicId"></div>

  这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:

    <button v-bind:disabled="someDynamicCondition">Button</button>

3.2.javascript的支持

    {{ number + 1 }}
 
    {{ ok ? ‘YES‘ : ‘NO‘ }}
 
    {{ message.split(‘‘).reverse().join(‘‘) }}
 
    <div v-bind:id="‘list-‘ + id"></div>
  这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。(流程控制语句不会生效)
  <!-- 这是语句,不是表达式 -->
    {{ var a = 1 }}
 
  <!-- 流控制也不会生效,请使用三元表达式 -->
    {{ if (ok) { return message } }}
4.指令:
  指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for,之后再讨论)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
4.1 v-if:
    <p v-if="seen">Now you see me</p>
  这里, v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。
4.2.指令的参数:
  一些指令能接受一个“参数”,在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性
    <a v-bind:href="url"></a>
  在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
    <a v-on:click="doSomething">
  在这里参数是监听的事件名。我们也会更详细地讨论事件处理。
4.3.修饰符:修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
  .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
  <form v-on:submit.prevent="onSubmit"></form>
4.4过滤器
  Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:
  {{ message | capitalize }}
 
  <!-- in v-bind -->
  <div v-bind:id="rawId | formatId"></div>
 过滤器函数总接受表达式的值作为第一个参数。
  new Vue({
    filters: {
    capitalize: function (value) {
      if (!value) return ‘‘
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  })

 过滤器可以串联:

  {{ message | filterA | filterB }}

过滤器是 JavaScript 函数,因此可以接受参数:

  {{ message | filterA(‘arg1‘, arg2) }}

这里,字符串 ‘arg1‘ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

5.缩写

5.1.v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
 
5.2v-on缩写:
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
 
总结:
1.插入值
 插入文本、插入结构
2.属性
 绑定值给模板、对ja表达式的支持,但是不支持流程控制语句
3.指令
 指令参数、指令修饰符、指令修饰符
4语法缩写

以上是关于模板语法的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

矢量类型的模板类专业化 - 不同的有效语法?

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段(vue主模板)

Eclipse 中的通用代码片段或模板