4.内置指令

作者: NoNothing | 来源:发表于2020-05-23 14:57 被阅读0次

1.Vue.js的指令是带有特殊前缀 v- 的HTML特性，它绑定一个表达式，并将一些特性应用到DOM上。
2.与js的条件语句if、else、else if 类似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，例如：

<div id="app">
    <p v-if="status===1">当status为1时显示该行</p>
    <p v-else-if="status===2">当status为2时显示该行</p>
    <p v-else>是否显示该行</p>
 </div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            status:1
        }
    })
</script>

如果一次判断的是多个元素，可以在Vue.js内置的<template>元素上使用条件指令，最终渲染的结果不会包含该元素，例如：

 <div id="app">
     <template v-if="status===1">
        <p>这是一段文本</p>
        <p>这又是一段文本</p>
        <p>这还是一段文本</p>
     </template>
 </div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            status:1
        }
    })
</script>

Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，比如：

 <div id="app">
     <template v-if="type === 'name'">
        <label>用户名：</label>
        <input placeholder="输入用户名">
     </template>
     <template v-else>
        <label>邮箱：</label>
        <input placeholder="输入邮箱">
     </template>
     <button @click="handleToggleClick">切换输入类型</button>
 </div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            type:'name'
        },
        methods:{
            handleToggleClick:function(){
                this.type = this.type ==='name' ? 'mail' :'name';
            }
        }
    })
</script>

在键入内容后，点击切换按钮，虽然DOM变了，但是之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明<input>元素被复用了。
如果不希望这样做，可以使用Vue.js提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的，例如：

 <div id="app">
     <template v-if="type === 'name'">
        <label>用户名：</label>
        <input placeholder="输入用户名" key="name-input">
     </template>
     <template v-else>
        <label>邮箱：</label>
        <input placeholder="输入邮箱" key="mail-input">
     </template>
     <button @click="handleToggleClick">切换输入类型</button>
 </div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            type:'name'
        },
        methods:{
            handleToggleClick:function(){
                this.type = this.type ==='name' ? 'mail' :'name';
            }
        }
    })
</script>

给两个<input>元素都增加key后，就不会复用了，切换类型时键入的内容也会被删除，不过<label>元素仍然是被复用的，因为没有添加key属性。
3.v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式 displa:none; 例如：

 <div id="app">
    <p v-show="status===1">当status 为1 时显示该行</p>
 </div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            status:2
        }
    })
</script>

渲染后的结果为：

<p style="display:none;">当status为1时显示该行</p>

v-show 不能在<template>上使用。
4.v-show与v-if的异同：
v-if和v-show 具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false，则一开始元素/组件并不会渲染，只有当条件第一次变为真时才开始编译。
而v-show只是简单的CSS属性切换，无论条件真与否，都会被编译。相比之下，v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换条件。
5.列表渲染指令v-for。当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for。它的表达式需结合in来使用，类似item in items的形式，示例：

 <div id="app">
    <ul>
        <li v-for="book in books">{{book.name}}</li>
    </ul>
 </div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            books:[
                {name:'《Vue.js实战》'},
                {name:'《JavaScript语言精粹》'},
                {name:'《JavaScript高级程序设计》'}
            ]
        }
    })
</script>

在表达式中，books是数据，book是当前数组元素的别名，循环出的每个<li>内的元素都可以访问到对应的当前数据book。列表渲染也支持用of来替代in作为分隔符，它更接近JavaScript迭代器的语法：

<li v-for="book of books"> {{ book.name }}</li>

v-for 的表达式支持一个可选参数作为当前项的索引，例如：

 <div id="app">
    <ul>
        <li v-for="(book,index) in books">{{index}} - {{book.name}}</li>
    </ul>
 </div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            books:[
                {name:'《Vue.js实战》'},
                {name:'《JavaScript语言精粹》'},
                {name:'《JavaScript高级程序设计》'}
            ]
        }
    })
</script>

分隔符in前的语句使用括号，第二项就是books当前项的索引。
6.与v-if一样，v-for也可以用作内置标签<template>上，将多个元素进行渲染：

 <div id="app">
    <ul>
        <template v-for="book in books">
            <li>书名：{{ book.name }}</li>
            <li>作者：{{ book.author}}</li>    
        </template>
    </ul>
 </div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            books:[
                {name:'《Vue.js实战》',author:'梁灏'},
                {name:'《JavaScript语言精粹》',author:'Douglas Crockford'},
                {name:'《JavaScript高级程序设计》',author:'Nicholas C.Zakas'}
            ]
        }
    })
</script>

除了数组之外，对象的属性也是可以遍历的，例如：

<div id="app">
  <span v-for="value in user"> {{ value }} </span>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            user:{
                name:'Aresn',
                gender:'男',
                age: 26
            }
        }
    })
</script>

渲染后的结果是：Aresn 男 26
遍历对象属性时，有两个可选参数，分别是键名和索引：

 <div id="app">
    <li v-for="(value,key,index) in user">{{index}} - {{key}} : {{ value }} </li>
 </div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            user:{
                name:'Aresn',
                gender:'男',
                age: 26
            }
        }
    })
</script>

渲染后的效果为：

image.png

v-for 还可以迭代整数：

<div id="app">
    <span v-for="n in 10">{{ n }} </span>
</div>
<script>
    var app = new Vue({
        el:'#app'
    })
</script>

渲染后的结果为：1 2 3 4 5 6 7 8 9 10
7.数组更新。Vue的核心是数据与视图的双向绑定，当我们修改数组时，Vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数据变异的方法，使用它们改变数组也会触发视图更新：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
例如我们将之前一个示例的数据books添加一项：

app.books.push({
  name:'《CSS揭秘》',
  author:'[希] Lea Verou'
});

使用以上方法会改变被这些方法调用的原始数组。
有些方法不会改变原数组，如：

filter()
concat()
slice()
它们返回的是一个新数组，在使用这些非变异方法时，可以用新数组来替换原数组，还是之前展示书目的示例，我们找出含有JavaScript关键词的书目，例如：

<div id="app">
    <ul>
        <template v-for="book in books">
            <li>书名：{{book.name}}</li>
            <li>作者：{{book.author}}</li>
        </template>
    </ul>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            books:[
                {name:'《Vue.js实战》',author:'梁灏'},
                {name:'《JavaScript语言精粹》',author:'Douglas Crockford'},
                {name:'《JavaScript高级程序设计》',author:'Nicholas C.Zakas'}
            ]
        }
    });
    app.books = app.books.filter(function(item){
        return item.name.match(/JavaScript/);
    })
</script>

渲染的结果中，第一项《Vue.js实战》被过滤掉了，只显示了书名中含有JavaScript的选项。
Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化地复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。需要注意的是，以下变动的数组中，Vue是不能检测到的，也不会触发视图更新：

通过索引直接设置项，如 app.books[3] = {...}
修改数组长度，比如 app.books.length = 1

8.当不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组，如：

<div id="app">
    <ul>
        <template v-for="book in filterBooks">
            <li>
                <span>书名：{{book.name}}</span>
                <span>作者：{{book.author}}</span>
            </li>
        </template>
    </ul>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            books:[
                {name:'《Vue.js实战》',author:'梁灏'},
                {name:'《JavaScript语言精粹》',author:'Douglas Crockford'},
                {name:'《JavaScript高级程序设计》',author:'Nicholas C.Zakas'}
            ]
        },
        computed:{
            filterBooks:function(){
                return this.books.filter(function(book){
                    return book.name.match(/JavaScript/);
                });
            }
        }
    });
</script>

上例是把书名中包含JavaScript关键词的数据过滤出来，计算属性filterBooks依赖books，但是不会修改books。显示排序也是类似的，比如在此基础上新加一个计算属性sortedBooks，按照书名的长度由长到短进行排序：

      computed:{
            sortedBooks:function(){
                return this.books.sort(function (a,b){
                    return a.name.length < b.name.length;
                });
            }
        }

(上述代码没效果）
9.Vue事件处理的v-on，在事件绑定上，类似原生JavaScript的onclick等写法，也是在HTML上进行监听的。
例如，我们监听一个按钮的点击时间，设置一个计数器，每次点击都加1：

<div id="app">
    点击次数：{{counter}}
    <button @click="counter++">+1</button>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            counter:0
        }
    })
</script>

@click的表达式可以直接使用JavaScript语句，也可以是一个在Vue实例中methods选型内的函数名，比如对上例进行扩展，再增加一个按钮，点击一次，计数器加10：

<div id="app">
    点击次数：{{counter}}
    <button @click="handleAdd()">+1</button>
    <button @click="handleAdd(10)">+10</button>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            handleAdd:function(count){
                count = count || 1;
                //this 指向当前Vue实例app
                this.counter += count ;
            }
        }
    })
</script>

在method中定义了我们需要的方法供@click调用，需要注意的是，@click调用的方法名后可以不跟括号“（）”。此时，如果该方法有参数，默认会将原生事件对象event传入。
在大部分业务场景中，如果方法不需要传入参数，为了简便可以不写括号。反之如果需要传参数，必须要写括号。
这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则刚好相反。因为通过HTML就可以知道调用的是哪个方法，将逻辑与DOM解耦，便于维护。更重要的是，当ViewModel销毁时，所有的事件处理器都会自动删除，无须自己清理。
10.Vue提供了一个特殊变量$event，用于访问原生DOM事件，例如下面的实例可以组织链接打开：

<div id="app">
    <a href="http://www.apple.com" @click="handleClick('禁止打开',$event)">打开链接</a>
</div>
<script>
    var app = new Vue({
        el:'#app',
        methods:{
            handleClick:function(message,event){
                event.preventDefault();
                window.alert(message);
            }
        }
    })
</script>

11.在上例使用的event.preventDefault()也可以用Vue事件的修饰符来实现，在@绑定的事件后加上小圆点“.”，再跟一个后缀来使用修饰符。Vue支持以下修饰符：

.stop
.prevent
.capture
.self
.once
具体用法如下：

<!--阻止单击事件冒泡-->
<a @click.stop="handle"></a>
<!--提交事件不再重载页面-->
<form @submit.prevent="handle"></form>
<!--修饰符可以串联-->
<a @click.stop.prevent="handle"></a>
<!--只有修饰符-->
<form @submit.prevent></form>
<!--添加事件监听器时使用事件捕获模式-->
<div @click.capture="handle">...</div>
<!--只当事件在该元素本身（而不是子元素）触发时触发回调-->
<div @click.self="handle">...</div>
<!--只触发一次，组件同样适用-->
<div @click.once="handle">...</div>

在表单元素上监听键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：

<!--只有在keyCode是13时调用vm.submit()-->
<input @keyup.13="submit">

也可以自己配置具体按键：

Vue.config.keyCodes.f1 = 112;
//全局定义后，就可以使用 @keyup.f1

除了具体的某个keyCode外，Vue还提供了一些快捷名称，以下是全部的别名：

.enter
.tab
.delete（捕获 “删除” 和 “退格” 键）
.esc
.space
.up
.down
.left
.right
这些按键修饰符也可以组合使用，或和鼠标一起配合使用：
.ctrl
.alt
.shift
.meta（Mac下是Command键，Windows下是窗口键）
例如：

<!--Shift + S -->
<input @keyup.shift.83 = "handleSave">
<!-- Ctrl + Click -->
<div @click.ctrl = "doSomething">Do something</div>

以上就是事件指令v-on的基本内容。

4.内置指令

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读