Vue基础(一):常用的vue指令系列文章目录前言一、插值表达式二、v-text和v-html三、v-if和v-show四、v-bind指令五、v-on指令六、v-for列表渲染指令七、v-model指令总结

92 阅读 0 评论 61 点赞

我是靠谱客的博主活力煎饼，最近开发中收集的这篇文章主要介绍Vue基础(一):常用的vue指令系列文章目录前言一、插值表达式二、v-text和v-html三、v-if和v-show四、v-bind指令五、v-on指令六、v-for列表渲染指令七、v-model指令总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Vue基础(一)

系列文章目录

提示：写这篇文章完全是对自己最近所学笔记做一个总结

文章目录

- Vue基础(一)
系列文章目录
前言
一、插值表达式
二、v-text和v-html
三、v-if和v-show
四、v-bind指令
五、v-on指令
六、v-for列表渲染指令
七、v-model指令
总结

前言

复习和回顾Vue基础知识：
例如：随着前端框架的流行,学会使用一门前端框架,能让你的代码量减少很多

一、插值表达式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01插值表达式</title>
<script src="js/vue.js" charset="utf-8"></script>
</head>
<!-- 插值表达式{{ }} -->
<body>
<div id="app">
{{ msg }}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
msg:'hello world'
}
})
</script>
</body>
</html>

{{ }}插值表达式用来插入数据

二、v-text和v-html

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02v-text和v-html</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- v-text显示文本 -->
<!-- v-html显示标签 -->
<!-- <div id="app" v-text="msg"></div> -->
<div id="app" v-html="html"></div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
msg:'你好世界',
html:'<h1>你好世界</h1>'
}
})
</script>
</body>
</html>

v-text用来显示文本,v-html用来显示html标签

三、v-if和v-show

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03v-if和v-show</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- v-if
v-else v-else-if
当为false，直接删除整个div-->
<!-- 初始化没有渲染开销，有更高的切换开销 -->
<div v-if="IsShow">
显示
</div>
<div v-else>
隐藏
</div>
<!-- v-show后面跟的是布尔型 当为false，则添加display：none 改变样式-->
<!-- 初始化渲染开销大 -->
<h3 v-show="show">
你好世界
</h3>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
IsShow:Math.random()>0.5,
show:true
}
})
</script>
</body>
</html>

当页面切换频繁少时，用v-if,例如登录注册页面,当页面切换频繁多时，则用v-show

四、v-bind指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind指令</title>
<style type="text/css">
.active{
color: red;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 绑定指令 -->
<div id="app">
<a v-bind:href="res.url" v-bind:title="res.title">{{res.name}}</a>
<img :src="imgSrc" alt="">
<h3 v-bind:class="{active:isActive}">v-bind的用法</h3>
<!-- active:isActive 如果isActive为true，则给h3标签添加一个类名class="active" -->
<h4 :aaa="res.url"></h4>
<!-- 也可以绑定自定义属性 -->
<h4 :style='{color:isColor,fontSize:fontSize+"px"}'>你好世界</h4>
<!-- 行内样式的控制 -->
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
res:{
title:'百度一下',
name:'百度',
url:'https://www.baidu.com'
},
imgSrc:'img/1.jpg',
isActive:true,
isColor:'green',
fontSize:30
}
})
</script>
</body>
</html>

v-bind:src 简写形式 :src

五、v-on指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令</title>
<!-- v-on绑定DOM事件 -->
<style type="text/css">
.box{
height: 200px;
width: 200px;
background-color: red;
}
.active{
background-color: green;
}
.imgs{
display: none;
}
.img{
width: 200px;
height: 200px;
background-color: #008000;
display: block;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h3>{{num}}</h3>
<button v-on:click="handleClick">+1</button>
<!-- v-on:click="num+=1" 直接跟表达式 -->
<!-- v-on:click="handleClick" 跟事件名，在methods里面写事件 -->
<div class="box" :class="{active:isActive}"></div>
<button @click='changeClick'>切换</button>
<!-- div的显示和隐藏 -->
<div class="imgs" v-bind:class="{img:isimg}"></div>
<button v-on:click="isShow">显示</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
num:0,
isActive:false,
isimg:false
},
methods:{
handleClick(){
this.num+=1;
},
changeClick(){
// 取反
this.isActive=!this.isActive;
},isShow(){
this.isimg=!this.isimg;
}
}
})
</script>
</body>
</html>

v-on:click简写为@click

六、v-for列表渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-for能遍历数组，还能遍历对象 -->
<div>
<ul>
<!-- v-bind:key='item.id' -->
<li v-for="(item,index) in menus" :key='item.id'>
<!-- 当前的索引则为（item,index）in menus -->
<h3>{{index}} - id:{{item.id}}</h3>
<h3>name:{{item.name}}</h3>
</li>
<ol>
<!-- <li v-for="val in obj">{{val}}</li> -->
<li v-for="(val,key) in obj">{{key}} - {{val}}</li>
</ol>
</ul>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
menus: [
{ id: 1, name: 'Index1' },
{ id: 2, name: 'Index2' },
{ id: 3, name: 'Index3' },
{ id: 4, name: 'Index4' }
],
obj:{
title: 'Vue框架',
author: '1223123'
}
},
})
</script>
</body>
</html>

在使用v-for的时候给每一个元素添加属性 :key=’’ ,如果有id则绑定id,没有id则绑定index,给Vue一个提示，追踪每一个节点的身份，重新排序现有元素

七、v-model指令

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue的双向绑定v-model</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input type="text" v-model="msg">
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'Home'
},
})
</script>
</body>
</html>

通常我们会用v-model来进行数据的双向绑定

总结

以上就是今天要讲的内容，本文仅仅简单介绍了vue的常用指令

最后

以上就是活力煎饼为你收集整理的Vue基础(一):常用的vue指令系列文章目录前言一、插值表达式二、v-text和v-html三、v-if和v-show四、v-bind指令五、v-on指令六、v-for列表渲染指令七、v-model指令总结的全部内容，希望文章能够帮你解决Vue基础(一):常用的vue指令系列文章目录前言一、插值表达式二、v-text和v-html三、v-if和v-show四、v-bind指令五、v-on指令六、v-for列表渲染指令七、v-model指令总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：vue
浏览次数：92 次浏览
发布日期：2023-10-24 06:16:23
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_22_f1_14_j_26_z.html

Vue基础(一):常用的vue指令系列文章目录前言一、插值表达式二、v-text和v-html三、v-if和v-show四、v-bind指令五、v-on指令六、v-for列表渲染指令七、v-model指令总结

概述

Vue基础(一)

系列文章目录

文章目录

前言

一、插值表达式

二、v-text和v-html

三、v-if和v-show

四、v-bind指令

五、v-on指令

六、v-for列表渲染指令

七、v-model指令

总结

最后

评论列表共有 0 条评论

发表评论取消回复

Vue基础(一):常用的vue指令系列文章目录前言一、插值表达式二、v-text和v-html三、v-if和v-show四、v-bind指令五、v-on指令六、v-for列表渲染指令七、v-model指令总结

概述

Vue基础(一)

系列文章目录

文章目录

前言

一、插值表达式

二、v-text和v-html

三、v-if和v-show

四、v-bind指令

五、v-on指令

六、v-for列表渲染指令

七、v-model指令

总结

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复