Vue.js实战之系统学习第五节

最新推荐文章于 2024-07-23 11:18:48 发布

夏初末未始

最新推荐文章于 2024-07-23 11:18:48 发布

阅读量308

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41530824/article/details/88548267

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue.js实战之系统学习第四节

想看上一节请点击上面的链接。

是不是感觉自己会的并不多，可是用起来却很舒服啊，对，这就是Vue.js的魅力，但是我们要沉住气啊，还有很多需要学的啊。

接下来我们继续Vue.js的基本指令吧。

v-cloak

v-vloak不需要表达式，它会在Vue示例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none；配合使用：

<div id = "app" v-cloak>
    {{ messsage }}
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'这是一段文本'
        }
    })
</script>

这时虽然已经加了指令c-cloak，但其实并没有起到任何作用，当网速较慢，Vue.js文件华美加载完成时，在页面会显示{{message}}的字样，直到Vue创建实例、编译模板时，DOM才会被替换，所以这个过程屏幕时有闪烁的。只要有一句话就可以解决这个问题了：

[v-cloak]{
    display:none;
}

在一般情况下，v-cloak时一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，比如后面进阶篇将介绍webpack和vue-router时，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。

v-once

v-once是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容,例如：

<div id = "app" v-cloak>
    <span v-once>{{ message }}</span>
    <div v-once>
        <span>{{ message }}</span>
    </div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'这是一段文本'
        }
    })
</script>

但是，v-once在业务中很少使用，当你选哟进一步优化性能时，可能会用到。

接下来我们介绍一下条件渲染指令，

v-if、v-else-if、v-else

其实我们在前面介绍了一些了，这些与JavaScript的条件语句if、else、else if类似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，例如：

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

这里需要注意一个用法，v-else-if要紧跟v-if，v-else要紧跟v-else-if或者v-if，表达式的值为真时，当前元素/组件及所有子节点将被渲染，为假时被移除。如果一次判断的是多个元素，可以在Vue.js内置的<template>元素上使用条件指令，最终渲染的结果不会包含该元素，例如：

Vue在渲染元素时，由于效率的考虑，会尽可能的复用已有的元素而非重新渲染，比如接下来的示例（这里展示全部代码，方方便测试）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 示例</title>
    </head>
    <body>
        <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 src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                  type:'name'
                },
				methods:{
					handleToggleClick:function(){
						this.type = this.type === 'name'?'mail':'name';
					}
				}
				
            })
        </script>
    </body>
</html>

接下来展示效果

不难看出，在键入内容后，点击切换按钮，虽然DOM变了，但之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明<input>元素被复用了。

如果你不喜欢这样，可以使用Vue.js提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的：

            <template v-if="type === 'name'">
				<label>用户名：</label>
				<input placeholder = "请输入用户名" key="name-input">
			</template>
			<template v-else>
				<label>邮箱：</label>
				<input placeholder = "请输入邮箱" key="mail-input">
			</template>

给连个元素都增加key后，就不会被复用了，切换类型时，切换类是时键入的内容也会被删除。

v-show

v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会被隐藏，查看DOM结构会看到元素上加载了内联样式display：none；，

<p v-show="status === 1">当 status 为 1 时显示该行</p>
// 渲染的结果为

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

这里要注意：v-show不能在<template>上使用。

这里介绍了v-if和v-show，而且他们具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当的销毁或重建元素及绑定的时间或子组件。若表达式初始值为false，则一开始元素/组件并不会渲染，只有当条件第一次变为真时才开始编译。

而v-show只是简单的CSS属性切换，无论条件真与否，都会被编译。相比之下，v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换条件。

列表渲染指令v-for

当需要将一个数组遍历或者枚举一个对象循环显示时，就会用到列表渲染指令v-if。它的表达式需要结合in来使用，类似item in items的形式。那咱们看个例子：

显示效果

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

与v-if一样，v-for也可以内置标签<template>上，将多个元素进行渲染：

<template v-for="book in boos">
    <li>书名： {{book.name}}</li>
    <li>作者： {{book.author}}</li>
</template>

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

<span v-for="value in user" >{{ value }} </span> 
data:{
    user:{
        name:'Aresn',
        gender:'男',
        age:26
    }
}

渲染后的结果为：

<span>Aresn </span><span>男</span><span>26 </span>

遍历对象属性时，有两个可选参数，分别时键名和索引：

<li v-for= " (value, key, index) in  user" > 
    { { index } } - { { key } } : { { value } }
</li>

展示的结果：

v-for还可u迭代整数渲染后的结果为：

1 2 3 4 5 6 8 9 10

数组更新

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关键词的数目，例如：

渲染结果中，第一项《Vue.js》被过滤掉了，只显示了书名中含有JavaScript的选项。

Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化的复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用翻新性能问题。

需要注意的是，在以下的数组中，Vue是不能检测到的，也不能触发视图更新：

通过索引直接设置项，比如app.books[3] = {.........}。

修改数组长度，比如app.books.length = 1。

解决第一个问题可以用两种方法实现同样的效果，第一种使用了Vue内置的set方法：

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

如果是在webpack中使用组件化的方式（进阶篇中将介绍），默认是没有导入Vue的，这时可以使用$set，例如：

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

这里的this指向的就是当前组件实例，即app。在非webpack模式下可以用$set方法，例如app.$set(...)

另一种方法：

app.books.splice(3,1,{

name:'《css揭秘》',

author:'[希] Lea Verou '

})

第二个问题也可以直接用splice来解决：

app.books.splice(1);

接下来讲一下过滤与排序

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

还是上面的书目

<template v-for = "book in filterBooks">
    ...
    ...
</template>

computed:{
    filterBooks:function(){
        return this.books.filter(function(){
            return book.name.match(/JavaScript/);
        });
    }
}

这段代码同样是把书名中包含JavaScript关键词的数据过滤出来，计算属性filterBooks依赖books，但是不会修改books。实现排序也是类似的，比如在此基础上新加一个计算属性sortBooks，按章书名的长度有长到短排序：

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

方法与事件

Vue事件处理v-on，在再见绑定上，类似原声的JavaScript的onclick等写法，也是在HTML上进行监听的。例如，我们监听一个按钮的点击事件，设置一个计数器，每次点击都加1：

点击次数:{{counter}}
<button @click="counter++"> + 1</button>
data:{
    counter:0
}

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

点击次数:{{counter}}
<button @click="handleAdd()"> + 1</button>
<button @click="handleAdd(10)"> + 1</button>
data:{
    counter:0
}
methods:{
    handleAdd:function(count){
        count = count || 1;
        // this指向当前Vue实例app
        this.counter += count;
    }
}

在methods中定义了我们需要的方法供@click调用，需要注意的是，@click调用的方法名后可以不跟括号“（）”。此时如果该方法有参数，会默认将原生事件对象event传入，可以尝试修改为@click=“handleAdd”，然后在handleAdd内打印出count参数看看。大部分的业务场景中，如果方法不需要传入参数，为了简便可以不写括号。

这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违反分离的原理，时则刚好相反。因为通过HTML就可以知道调用的是哪个方法，将逻辑DOM解耦，便于维护。最重要的是，当ViewModel销毁时，所有的事件处理器都会自动删除，无需自己清理。

Vue提供了特殊变量$event，用于访问原生DOM事件，例如下面的实例可以阻止连接打开：

<a href="www.apple.com" @click="handleClick('禁止打开',$event)">打开链接</a>

methods:{
    handleClick:function(message,event){
        event.preventDefault();
        window.alert(message);
    }
}

修饰符

在上例使用的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="handle"></form>
<!-- 添加事件监听器时使用是按捕获模式 -->
<div @click. capture="handle"> ... </div> 
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div @click.self="handle"> ... </div> 
<!-- 只触发一次，组件同样适用 -->
<div @click.once="handle"> ... </div>

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

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

也可以自己配置具体按键

Vue.config.keyCodes.f1 = 112;

// 全局定义后，就可以使用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的基本内容

注意，我们要将vue.min. js和 index.js 文件写在＜body＞的最底部，如果写在＜head＞里， Vue 实例将无法创建，因为此时 DOM 还没有被解析完成，除非通过异步或在事件 DOMContentLoaded (IE 是 onreadystatechange）触发时再创建 Vue 实例，这有点像jQuery 的$（document).ready（）方法。

这里有个练习题可以练习

至此我们这一节就结束了，想看下一节的请点击：

Vue.js实战之系统学习第六节

夏初末未始

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
Vue.js实战之系统学习第五节

Vue.js实战之系统学习第四节想看上一节请点击上面的链接。是不是感觉自己会的并不多，可是用起来却很舒服啊，对，这就是Vue.js的魅力，但是我们要沉住气啊，还有很多需要学的啊。接下来我们继续Vue.js的基本指令吧。v-cloakv-vloak不需要表达式，它会在Vue示例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none；配合使用：<d...
复制链接

扫一扫

专栏目录