VUE之属性、条件、渲染、事件指令及修饰符

1.v-bind属性指令
2.v-if条件指令
3.v-show渲染指令
4.v-on事件指令
①表达式：方法名、内联语句
②修饰符
5.methods选项-代理方法

1.基本指令v-bind
语法格式1：单个语法格式 v-bind:attributeName=variable

<div class="app">
			<a v-bind:href='href' v-bind:class='classname' v-bind:target='target' v-bind:title='title' >{{info}}</a>
		</div>
		<script>
			//创建根实例
			var app = new Vue({
				//挂载根实例
				el:'.app',
				//绑定数据
				data:{
					href:'http://ww.baidu.com',
					classname:'one two three',
					target:'_top',
					title:'百度一下，你就知道',
					info:'百度一下'
				}
			})
		</script>

语法格式2：对象语法格式 (别忘记加link)
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”

		<div class="app">
			<a v-bind='{class:link.class,href:link.href,traget:link.target,title:link.title}'>{{link.info}}</a>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					link:{
						class:'one two three',
						href:'http://www.baidu.com',
						target:'_top',
						title:'百度一下，你就知道',
						info:'百度一下'
					}
				}
			})
		</script>

语法格式3：数组语法格式”绑定类名”
v-bind:attributeName=“[variable1,variable2,……]”

		<div class="app">
			<a v-bind:class="[class1,class2]">{{info}}</a>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					class1:'classname1',
					class2:'classname2',
					info:'百度一下'
				}
			})
		</script>

2.vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的

2-1.基本指令v-if
指令主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上,v-if指条件性渲染，为true时渲染DOM，否则不进行渲染

		<div class="app">
			<p v-if="show">显示这段文字</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					show:true
				}
			})
		</script>

2-2.基本指令v-show
用法与v-if类似,不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

		<div class="app">
			<p v-show="show">显示这段文字</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					show:true
				}
			})
		</script>

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

（1）实现本质方法区别：
v-show本质就是标签display设置为none，控制隐藏
v-if是动态的向DOM树内添加或删除DOM元素
（2）编译的区别：
v-show其实就是在控制Css。
v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件。
（3）编译的条件：
v-show都会编译，初始值为false,只是将display设为none，但他也编译了。
v-if初始值为false，就不会编译了。
（4）性能：
v-show只编译了一次，后面其实就是控制css。性能更好一点。
v-if是不停的销毁和创建。

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

4-1.基本指令v-on（@）—在button按钮上绑定事件，除了click还可以是其他事件类型，例如dblclick、keyup、mouseover等。

<!--语法1：v-on:事件类型=”方法名”-->
		<div class="app">
			<p v-show="show">显示这段文字</p>
			<button @click="hide">点击隐藏</button>
		</div>
		<script>
			var app = new Vue({
				el:".app",
				data:{
					show:true
				},
				methods:{
					hide:function(){
						this.show = false;
					}
				}
			})
		</script>
		
		
		<!--语法2：v-on:事件类型=”内联语句”-->
		<div class="app">
			<p v-show="show">显示这段文字</p>
			<button @dblclick="show=!show">双击切换按钮</button>
		</div>
		<script>
			var app = new Vue({
				el:".app",
				data:{
					show:true
				},
				methods:{
					hide:function(){
						this.show = false;
					}
				}
			})
		</script>

4-2，v-on修饰符-----------以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
①.stop冒泡事件修饰符：阻止事件的传递，即阻止事件向上冒泡。

<div style="width:200px;height: 200px; background: red;" class="app" :title="title1" @click="click1">
			<button :title="title2" @click.stop="click2">按钮</button>
		</div>
		<script>
			var app = new Vue({
				el:".app",
				data:{
					title1:"我是父级",
					title2:"我是子级"
				},
				methods:{
					click1:function(){
						alert(this.title1);
					},
					click2:function(){
						alert(this.title2);
					}
				}
			})
		</script>

②.prevent默认事件修饰符：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。

<div style="width:200px;height: 200px; background: red;" class="app" :title="title1" @click.self="click1">
			<button :title="title2" >按钮</button>
			
			<a @click.prevent  href="2.html">阻止跳转2-PPT</a>
		
		</div>
		<script>
			var app = new Vue({
				el:".app",
				data:{
					title1:"我是父级",
					title2:"我是子级"
				},
				methods:{
					click1:function(){
						alert(this.title2);
					}
				}
			})
		</script>

③.capture捕获事件修饰符：使用事件捕获机制

<div style="width:200px;height: 200px; background: red;" class="app" :title="title1" @click.capture="click1">
			<button :title="title2" @click="click2">按钮</button>
		</div> 
		<script>
			var app = new Vue({
				el:".app",
				data:{
					title1:"我是父级",
					title2:"我是子级"
				},
				methods:{
					click1:function(){
						alert(this.title1);
					},
					click2:function(){
						alert(this.title2);
					}
				}
			})
		</script>

④.self自身事件修饰符：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。

<div style="width:200px;height: 200px; background: red;" class="app" :title="title1" @click.self="click1">
			<button :title="title2" >按钮</button>
		</div>
		<script>
			var app = new Vue({
				el:".app",
				data:{
					title1:"我是父级",
					title2:"我是子级"
				},
				methods:{
					click1:function(){
						alert(this.title2);
					}
				}
			})
		</script>

.once一次性事件修饰符，绑定的事件只能触发一次

<div class="app">
			<button @click.once="yi">点击弹出</button>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					info:"只改变一次"
				},
				methods:{
					yi:function(){
						alert(this.info);
					}
				}
			})
		</script>

keyup.keyCode键值事件修饰符，用来监听键盘事件（键盘修饰符以及自定义键盘修饰符）

<div class="app">
			<input type="text" @keyup.enter="enterEven" />
		</div>
		<script>
			var app =new Vue({
				el:'.app',
				data:{
					
				},
				methods:{
					enterEven:function(){
						alert('你点击了回车');
					}
				}
				
			})
		</script>

验证键盘上按钮的keyCode码是多少：

<input type="text" onkeydown="code(event)" placeholder="努力努力不能懈怠，加油加油" />
		<script>
			function code(event){
				console.log(event);
			}
		</script>

5.Vue.js将methods里的方法也代理了,可以像访问Vue数据一样来调用方法 在hide方法里，直接通过this.hide_p()调用了hide_p()函数

<div v-show="show" class="app" style="width:200px;height: 200px; background: red;">
			<button @click="hide">点击隐藏</button>
		</div>	
		<script>
			var app = new Vue({
				//1.挂载实例
				el:'.app',
				//2.数据选项
				data:{
					show:true
				},
				//3.方法选项
				methods:{
					hide:function(){
						this.hide_p();
					},
					hide_p:function(){
						this.show=false;
					}
				}
			})
		</script>