目录
简介
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>
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)
get请求.png
post请求.png
