vue常见的指令、事件、模板
vue : 是一个mvm框架 它的指令以 v-xx 开头 ,一片html 的代码片段再配合一个 json 同时再 new 一个实例就可以出来一个vue 的雏形。
一、常见的vue指令:
指令:就是用来扩展 html 标签的功能属性的。
1.v-model: 用在表单html标签元素 例如 ” input “,它可以实现双向数据绑定 ,代码如下:
<div id="box">
<!-- 双向数据绑定-->
<input type="text" v-model="msg">
<br>
{{msg}}
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
window.onload = function () {
var vm = new Vue({
//el 放选择器 这是一个id的选择器
el:"#box",
//data 中放数据
data:{
msg:'welcome vue'
}
});
}
</script>
双向数据绑定指的是:当改变输入框中的值时下面 msg 中的值就给跟着一起改变。
上面的代码就是一个简单的实现 vue 的一个雏形的代码。
el: 对应的值放的要绑定的元素的id 或者类名 或者标签 简而言之就是任意一种选择器。
data:中存放的数据。
2. v-for 循环 代码如下,下面分别循环了数组和 json 数据:
<div id="box">
<ul>
<li v-for="(value,index) in arr">
<!--value是值 index是索引-->
{{value}} {{ index }}
</li>
</ul>
<hr>
<li v-for="(value,key,index) in json">
<!-- 循环json的时候value在前 key 在后-->
{{key}} {{value}} {{index}}
</li>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
window.onload = function () {
var vm = new Vue({
//el 放选择器 这是一个id的选择器
el:"#box",
//data 中放数据
data:{
arr:['apple','orange'],
json:{a:'apple',b:'banana'}
}
});
}
</script>
上面的两个代码运行效果如下:
二、常见的vue事件:
- 点击事件
在vue中点击事件有已下几种写法:
1. v-onclick = “函数”
2. v-on :click = “”
3. @click = “”
当然还有一些其他的常见的事件 但是写法都差不多啦。
2.控制侠士隐藏的事件 v-show = “true/false” (true:为显示 ,false:为隐藏)
3. 阻止事件冒泡有一下两种方式:
1. @click=“show3($ event)” (show3为方法名)
然后在方法中加入如下代码:
event.cancelBubble = true;
2. @click.stop=“show5()” (show5 为方法名)
用这种方法阻止事件冒泡的时候 在show5 这个方法中正常写就可以啦 就不用像上面一样写那个代码啦
4.阻止默认事件有一下两种方式:
1. @contextmenu=“show7($event)” (show7为方法名)
然后在方法中加入如下代码:
event.preventDefault();
2. @contextmenu.prevent=“show8()” (show8为方法名)
用这种方法阻止事件冒泡的时候 在show8 这个方法中正常写就可以啦 就不用像上面一样写那个代码啦
具代码如下:
注意:vue中的方法写在 methods 中
<div id="box">
<input type="button" value="按钮" v-on:click="show()">
<br>
<input type="button" value="简写按钮" @click="show()">
<br>
<input type="button" value="事件对象按钮" @click="shows($event)">
<br>
<div @click="show2()">
<input type="button" value="事件冒泡按钮" @click="showss()">
</div>
<div @click="show4()">
<input type="button" value="阻止事件冒泡按钮" @click="show3($event)">
</div>
<div @click="show6()">
<input type="button" value="简单阻止事件冒泡按钮" @click.stop="show5()">
</div>
<!--鼠标右键-->
<input type="button" value="阻止默认事件按钮" @contextmenu="show7($event)">
<br>
<input type="button" value="简易默认事件按钮" @contextmenu.prevent="show8()">
<br>
<!-- 键盘事件-->
<input type="text" @keydown="show9()">
<br>
<!-- 获得键码键盘事件-->
<input type="text" @keydown="show10($event)">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
window.onload = function(){
var vue = new Vue({
el:"#box",
data:{},
methods:{
show:function(){
alert(1);
},
shows:function(event){
alert(event.clientX);
},
showss:function(){
alert(1);
},
show2:function(){
alert(2);
},
show3:function(event){
alert(3);
event.cancelBubble = true;
},
show4:function(){
alert(4);
},
show5:function(){
alert(5);
},
show6:function(){
alert(6);
},
show7:function(event){
alert(7);
event.preventDefault();
},
show8:function(){
alert(8);
},
show9:function(){
alert(9);
},
show10:function(event){
alert(event.keyCode);
}
}
});
}
</script>
三、vue模板:
{{ msg }} :数据更新的模板
v-once = “”:数据只绑定一次的模板
v-html = “”: html绑定输出的模板
具体代码如下:
<div id="box">
<input type="text" v-model="msg">
<br>
{{msg}}
<br>
<p v-once>{{msg}}</p>
<br>
<p v-html="msg"></p>
<hr>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
//el 放选择器 这是一个id的选择器
//也可以放类选择器
el:"#box",
//data 中放数据
data:{
msg:'123'
}
});
}
</script>
执行效果如下: