vue 指令

指令

• 指令是带有 v-前缀 的特殊属性，绑定在 dom 属性上
• Vue 中不允许直接操作 dom
• 指令用来操作 dom
• mustache语法 --------- 属性写法
  • 属性值是直接写数据的，不需要使用 {{ }}

1、v-text

• 更新元素的 textContent。
• 如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
• 示例

  	<span v-text="msg">span>
  	
  	<span>{{msg}}span>
  	
  	<script>
  	  var vm = new Vue({
  	    el: '#app',
  	    data: {
  	     msg: ' hello Vue.js '
  	    }
  	  })
  	script>
  

2、v-html

• 更新元素的 innerHTML 。

• 可以解析标签型数据。

• 示例

  	
  	 <div id="app">
  	   
  p>
  	 div>
  	
  	<script>
  	  var vm = new Vue({
  	    el: '#app',
  	    data: {
  	     h: '
   hello Vue.js 
  '
  	    }
  	  })
  	script>
  

条件渲染:

3、v-show

• 根据表达式的 true 和 false 值，切换元素的 display CSS 属性；

• 不管初始条件如何，元素始终渲染。

• v-show 无法用于 < template > 元素，也不能和 v-else 配合使用。

• 示例

  	<div v-show="flag">v-showdiv>
  	<script>
  	var vm = new Vue({
  		el: '#app',
  		data: {
  			flag: true
  		}
  	})
  	script>
  

4、v-if

• 根据表达式的值的真假条件渲染元素；
• 操作 dom元素（组件）的创建或是销毁；
• 示例

  	<div id="app"> 
  		<h2 v-if='ifFlag'>v-if 单路分支 h2>
  	div>
  	
  	<script>
  		var vm = new Vue({
  			el: '#app',
  			data: {
  				ifFlag: true
  			}
  		})
  	script>
  

5、v-else

• 不需要表达式；
• v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则无法识别它。
• 示例

  	<div id="app"> 
  		<h2 v-if='ifFlag'>v-if 单路分支 h2>
  		<p v-else >双路分支p>
  	div>
  	
  	<script>
  		var vm = new Vue({
  			el: '#app',
  			data: {
  				ifFlag: false
  			}
  		})
  	script>
  

6、v-else-if

• v-if 之后的“else-if 块”。可以多次链式地调用;
• v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则无法识别它。
• 示例

  	<div id="app"> 
  		<h2 v-if=" type === 'A' ">v-if 多路分支 h2>
  		<p v-if=" type === 'A' "> A p>
  		<p v-else-if=" type === 'B'"> B p>
  		<p v-else-if=" type === 'C'"> C p>
  		<p v-else > D p>
  	div>
  	
  	<script>
  		var vm = new Vue({
  			data: {
  				type: 'A'
  			}
  		})
  	script>
  

列表渲染:

7、v-for

• 将一个数组、对象或 json 数据渲染为列表项；
• v-for 指令需要限定格式为v-for = " item in items " 的特殊语法；

1. 数组 v-for = " (item,index) in arr " item 是 arr 中每一个元素
2. 对象 v-for = " (item,key,index) in obj " item 是 obj 的属性值
3. json 类型数据
4. 嵌套类型数据

• 示例

  	<div id="app">
  		<div id="app">
  		    <h3>数组h3>
  		    <ul>
  		    
  		        <li v-for=" (item1,index) in arr "> {{ item1 }} ，{{ index }} li>
  		      ul>		
  		
  		      <h3>对象h3>
  		      <ul>
  		       
  		        <li v-for=" （item2,key,index） in obj "> {{ item2 }} li>
  		      ul>
  		
  		      <h3>jsonh3>
  		       <ul>
  		          <li v-for=" item3 in json "> {{ item3.task }} li>
  		        ul>
  		        
  				<h3>嵌套h3>
  		       <ul>
  		          <li v-for=" item4 in lists "> 
  		          <p>{{ item4.id }}p>
  		          <ul>
  					<li v-for="todo in item4.todos">
  						{{ todo }}
  				   li>
  				  ul> 
  				  li>
  		        ul>
  		    div>
  	div>
  	
  	<script>
  		new Vue({
  		el: '#app',
  			data: {
  				arr: [ 1 , 2 , 3 , 4 ]，
  				obj: {
  					id: 1,
  					name: "Bianca",
  					age: 20
  				},
  				json: [
  					{
  		              id:1,
  		              task:"敲代码"
  		            },  
  		            {
  		              id:2,
  		              task:"睡觉"
  		            }
  				],
  		      lists: [
  		        {
  		          id: 1,
  		          todos: {
  		            id: 1,
  		            name: '连城'
  		          }
  		        },
  		        {
  		          id: 2,
  		          todos: {
  		            id: 2,
  		            name: '文武'
  		          }
  		        }
  		      ]
  			}
  		})
  	script>
  

  结果：
  

  问题：

  1. v-if 与 v-show 的区别

  相同点：

  • v-if 与v-show 都可以动态控制 dom 元素显示隐藏

  不同点：

  • v-show 操作的是 dom 元素的 display 属性，dom元素还在
  • v-if 操作的是 dom 元素（组件）的创建或销毁
  • v-show 只能写一个单路形式
  • v-if 可以有多种使用形式
    - 单路分支
    - 多路分支
    - 双路分支

  注意：

  • 当一个元素默认在 css 中加了display：none 属性，这时通过 if-show 修改为 true 是无法让元素显示的。原因是显示隐藏切换，只是会修改 element.style 为 display:" " 或者 display:none, 并不会覆盖掉或修改已存在的 css属性。
    

  2. v-if 与 v-show 使用场景

  • 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销;
  • 因此，如果需要频繁地切换则使用 v-show 较好；
  • 如果在运行时条件很少改变，则使用 v-if 较好。

key

• 给每一个循环列表添加一个唯一标识；

• 使用 v-bind 指令来绑定 key；

• 只有 json 数据才能用 id；数组和对象只能用 index ；

• 如果有 id ，那么我们就使用 id，如果没有，我们才会选择 index；

  <div id="app">
  	<ul>
  		<li v-for=" (item,index) in lists" v-bind:key="item.id"> li>
  	ul>
  div>
  
  <script>
  	new Vue({
  		el: '#app',
  		data: {
  		     lists: [
  		       {
  		         id: 1,
  		         name: '连城'
  		        },
  		        {
  		          id: 2,
  		          name: '文武' 
  		        }
  		      ]
  			}
  		})
  script>
  

8、v-bind

• 单项数据绑定，将一个数据绑定在一个 dom 的属性上
• 动态地绑定一个或多个特性，或一个组件 prop 到表达式。
• 缩写 ：

9、Vue 动态绑定类名 v-bind:class

• 将数据与元素的 class 列表绑定在一起；
• v-bind:class 指令也可以和普通 class 属性共存，不会覆盖原生类名；
• v-bind:class 接受三目运算；

绑定方式

• 对象形式
  - v-bind:class= " { 属性名: boolean } "
  - 属性名 这个 class 的存在与否，取决于 boolean 的 truthy 值。

• 数组形式 【 推荐 】
  - v-bind:class= " [ 数据 ] "

• 示例

  • 对象形式：

  	<style>
  		.size{
  			width: 300px;
  			height: 300px;
  		}
  		.bg{
  			background-color: red;
  		}
  		.active{
  			border-radius:10px;
  		}
  	style>
  	
  	<div id="app">
  		
  		
  		
  		
  		<p class="active" :class=" { size , bg1 } " >p>
  
  		 
  		<p :class=" { size:flag , bg:true } ">p>
  
  		
  		<p :class=" { [size]:true , [bg]:true } ">p>
  	div>
  	
  	<script>
  		new Vue({
  			el: "#app",
  			data: {
  				size: "size",
  				bg: "bg"，
  				flag: true
  			}
  		})
  	script>
  

  • 数组形式：

  	<style>
  		.size{
  			width: 300px;
  			height: 300px;
  		}
  		.bg{
  			background-color: red;
  		}
  		.bg2{
  			background-color: green;
  		}
  		.active{
  			border-radius:10px;
  		}
  	style>
  	
  	<div id="app">
  	 
  
       
        <p :class=" ['size' , 'bg'] ">p>
  
        
        <p :class=" [ s , bg ] ">p>
        
  	  
        <p :class=" [ flag ? bg : 'bg2', 'size' ] ">p>
  	div>
  	
  	<script>
  		new Vue({
  			el: "#app",
  			data: {
  				s: "size",
  				bg: "bg"，
  				flag: true
  			}
  		})
  	script>
  

10、事件绑定 v-on:

• v-on:eventType=" handleName "

• 简写 v-on: -----> @

• 示例

	<div id="app">
		<button v-on:click="handle">
			v-on:
		button>
		
		<button @click="handle">
	        简写@
	    button>
	    
	    <button @click="param(10)">
	        传参
	    button>
	div>
	
	<script>
		new Vue=({
			el:"#app",
			method:{ //存放事件处理程序
				handle(){
					alert(2)
				},
				param(num){
					alert( num )
				}
			}
		})
	script>

事件对象 e :

	<div id="app">
		<button @click="event">
	        事件对象 e
	    button>
	div>
	
	<script>
		new Vue=({
			el:"#app",
			method:{ //存放事件处理程序
				event(){
					console.log( e )
				}
			}
		})
	script>

结果：

问题：

• 如果事件处理程序中有三个参数，第三个参数才是事件对象 e ,如何实现?

	<div id="app">
		<button @click="helloHandler( 10,20,e)" > 点击 button>
	div>
	<script>
		new Vue=({
			el:"#app",
			method:{ //存放事件处理程序
				event(a,b,e){
					console.log( a )
					console.log( b )
					console.log( e )
				}
			}
		})
	script>

分析：

• 我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个 undefined

解决：

• 在函数执行时，传入一个实际参数 $event 来代表事件对象

	<div id="app">
		<button @click="helloHandler( 10,20,$event)" > 点击 button>
	div>
	<script>
		new Vue=({
			el:"#app",
			method:{ //存放事件处理程序
				event(a,b,e){
					console.log( a )
					console.log( b )
					console.log( e )
				}
			}
		})
	script>