目录
- js框架
简化DOM操作
双向数据绑定
- 1.01.课程介绍(Av76249419,P1)
- 2.02.Vue基础-简介(Av76249419,P2)
- 3.03.Vue基础-第一个Vue程序(Av76249419,P3)
- 4.04.Vue基础-el挂载点(Av76249419,P4)
- 5.05.Vue基础-data数据对象(Av76249419,P5)
- 6.06.本地应用-介绍(Av76249419,P6)
- 7.07.本地应用-v-text指令(Av76249419,P7)
- 8.08.本地应用-v-html指令(Av76249419,P8)
- 9.09.本地应用-v-on指令基础(Av76249419,P9)
- 10.10.本地应用-计数器(Av76249419,P10)
- 11.11.本地应用-v-show指令(Av76249419,P11)
- 12.12.本地应用-v-if指令(Av76249419,P12)
- 13.13.本地应用-v-bind指令(Av76249419,P13)
- 14.14.本地应用-图片切换(Av76249419,P14)
- 15.15.本地应用-v-for指令(Av76249419,P15)
- 16.16.本地应用-v-on补充(Av76249419,P16)
- 17.17.本地应用-v-model指令(Av76249419,P17)
- 18.18.本地应用-小黑记事本-介绍(Av76249419,P18)
- 19.19.本地应用-小黑记事本-新增(Av76249419,P19)
- 20.20.本地应用-小黑记事本-删除(Av76249419,P20)
- 21.21.本地应用-小黑记事本-统计(Av76249419,P21)
- 22.22.本地应用-小黑记事本-清空(Av76249419,P22)
- 23.23.本地应用-小黑记事本-隐藏(Av76249419,P23)
- 24.24.网络应用-介绍(Av76249419,P24)
- 25.25.网络应用-axios基本使用(Av76249419,P25)
- 26.26.网络应用-axioxs加vue(Av76249419,P26)
- 27.27.网络应用-天知道-介绍(Av76249419,P27)
- 28.28.网络应用-天知道-回车查询(Av76249419,P28)
- 29.29.网络应用-天知道-点击查询(Av76249419,P29)
- 30.30.综合应用-介绍(Av76249419,P30)
- 31.31.综合应用-音乐查询(Av76249419,P31)
- 32.32.综合应用-音乐播放(Av76249419,P32)
- 33.33.综合应用-歌曲封面(Av76249419,P33)
- 34.34.综合应用-歌曲评论(Av76249419,P34)
- 35.35.综合应用-播放动画(Av76249419,P35)
- 36.36.综合应用-播放mv(Av76249419,P36)
- 37.37.总结(Av76249419,P37)
简介
js框架
简化DOM操作
双向数据绑定
地址
https://www.bilibili.com/video/BV12J411m7MG?from=search&seid=17754323736039504500
1.01.课程介绍(Av76249419,P1)
2.02.Vue基础-简介(Av76249419,P2)
3.03.Vue基础-第一个Vue程序(Av76249419,P3)
4.04.Vue基础-el挂载点(Av76249419,P4)
第一个程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function () {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
})
</script>
</body>
</html>
5.05.Vue基础-data数据对象(Av76249419,P5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A02</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>{{school.name}}</h1>
<h1>{{school.mobile}}</h1>
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
<li>{{campus[2]}}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "vue教程",
school:{
name:"hello",
mobile:"10000"
},
campus:["111","bbb","ccc"]
}
})
</script>
</body>
</html>
6.06.本地应用-介绍(Av76249419,P6)
7.07.本地应用-v-text指令(Av76249419,P7)
v-text指令.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A02</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
<h1 v-text="site"></h1>
<h1 >{{site}}</h1>
<h1 v-text="site">学习</h1>
<h1 >{{site}}学习</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "vue教程"
}
})
</script>
</body>
</html>
运行结果:
vue教程
vue教程
vue教程
vue教程学习
8.08.本地应用-v-html指令(Av76249419,P8)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A02</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
<h1 v-html="content"></h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
content: "<a href=\"#\"> hello content</a>"
}
})
</script>
</body>
</html>
v-html指令.png
v-html指令的作用是:设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html
9.09.本地应用-v-on指令基础(Av76249419,P9)
为元素绑定事件.png
简写方式.png
双击事件.png
点击更新数据.png
v-on指令的作用是:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
10.10.本地应用-计数器(Av76249419,P10)
计数器.png
计数器txt.png
计数器txt2.png
11.11.本地应用-v-show指令(Av76249419,P11)
根据表达式的真假,切换元素的显示和隐藏
v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新
12.12.本地应用-v-if指令(Av76249419,P12)
v-if.png
v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
13.13.本地应用-v-bind指令(Av76249419,P13)
设置元素的属性v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A02</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
<img v-bind:src="imgSrc">
<img :src="imgSrc">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
imgSrc: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1593106255,4245861836&fm=26&gp=0.jpg"
}
})
</script>
</body>
</html>
v-bind样式.png
样式active是否生效取决于isactive.png
14.14.本地应用-图片切换(Av76249419,P14)
图片切换.png
图片切换2.png
15.15.本地应用-v-for指令(Av76249419,P15)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A02</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
<ul>
<li v-for="(item,index) in arr " >{{index}} . {{item}}</li>
<li v-for="(item) in obj " >{{item.name}}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
arr: ["111", "222", "333"],
obj: [{
name: "czl",
age: "22"
},{
name: "bbb",
age: "33"
}]
}
})
</script>
</body>
</html>
16.16.本地应用-v-on补充(Av76249419,P16)
传递自定义参数
事件修饰符@keyup.enter,就是特定输入触发函数如inter
17.17.本地应用-v-model指令(Av76249419,P17)
获取和设置表单元素的值,双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A02</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
<ul>
<input type="text" v-model="txt">
<h2>{{txt}}</h2>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
txt: "双向数据绑定"
}
})
</script>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用