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>
image-20230214210216101

二、指令

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>
image-20230214235750372

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>
image-20230214235917377

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>
image-20230215000147798

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是将标签直接删除

image-20230215000621631

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>
image-20230215012557871

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>
image-20230215013610322
posted @   Duosg  阅读(145)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示