Vue常见指令

23次阅读

没有评论

共计 2211 个字符，预计需要花费 6 分钟才能阅读完成。

Vue 中的指令按照不同的用途可分为 6 大类：

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常见的内容渲染指令有 3 个：v-text、{{}}、v-html。

会覆盖掉元素里面的内容。

专业名称是插值表达式（Mustache），专门用来解决 v-text 会覆盖默认文本内容的问题。

插值表达式可以使用过滤器：

<div id="app">
  <p>{{message | capitalize}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {message: "i love vue！",},
    filters: {capitalize(str) {return str.charAt(0).toUpperCase() + str.slice(1);
      },
    },
  });
</script>

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能。

用来输出 html 元素内容，会覆盖掉元素里面的内容。

给元素属性动态绑定属性值，可简写为 :。

<img v-bind:src="imageUrl">
<img :src="imageUrl">

v-bind 属于单向绑定，即 JS 修改 ->HTML 修改。

v-bind 动态绑定多个值：

<template>
  <div v-bind="obj"> 测试一下 </div>
</template>

<script>
export default {data() {
    return {
      obj: {
        id: 'id',
        class: 'class',
      },
    }
  },
}
</script>

v-bind 操作 class：

:class=”{类名 1: 布尔值, 类名 2: 布尔值}”
:class=”[类名 1, 类名 2, 类名 3]”

事件相关的指令，如：

v-on:click
v-on:dblclick
v-on:mouseover
v-on::mouseout
v-on:change
v-on:focus
v-on:input
v-on:keyup

v-on: 可简写为 @。Vue 中的 Event 对象，就是原生 JS 的 Event 对象。

可以在表单 input、textarea 以及 select 元素上创建双向数据绑定。

<body>
<div id="app">
    <div>
        用户名：<input type="text" v-model="user">
    </div>
    <div>
        密码：<input type="password" v-model="pwd">
    </div>
    <input type="button" value=" 登录 " v-on:click="clickMe">
    <input type="button" value=" 重置 " v-on:click="resetForm">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            user: "",
            pwd: ""
        },
        methods: {clickMe: function () {console.log(this.user, this.pwd)
            },
            resetForm: function () {
                this.user = '';
                this.pwd = '';
            }
        }
    });
</script>
</body>

为了方便对用户输入的内容进行处理，Vue 为 v-model 指令提供了 3 个修饰符，分别是：

.number，自动将用户的输入值转为数值类型
.trim，自动过滤用户输入的首尾空白字符
.lazy，在“change”时而非“input”时更新

用法如下：

<input type="text" v-model.number="n1" /> +
<input type="text" v-model.number="n2" /> =
<span>{{n1 + n2}}</span>

动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏。

v-if 可以单独使用，或配合 v-else（v-else-if）指令一起使用。

动态为元素添加或移除 style=”display: none;” 样式，从而控制元素的显示与隐藏。

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好

<div id="app">
  <ul>
    <li v-for="(p,index) in persons" :key="p.id">
      {{index}}: {{p.name}} - {{p.age}}
    </li>
  </ul>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      persons: [{ id: "001", name: " 张三 ", age: 18},
        {id: "002", name: " 李四 ", age: 19},
        {id: "003", name: " 王五 ", age: 20},
      ],
    },
  });
</script>

也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：v-for="item of items"。

循环尽量不要和 v -if 同时使用，因为 v -if 的优先级更高。

正文完