文本指令（操作文本相关）：
v-html:把变量的内容当html渲染到标签中去（字符串是标签，会完整渲染）
v-text:把变量内容当字符串写到到标签中（字符串是标签，不会渲染成标签），如果原来标签有内容，会去掉 -可以完成跟 {{}} 一样的功能，但是还是不一样的
v-show：只能跟 true 或 false 或 表达式运算结果是布尔类型，控制标签的显示与否
v-if ：只能跟 true 或 false 或 表达式运算结果是布尔类型，控制标签的显示与否
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<script src="./plugins/bootstrap-3.4.1/css/bootstrap.min.css"></script>
<title>标题</title>
</head>
<body>
<div id="app">
<button class="btn btn-danger" @click="handleClick">点这里康康妹子</button>
<br>
<button @click="handleShow">点击图片显示或者消失</button>
<br>
<img v-if="zs" src
<script>
var vm = new Vue({
el:'#app',
data:{
zs:true,
},
methods:{
handleClick(){
alert('妹子')
},
handleShow(){
this.zs=!this.zs
}
}
})
</script>
</body>
</html>事件指令：
属性指令：
v-bind:属性名="变量"
-可以绑定标签的任意属性 -v-bind可以简写成 : -----> :属性='变量'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="app">
<h1>点我随机弹美女图片</h1>
<button @click="handleClick">点我</button>
<br>
<img :src="url" alt="" width="500px" height="500px">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
]
},
methods: {
handleClick() {
this.url = this.list[Math.floor(Math.random()*4)];
}
}
})
</script>
</html>style和class：
class的属性可以绑定:字符串，数组，对象
style属性可以绑定:字符串，数组，对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>标题</title>
<style>
.red {
color: crimson;
}
.back {
background: greenyellow;
}
.size {
font-size: 50px;
}
</style>
</head>
<body>
<div id="app">
<h1>class的三种绑定方式</h1>
<div :class="class_obj">
这是一个div
</div>
<hr>
<h1>style的三种绑定方式</h1>
<div :>
这是第二个div
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
class_str: 'red size',
class_list: ['red', 'size'],
class_obj: {red: true, size: false, back: false},
style_str: 'font-size: 50px;background: pink',
style_list: [{'font-size': '50px'}, {'background': 'pink'}, {'color': 'green'}],
style_obj: {fontSize: '50px', background: 'pink', color: 'green'},
},
methods: {}
})
</script>
</html>条件渲染：
v-if v-else-if v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>标题</title>
<style>
</style>
</head>
<body>
<div id="app">
<p v-if="score>90">优秀</p>
<p v-else-if="score>70 && score<=90">良好</p>
<p v-else-if="score>60 && score<=70">及格</p>
<p v-else>不及格</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 77,
},
})
</script>
</html>列表渲染：
v-for 指令 -可以循环：数组 v-for="(url,index) in urls" 位置不能换 -可以循环：对象 v-for="(value,key) in obj" 如果只接收一个值，这个值就是value -可也循环：数字 v-for="i in num" 从1开始，循环到数字的个数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>标题</title>
<style>
</style>
</head>
<body>
<div id="app">
<h1>一行行显示在页面中</h1>
<ul>
<li v-for="(url,index) in urls">
<h3>第{{index + 1}}张图片</h3>
<img :src="url" alt="" height="100px" width="100px">
</li>
</ul>
<h1>循环对象</h1>
<p v-for="value in obj">value值为：{{value}}</p>
<h1>循环数字</h1>
<p v-for="i in num">循环到了第：{{i}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
obj: {name: 'kunkun', age: 19, bobby: '篮球'} ,
num:4
},
})
</script>
</html>
