• vue 模板语法


    1. 要点

    Vue.js 使用了基于 HTML 的模板语法

    也可以不用模板,直接写渲染 (render) 函数,使用可选的 JSX 语法

    2. 细节点

    2.1 插值

    2.1.1 文本     

    “Mustache”语法 (双大括号)           {{ msg }}

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

    2.1.2 html      

    v-html 指令        v-html="rawHtml"                     不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎

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

    扩展:

    v-text 与 v-html 相比,前者输出转义后字符,即未渲染的dom

     2.1.3 特性(属性)

    v-bind 指令    v-bind:id="dynamicId"     

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

    2.1.4 js 表达式

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

    有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

    <!-- 这是语句,不是表达式 -->
    {{ var a = 1 }}
    <!-- 流控制也不会生效,请使用三元表达式 -->
    {{ if (ok) { return message } }}

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

    2.2.1 普通指令   

    显示隐藏

    <p v-if="seen">现在你看到我了</p>

    一次绑定

    <span id="span" v-once >Message: {{ msg+1 }}</span>
    ...

    2.2.2 带参数指令

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

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

    2.2.3 动态参数       使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式                  浏览器会把特性名全部强制转为小写

    <a v-bind:[attributeName]="url"> ... </a>

    <a v-on:[eventName]="doSomething"> ... </a>

    2.2.4 修饰符           以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

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

    2.3 缩写

    2.3.1  v-bind 缩写      

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

    <a :href="url">...</a>

    2.3.2  v-on 缩写

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

    <a @click="doSomething">...</a>

    3. 代码

     View Code

    4. 参考网址

  • 相关阅读:
    Thrift的安装以及问题
    nodejs安装和配置
    angularjs ng-bind-html中的ng-model不生效
    设计模式之美---接口和抽象类的区别
    angular 8 不兼容IE11
    Xamarin 打包生成 Android apk 文件
    微服务的4个设计原则和19个解决方案
    RESTful API设计规范
    windows下 安装 rabbitMQ
    关于C#应用的授权认证
  • 原文地址:https://www.cnblogs.com/justSmile2/p/10882270.html
Copyright © 2020-2023  润新知