Vue入门 – 模版语法

1 插值

1.1 文本

  1. 使用双大括号{{ 表达式}}进行插值,表示将数据与DOM节点绑定。数据改变时,节点也相应改变。
  2. 使用v-once执行一次性的插值,数据改变时插值内容不会更新。<span v-once>{{ msg }}</span>

1.2 纯HTML

  1. 双大括号会将数据翻译为纯文本,若想输出HTML,需使用v-html指令。
    • <div v-html="html"></div>
  2. 该指令内部实现是更新元素的 innerHTML,所以宿主元素的原innerHTML内容都会被移除。
  3. 内容按普通 HTML 插入 – 不会作为 Vue 模板进行编译。
  4. 尽量别用,不安全。

2 属性

  1. 属性绑定v-bind:propName="表达式",如v-bind:disable="false"
  2. 属性绑定简写:propName="表达式",如v-bind:disable="isShow"
  3. 事件绑定v-on:click="func"
  4. 事件绑定简写@click="func"

3 指令

  1. 指令是以”v-“为前缀的特殊属性。
  2. 指令属性的值预期是单一 JavaScript 表达式(除了 v-for)。
  3. 指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
  4. 常用内置指令如v-if,v-for,v-bind,v-on等。

3.1 指令参数

  1. 一个指令能接受一个参数。
  2. 参数在指令后以:声明,如v-bind:href="url"v-on:click="showTime"

3.2 指令修饰符

  1. 修饰符在指令(参数)后以.声明,如v-on:click.prevent="show",这里prevent代表原生event的preventDefault。
  2. 一个指令可挂多个修饰符。<a v-on:click.stop.prevent="doThat"></a>

事件修饰符:

修饰符 原生 作用
.stop event.stopPropagation(); 阻止单击事件冒泡
.prevent event.preventDefault() 取消事件的默认动作。
.capture el.addEventListener([event-name],[callback],[use-capture]); 添加事件侦听器时使用事件捕获模式
.self ~ 只当事件在该元素本身(而不是子元素)触发时触发回调

使用示例:

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

4 过滤器(管道)

  1. 过滤器即是angular中的管道,主要用于文本格式化。
  2. 只能在插值和属性绑定中使用过滤器,其他情况使用计算属性。
    • {{ message | capitalize }}
    • <div v-bind:id="rawId | formatId"></div>
  3. 过滤器可以串联:
    • {{ message | filterA | filterB }}
  4. 过滤器是 JavaScript 函数,因此可以接受参数:
    • {{ message | filterA(‘arg1’, arg2) }}
    • 字符串arg1将传给过滤器作为第二个参数,arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

4.1 自定义过滤器

在Vue实例的option中,或Vue组件对象中:

//...
filter:{
    capitalize:function(value,[arg1],[arg2]...){
        //...
        return xxx;
    }
}

欢迎分享本文,转载请保留出处:前端ABC » Vue入门 – 模版语法

赞 (3)
分享到:更多 ()

发表评论 0