1、v-bind
当我们需要为我们的html标签中的属性动态绑定数据时
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
[v-cloak]{
display: none
}
</style>
<body>
<div id="app">
<a v-bind:href="URL">百度一下</a>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
URL: "www.baidu.com"
},
})
</script>
</body>
</html>
结果如下:
语法糖形式(简写): v-bind 等同于 :
2、v-bind之绑定class属性
- 对象语法
- 数组语法
对象语法
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active{
color: red;
}
</style>
<body>
<div id="app">
<h1 class="test" :class="{'active' : true}">hello world111111</h1>
<h1 :class="{'active' : showRed}">hello world22222</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
showRed: true
},
})
</script>
</body>
</html>
结果如下:
为true时,会为class添加该值,并且如果本身class有值,会追加在后面
也可以传多个对象
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active{
color: red;
}
</style>
<body>
<div id="app">
<h1 class="test" :class="{'active' : true}">hello world111111</h1>
<h1 :class="{'active' : showRed,'line' : isline}">hello world22222</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
showRed: true,
isline: true
},
})
</script>
</body>
</html>
数组语法
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active{
color: red;
}
</style>
<body>
<div id="app">
<h1 :class="message">hello world111111</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
message: ['html',"java","python"]
},
})
</script>
</body>
</html>
3、v-bind之style
- 对象语法
- 数组语法
对象语法
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<h1 :style="{'color' : colorValue,'fontSize' : fontValue +'px'}">hello world111111</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
colorValue: "red",
fontValue: "22"
},
})
</script>
</body>
</html>
4、v-on
为我们的事件添加监听器
如为我们的点击事件添加监听器:
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<button v-on:click="btn">点击</button> {{msg}}
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
msg: "hello world"
},
methods:{
btn : function(){
this.msg="点击了"
}
}
})
</script>
</body>
</html>
语法糖(简写): v-on 等同于 @
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<button @click="count++">增1</button> {{count}}
<button @click="btn">减1</button>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
count: 0
},
methods:{
//Es6 语法: 省略:function
btn(){
this.count--
}
}
})
</script>
</body>
</html>
当函数需要传值时
当函数需要传值,而不传时
默认会传浏览器的event事件
当函数既要传值,又要event事件时
v-on之修饰符
- stop
- prevent
- .{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调。
- once
stop:阻止冒泡事件
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<span @click="btn2">
<button @click="btn">点击</button>
span区域
</span>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
count: 0
},
methods:{
//Es6 语法: 省略:function
btn(){
console.log("button区域。。。")
},
btn2(){
console.log("span区域。。。")
}
}
})
</script>
</body>
</html>
span标签包含了button,发现点击button时,span事件也被触发了(冒泡事件)
加了修饰符stop后
prevent阻止默认事件
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<a href="www.baidu.com" @click="btn">点击</button>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
count: 0
},
methods:{
//Es6 语法: 省略:function
btn(){
console.log("button区域。。。")
}
}
})
</script>
</body>
</html>
点击a标签会跳转网页
当使用修饰符prevent
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<a href="www.baidu.com" @click.prevent="btn">点击</button>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
count: 0
},
methods:{
//Es6 语法: 省略:function
btn(){
console.log("button区域。。。")
}
}
})
</script>
</body>
</html>
a标签失去了原来的跳转事件
.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调。
输入时按回车键才会执行。
once:只触发一次
不管点击多少次,只触发一次
5、computed计算属性
但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示,比如我们有name1和name2两个变量,我们需要显示完整的名称。 但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<h1 >{{name1}} {{name2}}</h1>
<h1 >{{finalName}}</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
name1: "kobe",
name2: "james"
},
methods:{
//Es6 语法: 省略:function
btn(){
console.log("button区域。。。")
}
},
computed:{
finalName(){
return this.name1 +" "+this.name2
}
}
})
</script>
</body>
</html>
计算属性原理:每个计算属性都有set、get方法,计算属性默认调用的是get方法,return回来的值就是计算属性的值。
调用set方法
计算属于与函数的对比:计算属性有缓存,性能更佳
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<h1 >{{ getFinalName()}}</h1>
<h1 >{{ getFinalName()}}</h1>
<h1 >{{ getFinalName()}}</h1>
<h1>{{finalName}}</h1>
<h1>{{finalName}}</h1>
<h1>{{finalName}}</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
name1: "kobe",
name2: "james",
},
methods:{
//Es6 语法: 省略:function
getFinalName(){
console.log("函数执行了。。")
return this.name1+" "+this.name2
}
},
computed:{
finalName(){
console.log("计算属性执行了。。")
return this.name1+" "+this.name2
}
}
})
</script>
</body>
</html>
6、v-if
当我们需要判断标签是否生效时(true生效)
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<h1 v-if="score > 90">优秀</h1>
<h1 v-else-if="score > 80">良好</h1>
<h1 v-else="score >= 60">及格</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
score: 82
},
})
</script>
</body>
</html>
v-if 小案例:切换登录方式
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<label for="phone" v-if="check">
<input type="text" name="phone" id="phone" placeholder="请输入手机号"/>请输入手机号
</label>
<label for="email" v-if="!check">
<input type="text" name="email" id="email" placeholder="请输入邮箱"/>请输入邮箱
</label>
<br>
<button @click="btn">切换登录方式</button>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
check: true
},
methods:{
btn(){
this.check=!this.check
}
}
})
</script>
</body>
</html>
如输入在没有文本输入的情况下,按切换登录按钮,没问题。
但是在输入文本后再按切换登录方式,发现有问题,输入的文本也带过去了。
原因:这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
解决方式:如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key并且我们需要保证key的不同
7、v-show
跟v-if一样可以决定元素是否要被渲染(true时渲染)
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<h1 v-if="check">v-if方式</h1>
<h1 v-show="check">v-show方式</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
check: true
},
methods:{
btn(){
this.check=!this.check
}
}
})
</script>
</body>
</html>
可以看出不同:v-show是直接添加display:none属性,v-if为直接删除属性,在需要频繁的显示隐藏时,v-show性能更佳
8、v-for
当我们需要遍历元素时。
- 遍历数组
- 遍历对象
遍历数组
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies ">{{index}} {{item}}</li>
</ul>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
movies: ["海贼王","火影忍者","七龙珠"]
}
})
</script>
</body>
</html>
遍历对象
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<li v-for="(value,key,index) in students ">{{index}} {{key}} {{value}}</li>
</ul>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
students: {
info:
{
"id":0,
"name": "xian",
"age": 18
}
}
}
})
</script>
</body>
</html>
官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性
检测数组更新
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies ">{{index}} {{item}} </li>
</ul>
<ul>
<li v-for="(item,index) in testSort ">{{index}} {{item}} </li>
</ul>
<button @click="btn">点击</button>
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
movies: ["火影忍者","海贼王","七龙珠","盗梦空间"],
testSort: ["a","b","c","g","e"]
},
methods:{
btn(){
//末尾弹出一个元素
//this.movies.pop()
//末尾插入元素
// this.movies.push("aaa","bbb")
//末尾弹出一个元素
// this.movies.shift()
//头部插入元素
// this.movies.unshift("aaa","bbbb")
//从第一个位置开始,删除2个元素
// this.movies.splice(1,2)
//从第一个位置开始,插入2个元素
// this.movies.splice(1,0,"aa","bb")
//从第一个位置开始,替换2个元素
// this.movies.splice(1,2,"aa","bb")
//排序
// this.testSort.sort()
// this.movies.sort()
//反转元素
this.movies.reverse()
}
}
})
</script>
</body>
</html>
9、v-model
双向绑定,当我们需要把数据绑定在文本框,并且用户更新了文本框输入的值时,也需要把最新值绑定回数据
<html>
<head>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<input type="text" v-model="message"/>
{{message}}
</div>
<script type="text/javascript">
const vue = new Vue({
el: '#app',
data: {
message: "hello world"
}
})
</script>
</body>
</html>
v-model原理:
v-model之radio
v-model之checkbox
v-model之select
v-model之修饰符