Vue.js学习笔记01

---

一、v-cloak v-text v-html的使用

1. v-cloak

使用v-cloak能够解决插值表达式闪烁的问题。

例如，当不使用v-cloak时，如果网速过慢，加载过程中就会显示{{msg}}。

<div id="app">
	<p>{{msg}}</p>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'welcome to learn vue'
		}
	})
</script>

使用v-cloak后，如果网速过慢，在加载过程中，插值表达式位置会显示空白。

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

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

<script>
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'welcome to learn vue'
		}
	})
</script>

2. v-text

默认v-text没有闪烁问题，但是会覆盖元素中原本的内容。

例如，h4标记中的内容，在页面加载完成后，会被msg中的内容覆盖掉。

<div id="app">
	<h4 v-text="msg">文本文本</h4>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'welcome to learn vue'
		}
	})
</script>

3. v-html

v-html将字符串绘制成网页元素。

v-html会识别字符串中的元素标记，而当我们不使用v-html时，字符串会被原封不动地绘制出来。

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

<script>
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'<h1>I am powerful!</h1>'
		}
	})
</script>

二、v-bind指令

v-bind是vue中用于绑定属性的指令,里面可以写合法的js表达式。并且，v-bind:指令可以简写为:。

<div id="app">
	<input type="button" value="按钮1" v-bind:title="myButton"/>
	<input type="button" value="按钮2" :title="myButton"/>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
			myButton:'这是一个自己定义的按钮'
		}
	})
</script>

三、使用v-on指令定义vue中的事件

v-on:事件绑定机制,缩写是@。

<div id="app">
	<input type="button" value="按钮" v-on:click="show"/>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'welcome to learn vue'
		},
		methods:{	//这个method属性中定义了当前vue实例所有可用的方法
			show:function(){
				alert('Hello');
			}
		}
	})
</script>

可以使用v-on实现跑马灯效果，点击两个按钮时触发不同的函数。

<div id="app">
	<input type="button" value="按钮" v-on:click="show"/>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'猥琐发育，别浪~~'
		},
		methods:{	//这个method属性中定义了当前vue实例所有可用的方法
			lang(){
				if(this.intervalId!=null)
					return;
				this.intervalId=setInterval(()=>{
				//获取第一个字符
				var start=this.msg.substring(0,1);
				//获取到除第一个字符外的所有字符
				var end=this.msg.substring(1);
				//拼接得到新的字符串
				this.msg=end+start;
				},200)
					},
			stop(){
				clearInterval(this.intervalId);
				this.intervalId=null;
			}
		}
	})
</script>

四、事件修饰符

1. .stop阻止冒泡

例如，当点击按钮时，会先触发按钮的事件，然后触发包裹按钮的div的事件，就像冒泡一样，泡泡越来越大。

<div id="app">
	<div class="inner" @click="divHandler">
    	<input type="button" value="戳他" @click="btnHandler" />
    </div>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
		},
		methods:{	//这个method属性中定义了当前vue实例所有可用的方法
			divHandler(){
				console.log('这是触发了inner div的点击事件');
			},
			btnHandler(){
				console.log('这是触发了btn按钮的点击事件');
			}
		}
	})
</script>

而使用.stop后，就能避免冒泡了。

<div id="app">
	<div class="inner" @click="divHandler">
    	<input type="button" value="戳他" @click.stop="btnHandler" />
    </div>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
		},
		methods:{	//这个method属性中定义了当前vue实例所有可用的方法
			divHandler(){
				console.log('这是触发了inner div的点击事件');
			},
			btnHandler(){
				console.log('这是触发了btn按钮的点击事件');
			}
		}
	})
</script>

2. .prevent阻止默认行为

点击a标记后，本应该跳转链接所在页面，但是使用.prevent后就能阻止页跳转。

<div id="app">
	<a href="http://www.baidu.com" @click.prevent="linkClick">打开百度</a>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
		},
		methods:{	//这个method属性中定义了当前vue实例所有可用的方法
			linkClick(){
				console.log('这是触发了链接的点击事件');
			}
		}
	})
</script>

3. .capture实现捕获触发事件的机制

与冒泡相反，使用了.capture的元素，会从外到里执行点击事件，然后触发外部包裹它的元素的点击事件。

<div id="app">
	<div @click="outerDivHandler">
    	<div class="inner" @click.capture="divHandler">
        	<input type="button" value="戳他" @click="btnHandler" />
        </div>
    </div>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
		},
		methods:{	//这个method属性中定义了当前vue实例所有可用的方法
			divHandler(){
				console.log('这是触发了inner div的点击事件');
			},
			btnHandler(){
				console.log('这是触发了btn按钮的点击事件');
			},
			outDivHandler(){
				console.log('这是触发了outer div的点击事件');
			}
		}
	})
</script>

4. .self实现只有点击当前元素的时候，才会触发事件处理函数

例如，给div使用.self后，只有点击div时才会触发其点击事件，而点击div中的按钮时，并不会触发div的点击事件。

<div id="app">
	<div class="inner" @click.self="divHandler">
		<input type="button" value="戳他" @click="btnHandler" />
    </div>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
		},
		methods:{	//这个method属性中定义了当前vue实例所有可用的方法
			divHandler(){
				console.log('这是触发了inner div的点击事件');
			},
			btnHandler(){
				console.log('这是触发了btn按钮的点击事件');
			}
		}
	})
</script>

4. .once只触发一次事件处理函数

使用.once后，无论点击多少次，只会触发一次点击事件，并且还能和.prevent一起使用。

<div id="app">
	<a href="http://www.baidu.com" @click.prevent.once="linkClick">打开百度</a>
</div>

<script>
	var vm=new Vue({
		el:'#app',
		data:{
		},
		methods:{	//这个method属性中定义了当前vue实例所有可用的方法
			linkClick(){
				console.log('这是触发了连接的点击事件');
			}
		}
	})
</script>

五、Vue指令之v-model和双向数据绑定

使用v-model指令，可以实现表单元素和Model中数据的双向数据绑定。
**注意：**v-model只能运用在表单元素中。

<div id="app">
	<h4>{{ message }}</h4>
    <input type="texx" v-model:value='message'>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '大家好'
        },
        methods:{

        }
    });
</script>

六、简易计算器案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue计算器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<body>
    <div id="app">
        <input type="texx" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result" readonly>
    </div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            n1:0,
            n2:0,
            result:0,
            opt:'+'
        },
        methods:{
            calc(){ //计算函数
                switch(this.opt){
                    case '+':
                        this.result=parseInt(this.n1)+parseInt(this.n2)
                        break;
                    case '-':
                        this.result=parseInt(this.n1)-parseInt(this.n2)
                        break;
                    case '*':
                        this.result=parseInt(this.n1)*parseInt(this.n2)
                        break;
                    case '/':
                        this.result=parseInt(this.n1)/parseInt(this.n2)
                        break;
                }
            }
        }
    });
</script>
</body>
</html>