插值语法，文本指令，属性指令，事件指令，class和style，条件渲染，列表渲染
插值语法
被vue托管的标签中可以写 {{}} 中可以写：变量，js简单的表达式，函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<p>字符串：{{name}}</p>
<p>数字：{{age}}</p>
<p>列表：{{hobby}}</p>
<p>列表：{{hobby[1]}}</p>
<p>运算：{{10*20+50*80}}</p>
<p>a标签：{{a_url}}</p>
<p>三目运算：{{10>20?'True':'False'}}</p>
<p>函数：</p>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'zhangxin',
age:22,
hobby:['篮球','吉他','打游戏'],
a_url:'<a href="http://www.baidu.com">点我看美女</a>'
}
})
</script>
</html>
文本指令
# 指令系统
-v-xx 写在标签上，任意标签
-v-xx="" ----》原来插值语法中能写的，它都能写，不要再加 {{}}
v-html:让HTML渲染成页面
v-text:标签内容显示js变量对应的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<p v-html="a"></p>
<p v-text="a"></p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
a:'<a href="https://www.baidu.com">百度一下</a>'
}
})
</script>
</html>
v-show：显示/隐藏内容
<body>
<div id="app">
<!-- <p v-html="a"></p>-->
<!-- <p v-text="a"></p>-->
<h3>v-show：显示/隐藏内容</h3>
<img v-show="img" src="https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg" alt="" width="330px" height="330px">
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
// a:'<a href="https://www.baidu.com">百度一下</a>'
img:true
// img:false
}
})
</script>
</html>
v-if：显示/删除内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<p>快来看美女啊</p>
<div v-if="img" >
<img src="https://img2.woyaogexing.com/2023/02/10/3ff567c7c4a15f267249f5240f22b1f3.jpeg" alt="" width="330px" height="330px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
// a:'<a href="https://www.baidu.com">百度一下</a>'
// img:true
img:false
}
})
</script>
</html>
属性指令
1.写在标签上的name，class，href,src,id.....->属性
2.v-bind:属性名='变量'
3.简写成：v-bind:属性名='变量' ------> :属性名='变量'
v-bind:class=’js变量’可以缩写成：:class=’js变量’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<h2>属性指令</h2>
<button @click="handleClick">点我看美女哦</button>
<br>
<img v-bind:src="url" alt="" width="330px" height="330px">
<br>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{ url:'https://img2.woyaogexing.com/2023/02/02/7c1f5d00a8943dd6a19ce4ef3f0f8c51.png'
},
methods:{
handleClick(){
//点击后更换为下面这个
this.url = 'https://img2.woyaogexing.com/2023/02/02/ebd8365fd22819abb50f186338b95021.jpeg'
}
}
})
</script>
</html>
事件指令
v-on:click 可以缩写成@click
1.放在标签上：v-on:事件='函数'
2.v-on:事件名='函数'简写成@事件名='函数'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<h2>事件指令</h2>
<button @click="handleClick">点我消失</button>
<div v-if='show'>
<img src="https://img2.woyaogexing.com/2023/02/06/2447c0e98bd5ddaf4a8ee3cc5f145925.jpeg" alt="" width="330px" height="330px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
show:true,
},
methods:{
// handleClick:function (){
// this.show = !this.show
// }
//es6的语法
handleClick(){
this.show = !this.show
}
}
})
</script>
</html>
小案例：点击按钮，随机切换美女图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<button @click="handleClick">点我看美女</button>
<div >
<img :src="url" alt="" width="330px" height="330px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
url:'https://img2.woyaogexing.com/2023/02/10/3ff567c7c4a15f267249f5240f22b1f3.jpeg',
url_list:[
'https://img2.woyaogexing.com/2023/01/26/87ca7217ea20bd07d6726fafcce19d35.jpg',
'https://img2.woyaogexing.com/2023/01/26/c891b4fb63669935ea53fefaf59dcf7f.jpg',
'https://img2.woyaogexing.com/2023/02/04/f7c039661120073991f8a43d6204f1a4.jpeg',
'https://img2.woyaogexing.com/2023/02/04/3a374e04e7c8ca0762a5d4b325e4acf7.jpg',
'https://p.qqan.com/up/2022-4/16509377181962095.jpg',
'https://p.qqan.com/up/2022-11/16690792068397062.jpg',
'https://p.qqan.com/up/2022-10/16669212086948515.png',
'https://p.qqan.com/up/2022-4/16509377183377408.jpg',
'https://p.qqan.com/up/2022-4/16509377181668485.jpg',
'https://p.qqan.com/up/2022-4/16509377183938261.jpg'
]
},
methods:{
handleClick(){
var _this = this
setInterval(function (){
console.log(_this)
var i = Math.round(Math.random()*(_this.url_list.length - 1))
_this.url = _this.url_list[i]
console.log(i)
},1000)
}
}
})
</script>
</html>
class和style
属性指令控制style和class
class可以等于：字符串，数组(用的多)，对象
style可以等于：字符串，数组，对象(用的多)
class可以等于：字符串，数组（用的多），对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<style>
.red{
background-color: darkred;
font-size: 50px;
}
.green{
background-color: darkgreen;
font-size: 50px;
}
</style>
</head>
<body>
<div id="app">
<button @click="handleClick">点我变色</button>
<div :class="class_obj">
今天是情人节，异地恋可真难
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
class_obj:'red'
},
methods:{
handleClick(){
this.class_obj='green'
}
}
})
</script>
</html>
条件渲染
1.写在标签上，控制标签的显示与不显示
2.v-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
3.v-else-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
4. v-else 放在标签上，上面条件都不成立，显示这个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<h3>条件渲染</h3>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80 && score<90">良好</div>
<div v-else-if="score>=60 && score<80">及格</div>
<div v-else>不及格</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
score:88
},
})
</script>
</html>
列表渲染之购物车显示不显示
v-for：放在标签上，可以循环显示多个此标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>v-if+v-for 显示购物车</h1>
<button @click="handleClick" class="btn btn-danger">点我显示</button>
</div>
<div v-if="show">
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: false,
good_list: [
{id: 1, name: '糖果', price: '29'},
{id: 2, name: '口香糖', price: '29'},
{id: 3, name: '芭比娃娃', price: '298'},
{id: 4, name: '彩笔', price: '298'},
]
},
methods: {
handleClick() {
this.show = !this.show
},
}
})
</script>
</html>
