Vue常用标签
使用Vue需要导入vuejs-2.5.16.js
<script src="js/vuejs-2.5.16.js"></script>
- Vue的插值表达式{{ }}
<div id="app">
<!--vue插值表达式，data中定义是数据显示到此处-->
{{massage}}
<!-- 三目运算符-->
{{false? "ok" : "no"}}
<!-- 数学运算-->
{{number*3.14}}
<!-- 插值表达式不支持!!!-->
<!-- {{var a=1;}}
{{if(a=10){}}}-->
</div>
<script>
//view model
new Vue({
el:"#app",//由vue接管app区域
data:{
massage:"hello vue", //注意！！！不加分号
number:100
}
});
</script>
- v-on:click点击事件
<div id="app">
{{message}}
<!-- v-on可以使用@替代-->
<button v-on:click="fun1('haha')">vue的onclick</button>
<button @click="fun1('haha')">haha</button>
</div>
new Vue({
el:"#app",
data:{
message:"hello vue"
},
methods:{
fun1:function (msg) {
alert("hello");
this.message=msg;
}
}
});
- v-on:keydown键盘监听事件
<div id="app">
Vue:<input type="text" v-on:keydown="fun($event)">
</div>
new Vue({
el:"#app",
data:{
},
methods:{
fun:function (event) {
var keyCode = event.keyCode;
alert(keyCode);
if (!(keyCode>=48&&keyCode<=59)){
// event.preventDefault();//阻止默认行为
event.stopPropagation();//阻止冒泡
}
}
}
})
- v-on:mouseover鼠标悬浮事件
<!-- @事件名称 就是 v-on:事件名称的简写方式-->
<div id="app">
<div @mouseover="fun1" id="div">
<textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
</div>
</div>
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠标移动到了div上");
},
fun2:function (event) {
alert("鼠标移动到了文件域上");
event.stopPropagation(); //阻止冒泡
}
}
})
- v-on:事件修饰符
<div id="app">
<!-- prevent：阻止事件的默认行为 stop:阻止事件的传播行为-->
<form method="post" @submit.prevent action="demo1.html">
<input type="submit" value="点击无效"/>
</form>
<div @click="fun">
<a @click.stop href="demo1.html">点击有效</a>
</div>
<!-- <form method="post" action="demo1.html" onsubmit="checkForm()">
<input type="submit" value="提交"/>
</form>-->
</div>
new Vue({
el:"#app",
methods:{
fun:function(){
alert("haha");
}
}
});
- v-on:按键修饰符
<div id="app">
<!-- @keydown.按键 监听键盘事件是按键修饰符
@keydown.enter是监听enter键的修饰符-->
<input type="text" @keydown.enter="fun">
</div>
new Vue({
el:"#app",
methods:{
fun:function () {
alert("haha");
}
}
})
- v-text与v-html
<div id="app">
<!-- 显示为text文本-->
<div v-text="message"></div>
<!-- 自动识别html标签显示内容-->
<div v-html="message"></div>
</div>
new Vue({
el:"#app",
data:{
message:"haha
"
}
})
- v-model数据的双向绑定
<div id="app">
<form>
<!-- v-model数据的双向绑定：只适用于表单标签-->
<input type="text" v-model:value="user.username">
<input type="text" v-model:value="user.password">
<input type="button" value="提交" @click="fun">
</form>
</div>
new Vue({
el:"#app",
data:{
user:{
username:"haha",
password:"123"
}
},
methods:{
fun:function(){
this.user.username="xixi";
this.user.password="1245";
}
}
})
- v-bind单向数据绑定
<div id="app">
<!-- v-bind:可以简写为：
v-bind是单向绑定：只是第一次读取的时候再vue里面取值-->
<font v-bind:color="rs1">hello</font>
<font :color="rs2">vue</font>
</div>
new Vue({
el:"#app",
data:{
rs1:"red",
rs2:"blue",
id:1
}
});
- v-for遍历数组
<div id="app">
<ul>
<li v-for="(value,index) in arr">{{index}} and {{value}}</li>
</ul>
</div>
new Vue({
el:"#app",
data:{
arr:["a","b","c","d"]
}
})
- v-for遍历对象
<div id="app">
<ul>
<li v-for="(value,key) in user">{{value}} and {{key}}</li>
</ul>
</div>
new Vue({
el:"#app",
data:{
user:{id:1,username:"haha",age:12}
}
});
- v-for遍历多个对象
<div id="app">
<table border="1">
<tr>
<td>序号号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="(p,index) in products">
<td>{{index+1}}</td>
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
</tr>
</table>
</div>
new Vue({
el:"#app",
data:{
products:[
{id:1,name:"电视机",price:2000},
{id:2,name:"洗衣机",price:2000}
]
}
})
- v-if与v-show
<div id="app">
<!-- v-if：如果是false的话就是不进行渲染，内存更大
v-show:如果是false的话就是设置display:none，相当于有意见渲染了元素，但是进制样式没有显示而已
-->
<span v-if="flag">haha</span>
<span v-show="flag">xixi</span>
<button @click="fun">按钮</button>
</div>
new Vue({
el:"#app",
data:{
flag:"ture"
},
methods:{
fun:function () {
this.flag=!this.flag;
}
}
})