VUE 入门基础(3)

时间:2022-06-28 03:24:32

三,模板语法

  Vue将模板编译成虚拟DOM渲染函数,结合响应系统,在应用状态改变时,vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。

  插值,文本

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

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

    通过使用v-once 指令执行一次性的插入值,当数据改变时,插值处的内容不会更新,会影响到该节点上的所有数据绑定。

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

  HTML

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

    属性

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

        <div v-bind:id=“dynamicId”></div>

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

        <button v-bind:disavled=“someDynamicCondittion”></button>

      使用JavaScript 表达式

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

        {{ number + 1 }}

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

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

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

    指令

    指令是带有v- 前缀的特殊属性,指令属性的值预期是单一JavaScript表达式,指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM 上。

    如  <p v-if=”seen”>Now you see me</p>

    If指令将根据表达式 seen 的值的真假来移除/插入<p> 元素

    参数

    一些指令能接受一个参数,在指令号以冒号指明,v-bind 指令被用来响应的更新html属性。

      <a v-bind:href=“url”></a>

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

    修饰符

      修饰符(Modifiers) 是以半句号. 指明的特殊后缀,用于指出一个指定应该以特殊的方式绑定,如  .prevent 修饰符告诉v-on 指令对于除非的时间调用 event.preventDefault();

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

    过滤器

      Vue 允许自定义过滤器,被用作一些常见的文本格式,过滤器应该被添加在mustache 插值的尾部,由管道符指示。

        {{message | capitalize}}

        {{message | capitalize}}

        <div v-bind:id="rawId | formatId"></div>

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

      New Vue({

          filters: {

            capitalize: function(value) {

              If (!value) return ‘ ’

              Value = value.toString()

              return value.charAt(0).toUp

            }

          }

      })

   过滤器可以串联:

    {{message | filterA | filterB}}

  过滤器是JavaScript 函数,因此可几首参数

    {{message | filterA(‘arg1’,’arg2’)}}

  字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数

  缩写

    v- 前缀在模板中是作为一个表示vue 特殊属性的明显标示,当你使用 Vue.js 为现有的标记添加动态行为时,它会很有用,但对于一些经常使用的指令来说有点繁琐。

  v-bind 缩写

        完整语法

     <a v-bind:href=‘url’></a>

       缩写

    <a :href=“url”></a>

    v-on 缩写

      完整语法

    <a v-on:click=“doSomething”></a>

     缩写

    <a @click=“doSomething”</a>