zoukankan      html  css  js  c++  java
  • Vue模板语法

    模板语法

    Vue使用基于HTML的模板语法,允许开发者声明式的将DOM绑定至底层Vue实例的数据。

    在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,Vue能够智能的计算出最少需要重新渲染多少组件,并把DOM操作次数减少到最少。

    插值

    (1)文本插值:

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

    使用v-once指令,可以执行一次性插值。当数据改变时,插值处的内容不会更新。

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

    (2)原始HTML
    双大括号会将数据解释为普通文本,而非HTML代码,为输出正确的HTML,需要使用v-html指令:

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

    这个p元素的内容会被替换成rawHtml属性值。直接作为HTML会忽略解析属性中的数据绑定。

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

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

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

    
    <button v-bind:disabled="isBtn"></button>
    

    如果isBtn的值为null,undefined或者false,则disabled属性甚至不会包含在渲染出来的<button>元素。

    (4)使用JavaScript表达式
    实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

    
    {{ number + 1 }}
    {{ ok ? 'yes' : 'no' }}
    {{ message.splite('').reverse().join('') }}
    &lt;div v-bind:id="'list-' + id"&gt;&lt;/div&gt;
    

    指令

    指令特性的值预期是单个 JavaScript 表达式。指令的职责是当表达式的值发生改变时,将其产生的连带影响,响应式的作用于DOM.
    (1)参数
    一些指令能够接受一个"参数",在指令名称之后以冒号表示。

    
    &lt;a v-bind:href="url"&gt;...&lt;/url&gt;
    

    修饰符

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

    
    &lt;form v-on:submit.prevent="onSubmit"&gt;&lt;/form&gt;
    

    上述修饰符告诉v-on指令对于触发事件调用event.preventDefault()

    缩写

    v-bind ---> :
    v-on ---> @

    来源:https://segmentfault.com/a/1190000016839229

  • 相关阅读:
    在c#中使用全局快捷键
    把其他C/C++编译器集成到VC2005中
    零基础学习Oracle 10G视频教程
    异常处理 Exception
    序列化与反序列化 BinaryFormatter二进制(.dat)、SoapFormatter(.soap)、XmlSerializer(.xml)
    MVC 数据验证
    MVC 路由规则
    分部类,分部方法 修饰符partial
    HttpRuntime类
    MVC 模型绑定
  • 原文地址:https://www.cnblogs.com/qixidi/p/10126284.html
Copyright © 2011-2022 走看看