VUE简单命令

v-cloak指令（解决闪动）

css

<style>
    [v-cloak] {
        display: none;
        }
</style>

html

<div id="app" v-cloak>
    <div>{{msg}}</div>
</div>

js

<script>
    var app = new Vue({
        el: '#app', 
        data: {
            msg: 'Hello Vue!',
        }
    });
</script>

填充

填充纯文本——v-text

填充带格式文本——v-html

数据绑定

<img src="img/2.png" v-bind:title="msg"/>
<img src="img/2.png" :title="msg"/>

<script>
    var app = new Vue({
        el: '#app', 
        data: {
            msg: 'Hello Vue!',
        }
    });
</script>

增加点击事件

<img src="img/2.png" v-on:click="print"/>
<img src="img/2.png" @click="print"/>
<img src="img/2.png" :title="msg" @click="print2(msg)"/>

<script type="text/jscript">
	var vue = new Vue({
		el:'.app',
		data:{
			msg:'下课了，吃饭了',
		},
		methods:{
			print : function(){
				alert("ss");
				console.log("搜索");
			},
			print2(val){
				alert(val);
			}
		}
	});
</script>

定时

<div class="app">
	<input type="button" value="跑马" v-on:click="show"/><br />
	<input type="button" value="跑马自动" v-on:click="show2"/><br />
    <input type="button" value="跑马自动关闭" v-on:click="close"/><br />
	{{msg}}
</div>
<script>
	var vue = new Vue({
		el:".app",
		data:{
			msg:"123456789"，
            flag:false,
			run:0
		},
		methods:{
			show(){
				var start = this.msg.substring(0,1);
				var end = this.msg.substring(1);
				this.msg = end + start;	
			},
			show2(){
				if(!this.flag){
					this.run = setInterval(this.show,1000);
					this.flag = true;
				}
			},
			close(){
				if(this.flag){
					var num = this.run;
					this.flag = false;
					clearInterval(num);
				}
			}
		}
	});
</script>

事件修饰符

阻止后续 —— .stop

<div id="one" @click="one" style="width: 150px;height: 150px;background: blue;">
	<input type="button" id="two" value="click" @click.stop="two"/>
</div>

阻止默认 —— .prevent

<a href="http://www.baidu.com" @click.prevent="three">百度</a>

捕获事件 —— .capture(顺序与冒泡相反)

<div id="one" @click.capture="one" style="width: 150px;height: 150px;background: blue;">
	<input type="button" id="two" value="click" @click="two"/>	
</div>

执行当前 —— .self

<div id="one" @click.self="one" 
		style="width: 150px;height: 150px;background: blue;">
	<input type="button" id="two" value="click" @click="two"/>
</div>

执行一次 —— .once

双向绑定

v-model

<!-- 单向 -->
<input type="text" v-bind:value="msg" />
<!-- 双向 -->
<input type="text" v-model:value="msg" />