1、v-bind 作用:给html标签的属性绑定。例如、给a标签的href绑定动态的链接;给calss、style绑定动态的属性。
事例代码:
<!-- 给html标签的属性绑定 -->
<div id="app">
<a v-bind:href="link">GoGoGo</a>
<!-- class,style {class名: 加上赋值名} -->
<span v-bind:class="{active:isActive,'text-danger':hasError}" v-bind:style="{color:color1,fontSize:size}">你好</span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
link:"http:www.baidu.com",
isActive:true,
hasError:true,
color1:'red',
size:'36px'
}
})
</script>
事例效果:
2、v-model 作用:实现数据双向绑定。即可以通过改变代码的值,而改变页面的值。也可以通过改变页面的值,从而改变代码中的值。
事例代码:
<div id="app">
精通语言:
<input type="checkbox" v-model="language" value="java">java<br/>
<input type="checkbox" v-model="language" value="PHP">PHP<br/>
<input type="checkbox" v-model="language" value="Python">Python<br/>
选择的语言有{{language.join(",")}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
data:{
language:[],
}
});
</script>
事例效果:
图1
图2
3、v-on 作用:给标签绑定事件, v-on的简写@
事例代码:
<div id="app">
<!-- 事件中直接写js片段 -->
<button v-on:click="num++">点赞</button>
<!-- 事件指定一个回调函数,必须是Vue实例中定义的函数 -->
<button @click="cancle">取消点赞</button>
<h1>有{{num}}个赞</h1>
<!-- 事件修饰符 -->
<!-- 这里如果不写冒泡阻值事件,当你点击小的div的时候大的div的事件也被触发 -->
<!-- 在click的后面添加.stop ,.once这个是只点击一次-->
<div style="border:1px solid red;padding:20px;" v-on:click.once="hello">
大 div
<div style="border:1px solid blue;padding:20px" @click.stop="hello">
小 div<br/>
<!-- 这里原本是先弹出提示框,然后在去百度 在click的后面添加.prevent="你想调用的方法" ,添加这个.prevent是阻值前面的功能或者重写定义 -->
<!-- .stop是阻值默认行为 -->
<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
</div>
</div>
<!-- 按键修饰符 -->
<input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br/>
提示:
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
num:1
},
methods: {
cancle(){
this.num--;
},
hello(){
alert("你被点击了");
}
},
})
</script>
事例效果: 这里的有几个比较特殊的实际就,不在做演示了。
4、v-for 用来变量对象
事例代码:
<div id="app">
<ul>
<li v-for="(user,index) in users" v-if="user.gender=='女'">
<!-- 1、显示user信息:v-for="item in items" -->
当前索引值: {{index}} {{user.name}} ==> {{user.gender}} ==> {{user.age}} <br/>
<!-- 2、获取数组下标:v-for="(item,index) in items" -->
<!-- 3、遍历对象:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object" -->
对象信息: <span v-for="(v,k,i) in user">{{k}} == {{v}} == {{i}};</span>
<!-- 4、遍历的时候都加上 :key来区分不同的数据,提高vue渲染效率 -->
</li>
</ul>
<ul>
<li v-for="(num ,index) in nums" :key="index">{{num}}, {{index}}</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
users:[{name:'柳岩',gender:'女',age:'21'},
{name:'张三' , gender:"男" , age:"18"},
{name:'范冰冰', gender:'女',age:'24'},
{name:'刘亦菲', gender:'女' , age:'18'},
{name:'古力娜扎',gender:'女',age:'25'}],
nums:[1,2,3,4,4]
}
})
</script>
事例效果:
5、v-if和v-show 作用:v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。v-show,当得到结果为true,所在的元素才会被显示。
事例代码:
<div id="app">
<button v-on:click="show=!show">点我呀!</button>
<!-- 1、使用v-if显示 -->
<h1 v-if="show">if=看到我</h1>
<!-- 2、使用v-show显示 -->
<h1 v-show="show">show=看到我</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
show:true,
}
})
</script>
事例效果:带有v-if的标签消失,而v-show的标签则不显示罢了。
6、v-else和v-else-if 作用:这两个判断和java的中if-else的意思是一样的。
事例代码:
<div id="app">
<button v-on:click="random=Math.random()">点我呀!</button>
<span>{{random}}</span>
<h1 v-if="random>=0.75">看到我啦 ? >=0.75</h1>
<h1 v-else-if="random>=0.5">看到我啦 ? >=0.5</h1>
<h1 v-else-if="random>=0.2">看到我啦 ? >=0.2</h1>
<h1 v-else>看到我啦 ? >=0.2</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{random:1}
})
</script>
事例效果:点击按钮随机生成一个随机数,进行判断