美文网首页
vue 知识点整理——指令

vue 知识点整理——指令

作者: alokka | 来源:发表于2019-02-28 10:23 被阅读0次

vue指令:

  • v-text:

用于操作纯文本。如果要更新部分的文本,需要使用 {{ Mustache }} 插值。

示例:
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
  • v-html:

v-html用于输出html,它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。

示例:
  <div id="app">
    <div v-html='msg'></div>
  </div>

  <script>
    var vm = new Vue({
      data: {
        msg: '<p>今天真高兴啊</p>' 
      }
    })
  </script>
  • v-show:

根据表达式之真假值,切换元素的 display CSS 属性。

  • v-if:

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

示例:
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
  • v-else:

你可以使用 v-else 指令来表示 v-if 的“else 块,v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

示例:
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
  • v-else-if:

顾名思义,充当 v-if 的“else-if 块”,可以连续使用,类似于 v-else,v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
  • v-for:

应用v-for遍历dom的时候,要加:key="item.id",加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果

    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <input type="checkbox" > {{item.name}}
      </li>
    </ul>
  • v-on:

缩写: @

修饰符:

  • stop - 调用 event.stopPropagation()。
  • prevent - 调用 event.preventDefault()。
  • capture - 添加事件侦听器时使用 capture 模式。
  • self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • native - 监听组件根元素的原生事件。
  • once - 只触发一次回调。
  • left - (2.2.0) 只当点击鼠标左键时触发。
  • right - (2.2.0) 只当点击鼠标右键时触发。
  • middle - (2.2.0) 只当点击鼠标中键时触发。
  • passive - (2.3.0) 以 { passive: true } 模式添加侦听器

用在普通元素上时,可以用 v-on 指令监听原生 DOM 事件,并在触发时运行一些 JavaScript 代码。

  <div id="app">
    <p>{{counter}}</p>
    <div class="add" @click='add'></div>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        counter: 0 
      },
      methods: {
          add(){
            this.counter += 1;
          }
      },
    })
  </script>

在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event 属性:v-on:click="handle('ok', $event)"。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}
  • v-bind:

缩写: :

修饰符:

  • .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里?)
  • .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
  • .sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器

动态地绑定一个或多个特性,或一个组件 prop 到表达式。

在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute)

示例:
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
// red这个class存在与否,取决于 isRed 是true 或者 false
<div :class="[classA, classB]"></div>
如果你也想根据条件切换列表中的 class,可以用三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

  • v-model:

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

示例:
 <input v-model="message" placeholder="edit me">
 <p>Message is: {{ message }}</p>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      }
    })
  </script>

vue@2.6.x 开始,Vue 为具名和范围插槽引入了一个全新的语法,即我们今天要讲的主角:v-slot 指令。目的就是想统一 slotscope-slot 语法,使代码更加规范和清晰。既然有新的语法上位,很明显,slotscope-slot 也将会在 vue@3.0.x 中彻底的跟我们说拜拜了。而从 vue@2.6.0 开始,官方推荐我们使用 v-slot 来替代后两者。

  • v-slot:

缩写:

提供具名插槽或需要接收 prop 的插槽

具名插槽:

有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件:

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>
对于这样的情况,<slot> 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:(vue 2.6.0后废弃)
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

然而,如果你希望更明确一些,仍然可以在一个 <template> 中包裹默认插槽的内容:

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
任何一种写法都会渲染出:

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

作用域插槽:

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如,设想一个带有如下模板的 <current-user> 组件:

<span>
  <slot>{{ user.lastName }}</slot>(2.6.0以后弃用)
</span>
我们想让它的后备内容显示用户的名,以取代正常情况下用户的姓,如下:

<current-user>
  {{ user.firstName }}
</current-user>
然而上述代码不会正常工作,因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容可用,我们可以将 user 作为一个 <slot> 元素的特性绑定上去:

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中,我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字:

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
在这个例子中,我们选择将包含所有插槽 prop 的对象命名为 slotProps,但你也可以使用任意你喜欢的名字。
  • v-pre:

跳过这个元素和它的子元素的编译过程,不和data数据冲突。

  • v-block:

就是vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用。

  • v-once:

只显示DOM第一次渲染的值,以后不改了

示例:
      <style>
        [v-cloak] {
          display: none;
        }
      </style>

      <!-- 不和data数据冲突 -->
      <div v-pre>{{message}}</div>
  
    <!-- 就是vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用 -->
      <div v-cloak>{{message}}</div>
  
    <!-- 只显示DOM第一次渲染的值,以后不改了 -->
      <div v-once>第一次绑定的值:{{message}}</div>

      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            message: 'hello'
          }
        })
      </script>

相关文章

网友评论

      本文标题:vue 知识点整理——指令

      本文链接:https://www.haomeiwen.com/subject/xakxuqtx.html