vue指令和插值是怎样的，怎样应用
Admin发表于 2022-11-12 17:41:48320 次浏览
在这篇文章中我们会学习到关于“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">{{aInfo.title}}</a>
<!--简写-->
<a :href="aInfo.addr">{{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指令和插值是怎样的，怎样应用的介绍啦，需要的朋友可以参考上述内容，希望对大家有帮助，想要了解更多，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
标签：
vue指令和插值
相关信息推荐
2022-05-24 17:39:54
2022-05-17 11:49:38
2022-09-16 17:55:37
2022-12-14 11:21:38
2022-08-19 17:53:01
2022-08-19 17:51:59
vue指令和插值
判断数组元素是否重复
Go中三个点
bootstrap技术
sql无法连接服务器
go自动重载工具
网站导航优化
Oracle忘记密码
video标签
Java环境
vue组件怎么传值
音乐播放器
增强算术赋值
netcore
文心一言
Golang类型转换库
object方法
python多态
java"弱" 引用
python中datetime
组件化
go语言编译
表格行内编辑
linux du命令
删除数据库
php中construct
php实现在线聊天
go module
php制作留言板
php redis
2022-02-25 17:19:26
2022-01-24 19:23:44
2022-01-04 18:53:44
2022-01-26 18:39:38
2021-11-20 17:46:01
2022-01-18 18:00:09
2022-01-13 18:58:11
2022-01-24 19:23:57
2021-11-22 17:53:55
2021-11-20 17:45:40
群英网络助力开启安全的云计算之旅
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2019 群英网络 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号
