初识Vue.js（五）

丨许晨丨

于 2018-05-09 11:06:04 发布

阅读量2.8k

点赞数 1

文章标签： Vue.js

本文为许晨原创文章，转载请附上原文出处链接和本声明。。

本文链接：https://blog.csdn.net/mrxuchen/article/details/80241903

版权

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支持以下修饰符