初识Vue.js（五）
5.1 基本指令v-clock不需要表达式，它会在Vue实例结束编译时从绑定的HTMl元素上移除，经常和CSS的display:node;配合使用。在一般情况下，v-clock是一个解决初始化man导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。v-o...
5.1 基本指令
v-clock不需要表达式，它会在Vue实例结束编译时从绑定的HTMl元素上移除，经常和CSS的display:node;配合使用。
在一般情况下，v-clock是一个解决初始化man导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。
v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只能被渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。例如
<body>
<div id="app">
<span v-once>{{message}}</span>
<div v-once>
<span>{{message}}</span>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'这是一段文本'
}
})
</script>
</body>
5.2 条件渲染指令
5.2.1 v-if、v-else-if、v-else
与JavaScript的条件语句相似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，例如：
<body>
<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 src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
status:1
}
})
</script>
</body>
v-else-if 要紧跟v-if，v-else要紧跟v-else-if或v-if，当前元素、组件以及所有子节点将被渲染，为假时将被移除。如果一次判断的是多个元素，可以在Vue.js内置的元素上使用条件指令，最终渲染的结果不会该元素。
5.2.3 v-show
v-show的用法与v-if基本上一致，只不过v-show是改变元素的CSS属性display。当v-show的表达式的值为false时，元素会隐藏。
例如：
<body>
<div id="app">
<p v-show="status===1">显示</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
status:2
}
})
</script>
</body>
查看DOM结构会看到元素上加载了内联样式display：none；
<p style="display: none;">显示</p>
5.2.3 v-if 与v-show的选择
v-if和v-show有同样的功能，不过v-if才是真正的条件渲染，它会根据表达式适当的销毁或重建元素以及绑定的事件或子组件，若表达式初始值为false，则一开始元素、组件并不会渲染，只有当条件第一次变为真时才开始编译。
而v-show只是简单的css属性切换，无论条件真与否，都会被编译，相比之下，v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换条件。
5.3 列表渲染指令v-for
当需要将一个数组遍历或枚举一个对象循环显示的时候，就会用到列表渲染指令v-for。它的表达式需要结合in来使用，类似item in items的形式。
<body>
<div id="app">
<ul>
<li v-for="book in books" >{{book.name}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
books: [
{name:'《Vue.js实战》'},
{name:'《Java实战》'},
{name:'《C#实战》'},
]
}
})
</script>
</body>
在表达式中，books是数据，book是当前数组元素的别名，循环出的每个列表内的元素都可以访问到对应的当前book。列表渲染也支持of来代替in作为分隔符，它更接近JavaScript迭代器的语法：
<li v-for="book of books" >{{book.name}}</li>
v-for的表达式支持一个可选参数作为当前项的索引，也可以用在内置标签<**template>**上，将多个元素进行渲染。除了数组外，对象的属性也是可以遍历的，遍历对象属性的时候，有两个可选参数，分别是键名和索引
<ul>
<li v-for="(value,key,index) in user">
{{index}-{{key}}:{value}}
</li>
</ul>
v-for还可以迭代整数
<body>
<div id="app">
<span v-for="n in 10">{{n}}</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app'
})
</script>
</body>
5.3.2 数组更新
Vue的核心是数据与视图的双向绑定，当我们修改数组的时候，Vue会检测到数据变化，所以v-for渲染的视图会立即更新。Vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- resverse()
使用以上方法会改变这些方法调用的原始数组，有些方法不会改变原数组，而是生成一个新的数组.
filter(),concat(),slice()，在使用这些非变异方法的时候，可以用新数组来替换原数组。
Vue在检测到数组变化时，并不是直接重新渲染真个列表，而是最大化的复用DOM元素，替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。
需要注意的是，以下变动的数组中，Vue是检测不到的，也不会触发视图更新。
- 通过索引直接设置项，比如app.books[3]={…}
- 修改数组长度，比如app.length=1.
5.3.3 过滤与排序
- 过滤器就是可以对我们的数据进行添油加醋然后再显示
- 过滤器有全局过滤器和组件内的过滤器
- 全局过滤器Vue.filter(‘过滤器名’,过滤方式fn );
- 组件内的过滤器 filters:{ ‘过滤器名’,过滤方式fn }
- {{ msg | 过滤器名}}
- 最终都是在过滤方式fn里面return产出最终你需要的数据
vue中的this是vue封装好给我们使用的，跟平常方法里面的this是不同的
注意：过滤器中方法的引号不能省略。
<!DOCTYPE html>
<html>
<head>
<title>过滤器</title>
</head>
<body>
<div id="app">
我输入的：<input type="text" name="" v-model='instring'></br>
我输出的：{{ instring }}</br>
{{ instring | reversal('翻转输出：')}}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
console.log(this)
Vue.filter('reversal',function(val,arg2){
return arg2+val.split('').reverse().join('')
})
new Vue({
el:'#app',
data(){
return {
instring:''
}
},
created(){
console.log(this,'vue的')
}
// filters:{
// reversal(val,arg2){ 对应上文中的 {{ instring | reversal('翻转输出：')}}
// // 字符串转数组 翻转 数组转字符串
// return arg2+val.split('').reverse().join('')
// }
// }
})
</script>
</body>
</html>
当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组。
例如
<body>
<div id="app">
<ul>
<template v-for="book in filterBooks">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
books: [
{
name:'《Vue.js实战》',
author:'尤雨溪'
},
{
name:'《Java实战》',
author:'许致远'
},
{
name:'《C#实战》',
author:'许晨'
}
]
},
computed:{
filterBooks:function(){
return this.books.filter(function(book){
return book.name.match(/Java/);
});
}
}
})
</script>
</body>
在Vue.js 2.x中废弃了1.x中内置的limitBy、filterBy和orderBy过滤器，统一使用计算属性来实现。
5.4 方法与事件
5.4.1 基本用法
我们已经引入了Vue事件处理的概念V-on，在事件绑定上，类似原生的JavaScript的OnClick写法，也是在HTML上进行监听的。例如，我们写监听一个按钮的点击事件，设置一个计数器，每次都加1：
<body>
<div id="app">
点击次数：{{counter}}
<button @click="counter++">+1</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
counter:0
}
})
</script>
</body>
@click的表达式可以直接使用JavaScript语句，也可以是一个在Vue实例中methods选项内的函数名字，比如对上例进行扩展，再增加一个按钮，点击一次，计数器加10；
<body>
<div id="app">
点击次数：{{counter}}
<button @click="handleAdd()">+1</button>
<button @click="handleAdd(10)">+10</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
counter:0
},
methods:{
handleAdd:function(count){
count=count||1;
this.counter+=count;
}
}
})
</script>
</body>
这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则正好相反，因为通过HTML就能知道调用的是那个方法，将逻辑与DOM解耦，便于维护。最重要的是，当ViewModel销毁时，所有的事件处理器会自动删除，无需自己清理。
Vue提供了一个特殊变量$event,用于访问原生DOM事件。
5.4.2 修饰符
Vue支持以下修饰符
- stop
- prevent
- capture
- self
- once
在表单元素上监听键盘事件时，还可以使用键盘修饰符，比如调用某个键时才调用某个方法。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)