小QA学习前端系列之vue模板

发表于

小QA学习前端系列之vue模板

之前我们已经学习vue实例，已经理解如何初始化一个vue实例，以及实例中数据与方法使用，还了解生命周期，那接下来我要学习vue模板

插值

文本

使用“Mustache”语法 (双大括号) 的文本插值

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

原始 HTML

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

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

这个标签可能导致xss攻击

特性

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令
例如 id class 等

1
<div v-bind:id="TEST"></div>

可以 省略前面的v-bind 直接使用:id

使用 JavaScript 表达式

用在v-bind中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
  <span class="box" :style="[isA?styleA:'', styleB]">我是字</span>
</div>
<script>
new Vue({
  el: "#app",
  data:{
    styleA:{
      fontSize: '30px',
      color: 'red'
    },
    styleB:{
      textShadow: '5px 2px 6px #000'
    },
    isA: false
  }
})
</script>

用在Mustache中

1
{{ ok ? 'YES' : 'NO' }}

有个限制就是，每个绑定都只能包含单个表达式

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。
v-text

预期：string

详细：

更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

示例：

1
2
3
4
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-show

预期：any

用法：

根据表达式之真假值，切换元素的 display CSS 属性。

当条件变化时该指令触发过渡效果。

v-if

预期：any

用法：

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

在这里参数是监听的事件名。

修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。
v-bind 缩写

1
2
3
4
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

1
2
3
4
5
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

ok 今天主要介绍基本的模板语法，其实还有一些语法没有解释，根据官方文档咱们一步一步来