zoukankan      html  css  js  c++  java
  • VUE 学习笔记 三 模板语法

    1.插值

    a.文本

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

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

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

    <span v-once>这个将不会改变: {{ msg }}</span>

    b.原始HTML

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

    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>

    注意: 站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

    c.特性

    Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令:

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

    在布尔特性的情况下,它们的存在即暗示为 true,v-bind 工作起来略有不同,在这个例子中:

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

    如果 isButtonDisabled 的值是 null、undefined 或 false,则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。

    d.使用 JavaScript 表达式

    {{ number + 1 }}
    
    {{ ok ? 'YES' : 'NO' }}
    
    {{ message.split('').reverse().join('') }}
    
    <div v-bind:id="'list-' + id"></div>

    2.指令

    指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

    <p v-if="seen">现在你看到我了</p>
    这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

    a.参数

    一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性

    <a v-bind:href="url">...</a>

    在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

    另一个例子是 v-on 指令,它用于监听 DOM 事件:

    <a v-on:click="doSomething">...</a>

    b.修饰符

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

    <form v-on:submit.prevent="onSubmit">...</form>

    3.缩写

    Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写

    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    <!-- 缩写 -->
    <a :href="url">...</a>
    
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    <!-- 缩写 -->
    <a @click="doSomething">...</a>
  • 相关阅读:
    JDBC 查询的三大参数 setFetchSize prepareStatement(String sql, int resultSetType, int resultSetConcur)
    有空必看
    SpringMVC 利用AbstractRoutingDataSource实现动态数据源切换
    FusionCharts JavaScript API Column 3D Chart
    FusionCharts JavaScript API
    FusionCharts JavaScript API
    Extjs 继承Ext.Component自定义组件
    eclipse 彻底修改复制后的项目名称
    spring 转换器和格式化
    Eclipse快速生成一个JavaBean类的方法
  • 原文地址:https://www.cnblogs.com/jasonlai2016/p/9969410.html
Copyright © 2011-2022 走看看