初识Vue.js(五)

Vue.js 同时被 2 个专栏收录
9 篇文章 0 订阅

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
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值