• vue爬坑之路3----模板语法


    插值

      

    •   文本

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

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

            Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。

            通过使用v-once指令,能一次性地插值,当数据改变时,插值处的内容不会更新。但要注意这会影响到该节点上所有的数据绑定:

              <span v-once>This will never change:{{ msg }}</span>

    •   纯html

            双大括号会将数据解释为纯文本,而不是把html里的解释成文本。为了能够输出html的真正文本,需要用到v-html指令。

              <div v-html='rawHtml'></div>

    •   属性

            Mustache不能在HTML属性中使用,应使用v-bind指令:

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

            这对布尔值的属性也有效——如果条件被求值为false的话该属性会被移除:

              <button v-bind:disable='someDynamicCondition'>Button</button>

    •   使用Javascript表达式

            对于所有的数据绑定,Vue.js都提供了完全的Javascript表达式支持。

              {{ number + 1 }}

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

              {{ message.split('').reserver().join('') }}

              <div v-ind:id="'list-'+id"></div>

              这些表达式会在所属Vue实例的数据作用域下作为Javascript被解析。有个限制就是,每个绑定都只能包含单个表达式。下面这些例子都不会生效。

                  <!-- 这是语句,不是表达式 -->

                  {{ var a=1 }}

                  <!--流控制也不会生效,请使用三元表达式-->

                {{ if(ok){return message }}

    指令

            指令(Diretives)是指带有v-前缀的特殊属性。指令属性的预期值是单一Javascript表达式(除了v-for,之后再讨论)。指令的职责就是当期表达式的值改变时相应地将某些行为应用到DOM上。  

            eg:      <p   v-if='seen'>Now you see me</p>

            这里,v-if指令将根据表达式seen的值得真假来移除/插入p元素。

      

    •   参数

            一些指令能接受一个‘参数’,在指令后以冒号指明。例如,v-bind指令被用来响应地更新HTML属性:

              <a v-bind:href='url'></a>

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

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

              <a v-on:click='doSomething'>

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

    •   修饰符

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

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

    过滤器

        Vue.js可以自定义过滤器,用作一些常见的文本格式化。过滤器可以用在两个地方:Mustache插值和 v-bind表达式。过滤器应该被添加在Javascript表达式的尾部,由’管道‘符指示:

       <!-- in Mustaches -->

      {{message | capitalize}}

       <!-- in v-bind -->

      <div v-bind:id='rawId | formId'></div>

      过滤器函数总接受表达式的值作为第一个参数。

        new Vue({

          //...

          filters:{

            capitalize:function (value){

              if(!value) return ''

              value = value.toString()

              return value.charAt(0).toUpperCase()+value.slice(1)

              }

             }

        })

             charAt(参数):返回参数指定位置的字符串。例子中,参数为0,返回第一位字符串。

       toUpperCase():将字符串对象大写。

       splice(参数):返回一个字符串,参数为start位置,若无第二个参数,则最后一个字符串为end位置。

         过滤器可以串联:

            {{message | filterA | filterB }}

          过滤是Javascript函数,因此可以接受参数:

            {{ message | filterA('arg1',arg2)  }}

         这里,支付窗’arg1‘将传给过滤器作为第二个参数,arg2表达式的值将被求值然后传给过滤器作为第三个参数。

    缩写

    •   v-bind缩写

         <a v-bind:href='url'></a>

            缩写:<a :href='url'></a>

    •   v-on缩写

          <button v-on:click='func()'></button>

            缩写:<button @click='func()'></button>

  • 相关阅读:
    android UI 适配小节
    Android中的倒计时实现
    几种适配器&观察者&ListView之间的那点事
    Service stopSelf(int statId)和onStartcommand(Intent intent,int flags,int startId)
    java 虚函数
    java 重载和多态的区别
    小程序体验版路径以及参数携带
    微信小程序--上传图片公用组件
    微信小程序页面返回
    js兼容安卓和IOS的复制文本到剪切板
  • 原文地址:https://www.cnblogs.com/koutuzai/p/6666487.html
Copyright © 2020-2023  润新知