Vue的几个小事件

Vue 第一节

<style type="text/css">
		[v-cloak]{/*带有v-cloak这个属性的设置隐藏是为了在加载慢的时候隐藏，不然在页面上会显示标签*/
			display:none;
		}
	</style>


<div id="app" v-cloak>
		<!--实例所控制的元素就是 V-->
		{{msg}}
		
		<!--v-text=""
			1、默认是没有在网速慢的时候显示标签的问题
			2、会将元素中默认的****号直接给替换了
		-->
		<h1 v-text="msg">6666</h1>
		<!--如果数据是个标签字符串，需要用v-html标签，这样就不会让标签显示出来，而是直接输出标签里面的内容-->
		<div v-html="msg2"></div>
		
		<!--v-bind: 是绑定属性的指令-->
		<input type="button" name="" id="" value="按钮" v-bind:title="mytitle"/>
		<!--还可以这样写（省略v-bind）表达式和在变量后面加表达式-->
		<input type="button" name="" id="" value="按钮" :title="mytitle + '我是新加的' "/>
		
		<!--v-on  是绑定事件的指令，缩写是@  比如@click="事件名称"-->
		<input type="button" name="" id="" :value="methods" @click="show" v-on:mouseover="hover" />
	</div>


<script type="text/javascript">
	var vm = new Vue({//new 出来的这个 vm 对象 就是我们mvvm中的 vm调度者
			el:'#app',
			data:{//data中放的是 el 中用到的数据（也就是 MVVM 中的M，用来保存每个页面的数据的）
				msg:'欢迎学习Vue',
				msg2:'<h2>我是一个大大的标签<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3000545380,3594254539&fm=26&gp=0.jpg" /></h2>',
				mytitle:'我是一个title提示值',
				methods:'我身上绑定了点击和移入事件'
			},
			methods:{//这个属性中定义可用的方法
				show:function(){
					this.methods='您触发了我的点击事件'
//					alert('您绑定了点击事件')
				},
				hover:function(){
					this.methods='您触发了鼠标移入事件'
//					alert('您触发了鼠标移入事件')
				}
			}
		});
</script>