vue的指令和插值总结(非常详细)
更新时间：2023年06月29日 11:03:13 作者：敲代码敲到头发茂密
这篇文章主要给大家介绍了关于vue指令和插值的相关资料,大家应该对指令和插值都不陌生,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
引言
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
一、安装vue
直接使用script标签引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
二、Vue模板案例
步骤
1、引入vue框架
2、定义1个盒子（根节点）
3、定义1个script标签3.1、定义js对象（根组件）
3.2、通过vue创建1个应用
3.3、将应用挂载到根节点（第二步中创建的盒子）
data()：存放页面中显示数据的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!--2、定义1个盒子（根节点）-->
<div id='app'>
<h1>{{title}}</h1>
<h1>{{name}}</h1>
</div>
<!--3、定义一个script标签-->
<script>
//3.1、定义js对象(根组件)
const obj={
//data():存放页面中存放数据的地方
data(){
return{
title:'kobe',
name:'cc'
}
}
}
//3.2、通过vue创建1个应用
const app=Vue.createApp(obj)
//3.3、将应用挂载到根节点（第二步中创建的盒子）
app.mount('#app')
</script>
</body>
</html>三、基础模板（记住）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'></div>
<script>
Vue.createApp({
data(){
return{
}
}
}).mount('#app')
</script>
</body>
</html>四、vue的指令和插值
1、{{}}：插值表达式的语法
{{}}：可以在html中引用data中定义的数据<h1>{{name}}</h1>
2、v-text：填充纯文本内容（data中的值）
效果和innerText一样<h1 v-text='name'></h1>
3、v-html：填充html（data中的值）
效果和innerHtml一样<div v-html='desc'></div>
4、v-pre：填充原始数据
防止vue对标签进行渲染（标签中写的什么，就显示什么）<div v-pre>显示两个花括号，中间为js：{{}}</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
<h1>{{sex}}</h1>
<h2>info中的a1:{info.a1}</h2>
<h2>info中的a2:{info.a2}</h2>
<hr>
<h1 v-text='name'></h1>
<h1 v-text='arr[0]'></h1>
<div v-html='desc'></div>
<div v-pre>显示两个花括号，中间为js：{{}}</div>
</div>
<script>
//obj是vue的组件对象
const obj={
//data方法（返回的是vue组件对象的属性）——》页面上要显示的数据全部放到这里
data(){
return{
name:'2022',
age:18,
sex:'男',
info:{
a1:'66',
a2:'88'
},
desc:'<h1>js</h1>',
arr:[8,24,23,24,25,66]
}
}
}
//3.2、通过vue创建1个应用
const app=Vue.createApp(obj)
//3.3、将应用挂载到根节点（第二步中创建的盒子）
app.mount('#app')
</script>
</body>
</html>效果展示：
5、v-bind：属性绑定
语法：
v-bind:属性=‘值’
简写 :属性=‘值’
<a v-bind:href="aInfo.addr">{{aInfo.title}}</a>
简写
<a :href="aInfo.addr">{{aInfo.title}}</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<a v-bind:href="aInfo.addr" rel="external nofollow" rel="external nofollow" >{{aInfo.title}}</a>
<!--简写-->
<a :href="aInfo.addr" rel="external nofollow" rel="external nofollow" >{{aInfo.title}}</a>
</div>
<script>
Vue.createApp({
data(){
return{
aInfo:{
title:'百度',
addr:'http://www.baidu.com'
}
}
}
}).mount('#app')
</script>
</body>
</html>样式绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.js{
width:200px;
height:200px;
background: red;
}
</style>
</head>
<body>
<div id='app'>
<!--样式绑定：class属性绑定-->
<div :class='{js:isjs}'>js</div>
</div>
<hr />
<!--样式绑定 style属性-->
<div :style="s1">py</div>
<script>
Vue.createApp({
data(){
return{
isjs:false,
s1:{
width:'300px',
height:'200px',
background:'red',
}
}
}
}).mount('#app')
</script>
</body>
</html>6、v-on：事件绑定
语法：v-on：事件名称=‘执行的方法’
简写
@事件名=‘执行的方法’
<button v-on:click='switchShow'>切换显示</button>
简写
<button @click='switchShow'>切换显示</button>
7、v-show：控制元素显示和隐藏的指令
控制元素显示隐藏的指令：
v-show 值为True则显示，值为false为隐藏
<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>
methods：定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数
例如
switchShow()
定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<button v-on:click='switchShow'>切换显示</button>
<!--<button @click='switchShow'>切换显示</button>-->
<!--控制元素显示隐藏的指令：v-show
值为True则显示，值为false为隐藏
-->
<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>
</div>
<script>
Vue.createApp({
//定义页面上显示数据的（组件的属性）
data(){
return{
status:true
}
},
//定义页面操作过程中调用的函数（vue组件的方法）
//注意点：不要直接把方法定义为箭头函数
methods:{
switchShow(){
//在方法中可以通过this获取组件中的数据
//方法中的this代表组件中的对象
this.status=!this.status
}
}
}).mount('#app')
</script>
</body>
</html>8、v-model：数据的双向绑定
双向绑定只用于表单和组件
页面修改数据会变，数据改变，页面也会改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!--属性绑定是单向的-->
<!--<div id='app'>
<div>账号:<input type="text" :value='user'></div>
<div>密码:<input type="password" :value='pwd'></div>
</div>-->
<!--双向绑定-->
<div id='app'>
<div>账号:<input type="text" v-model='user'></div>
<div>密码:<input type="password" v-model='pwd'></div>
<button @click='login'>登录</button>
</div>
<script>
Vue.createApp({
data(){
return{
user:"root",
pwd:123456
}
},
methods:{
login(){
//发送请求到后端，
console.log('提交了登录')
console.log(this.user,this.pwd)
}
}
}).mount('#app')
</script>
</body>
</html>9、v-if、v-else-if、v-else：条件渲染
通过条件来控制元素是否渲染到页面
v-if
v-else-if
v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<h1 v-if='item.result==="success"' style="color: green;">{{item}}</h1>
<h1 v-else-if='item.result===fail' style="color: red;">{{item}}</h1>
<h1 v-else>{{item}}</h1>
</div>
<script>
Vue.createApp({
data(){
return{
item:{
case_id:1,
title:'用例1',
result:"success"
},
}
}
}).mount('#app')
</script>
</body>
</html>10、v-for：遍历对象、数组
案例：根据不同的结果，展示不同文字颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<table border='1'>
<!--表头-->
<tr>
<th>id</th>
<th>title</th>
<th>result</th>
<th>操作</th>
</tr>
<!--表格-->
<tr v-for='item in cases'>
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<!--条件渲染-->
<td v-if='item.result==="success"' style="color: green;">{{item.result}}</td>
<td v-else-if='item.result==="error"' style="color:blue;">{{item.result}}</td>
<td v-else-if='item.result==="fail"' style="color:tomato;">{{item.result}}</td>
<td v-else>{{item.result}}</td>
<td></td>
</tr>
</table>
</div>
<script>
Vue.createApp({
data(){
return{
cases:[
{
case_id:1,
title:'用例1',
result:"success"
},
{
case_id:2,
title:'用例2',
result:"fail"
},
{
case_id:3,
title:'用例3',
result:"error"
},
{
case_id:4,
title:'用例4',
result:"success"
},
]
}
}
}).mount('#app')
</script>
</body>
</html>
总结
到此这篇关于vue的指令和插值总结的文章就介绍到这了,更多相关vue指令和插值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了探索Vue高阶组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了 用Vue Demi 构建同时兼容Vue2与Vue3组件库，我们通过考虑其功能、工作原理以及如何开始使用它来了解 Vue Demi，下面我们一起进入文章学起来吧2022-02-02
这篇文章主要介绍了vue关于下载文件常用的几种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在前端开发中,列表的虚拟滚动是一种常见的优化手段,可以大大提升页面性能,在Vue3中,我们可以通过一些技巧来实现列表的虚拟滚动,本文将介绍如何使用Vue3实现列表的虚拟滚动,让你的页面加载更快、更流畅,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue修改swiper框架轮播图小圆点的样式不起作用的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue如何实现表单多选并且获取其中的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Element UI Upload 组件上传图片可删除、预览功能
这篇文章主要介绍了Element UI Upload 组件 上传图片可删除、预览，设置只允许上传单张 / 多张图片的操作,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-11-11
下面小编就为大家带来一篇vue2 router 动态传参,多个参数的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了Vue中使用js-cookie详情，文章围绕js-cookie的相关资料展开详细内容具有一定的的参考价值，需要的小伙伴可以参考一下2022-03-03
功能需求——获取后端接口返回的数据，实现列表数据上滑加载更多下一页数据，下拉数据刷新功能，结合vant-ui框架实现。可直接参考使用2022-09-09
最新评论