Vue - 2 插值语法与指令系统
目录
Vue - 2 插值语法与指令系统
一、插值语法
Vue中的插值语法必须写在标签内部，而DTL(Django Template Language)则可以写在标签的属性中
语法
<body>
<div id="app">
{{变量名}}
</div>
</body>
<script>
// 配置项 通过key:value的形式配置
var vm = new Vue({
el: '#app', // 标签选择
// data是要插入的数据值，已k:v形式编写
data: {
title: 'Vue插值语法',
desc: 'vue框架提供的插值语法，将数据渲染到对应的变量名中',
}
})
</script>
插值语法中可以放变量、对象取值、数组取值、简单的js语法、函数()
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- div标签会被vue托管-->
<div id="app">
<!-- 插值语法：将数据值渲染到变量name中-->
<p>{{title}}</p>
<p>简介：{{desc}}</p>
<p>(数组)：{{arrayList}}-----{{arrayList[0]}}</p>
<p>(对象取值)：{{msg}}-------{{msg.name}}</p>
<p>(运算){{1+2*20}}</p>
<p>(三目运算符【条件?'符合了':'不符合了'】){{100>90?'符合条件':'不符合条件'}}</p>
<p>(标签){{a_url}}</p>
<p>( 函数() )</p>
</div>
</body>
<script>
// 配置项 通过key:value的形式配置
var vm = new Vue({
el: '#app',
data: {
title: 'Vue插值语法:可以存放的类型',
desc: 'vue框架提供的插值语法，将数据渲染到对应的变量名中',
arrayList:['榆木','玉米'],
msg:{name:'duo',age:18},
a_url:'<a href="http://www.baidu.com">点我看美女</a>',
}
})
</script>
</html>
二、指令
1.什么是指令系统？
在Vue中写在标签属性中的，如v-xx形式的统称为指令
- 如
<p v-text="a_url"></p>
2.文本指令
| 指令 | 释义 |
|---|---|
| v-html | 让HTML渲染成页面 |
| v-text | 标签内容渲染成js变量对应的值 |
| v-show | 等于布尔值：为true，标签就显示；为false，标签就不显示(通过样式控制显示不显示) |
| v-if | 等于布尔值：为true，标签就显示；为false，标签就不显示(整个标签之间删除，效率低，控制在dom中删除标签) |
v-html
把字符串的内容渲染成标签，写在标签内部
<h2>v-html</h2>
<p v-html="a_url"></p>
<script>
var vm = new Vue({
el: '#app',
data: {
a_url: '<a href="http://www.baidu.com">点我看美女</a>',
}
})
</script>
v-text
直接把字符串内容渲染在标签内部，等同于插值语法
<div id="app">
<h2>v-text</h2>
<p v-text="a_url"></p>
</div>
<script>
// 配置项 通过key:value的形式配置
var vm = new Vue({
el: '#app',
data: {
a_url: '<a href="http://www.baidu.com">点我看小狗</a>',
}
})
</script>
v-show：显示/隐藏任务
等于布尔值，该标签是否显示，v-show是通过添加css的样式来控制是否显示：display:none
<div id="app">
<h2>v-show</h2>
<img v-show="show" src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2023-02-14-155321.jpg" alt="" width="200px" height="200px">
</div>
<script>
// 配置项 通过key:value的形式配置
var vm = new Vue({
el: '#app',
data: {
show: true,
}
})
</script>
v-if：显示/删除任务
等于布尔值，该标签是否显示。其与v-show不同，底层是通过dom删除标签来展示标签的，当布尔值为false时会将整个标签删除（效率较v-show较低）
<div id="app">
<h2>v-show</h2>
<img v-show="show" src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2023-02-14-155321.jpg" alt="" width="200px" height="200px">
<h2>v-if</h2>
<img v-if="ifShow" src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2023-02-14-155321.jpg" alt="" width="200px" height="200px">
</div>
<script>
// 配置项 通过key:value的形式配置
var vm = new Vue({
el: '#app',
data: {
show: false,
ifShow: false
}
})
</script>
当v-show和v-if 对应的布尔值都是false时候，v-show只是将标签隐藏，而v-if是将标签直接删除
3.属性指令
| 指令 | 释义 |
|---|---|
| v-bind | v-bind:属性名="变量名" |
| : | :属性名="变量名" |
v-bind:属性名='js变量名'
缩写
:属性名='js变量名'
标签上的属性可以绑定变量，以后变量变化，属性的值跟着变化
如：
href、src、name、class、style、height
4.事件指令
通过v-on来讲事件和标签绑定
| 指令 | 释义 |
|---|---|
| v-on | 触发事件（不推荐） |
| @ | 触发事件（推荐） |
| @[event] | 触发event事件（可以是其他任意事件） |
语法
v-on:事件名="函数名"，函数必须写在methods的配置项中
缩写
@:事件名="函数名"
<button v-on:click="handleClick">点我看美女
methods:{
'handleClick':function (){
// alert('美女')
console.log(this) // this 就是当前vue实例，就是vm实例
this.show=!this.show
},
在vue的中，this值得是vue的vm实例，但是当在vm实例中如果又嵌套了一层函数，this的指代有可能不同，注意区分
5.class和style
语法
:属性名='js变量/js语法'
- class
:class='字符串、数组、对象'
对于class推荐使用数组来进行绑定
- style
:style='字符串、数组、对象'
对于style推荐使用对象来进行绑定
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style 和 Class</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
.red {
color: rgba(255, 104, 104, 0.7);
}
.font-20 {
font-size: 20px;
}
.be-bold {
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<p>p标签</p>
<div :class="class_obj">
<p>class的p标签</p>
</div>
<button @click="handleClick">点击放大字体</button>
<div :style="style_obj">
<p>style的p标签</p>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
// class_obj: 'red', // 放1个是字符串
class_obj: ['red', 'font-20', 'be-bold'], // 放2个是数组
// class_obj: { red:true, be-bold:false}, // 也可以放对象
// 数组.push() 从尾部添加1个元素
// 数组.pop() 删除最后1个元素 并返回
// 对象的写法
style_obj: {
color: 'red',
fontSize: '20px'
}
// style_obj: [{background:'red'}, {fontSize:'20px'}]
},
methods: {
handleClick(){
this.style_obj['fontSize']='30px'
}
}
})
</script>
</html>
三、渲染
1.条件渲染
语法
v-if=条件1
绑定给标签，如果条件1成立，该标签就显示；如果条件不成立，该标签就不显示
v-else-if=条件2
绑定给标签，如果条件2成立，该标签就现实；如果条件不成立，该标签就不显示
v-else
绑定给标签，上面条件都不成立，显示这个标签
案例
<div id="app">
<h1>通过分数显示文字</h1>
<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: 99
},
})
</script>
2.循环渲染
语法
<标签 v-for="item in 数组">
{{item.xxx}}
{{item.yyy}}
</标签>
案例
<div id="app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2 class="text-center">循环渲染</h2>
<table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="item in msg" :class="item.background">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: [
{id: "1", name: "duo", age: 18},
{id: "2", name: "jason", age: 18},
{id: "3", name: "justin", age: 18}
]
}
})
</script>
