欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Vue中常用的指令总结

程序员文章站 2022-04-11 10:34:08
...
本篇文章分享给大家的内容是关于Vue中常用的指令总结,内容很详细,接下来我们就来看看具体的内容,希望可以帮助到有需要的朋友。

1 常用指令

  • v-if指令

  • v-show指令

  • v-else指令

  • v-for指令

  • v-bind指令

  • v-model

  • v-on指令

  • v-text指令

1.1 v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:

v-if="expression"

expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。例如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

显示结果如下、

Vue中常用的指令总结

注意:v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

1.2 v-for指令

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:

v-for="item in items"

items是一个数组,item是当前被遍历的数组元素。

示例代码:

<body>
    <div id="app">
        <table style="width: 400px; height: 600px;" border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                </tr>

            </thead>
            <tbody>
                <tr v-for="item in items">
                    <td align="center"> {{item.name}}</td>
                    <td> {{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            items:[{name:'well',age:'20'},{name:'good',age:'19'},{name:'nice',age:'18'},{name:'ok',age:'17'},]
        }
    })
</script>

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

v-bind:argument="expression"

1.4 v-model

v-model(表单元素设置了之后会忽略掉value,checked,selected),常用在表单 <input> 及 <textarea>

让表单元素和数据实现双向绑定(映射关系)

示例代码

<p id="app">
    <p v-text="message"> </p>
    <input type="text" v-model="message">
</p>

</body>

<script type="text/javascript">    var app = new Vue({
        el:"#app",
        data:{
            message:"nice to meet you"
        }
    })</script>

1.5 v-on 指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听<a>元素的点击事件:

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

有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句。
Greet按钮将它的单击事件直接绑定到greet()方法,而Hi按钮则是调用say()方法。

在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求。Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop

  • .prevent

  • .capture

  • .self

  • .once

  • .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<p v-on:click.capture="doThis">...</p>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<p v-on:click.self="doThat">...</p>

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

1.6 v-text指令主要是防止页面首次加载时 {{}} 出现在页面上

v-text="expresstion"

相关推荐:

ECMAScript 中typeof的用法实例

vue.js如何实现树形表格的封装?vue.js实现树形表格的方法

以上就是Vue中常用的指令总结的详细内容,更多请关注其它相关文章!

相关标签: Vue中常用的指令