Vue.js快速入门 掌握HTML,CSS,JavaScript,ajax
开发工具:vscode
1、Vue基础
1.1Vue简介:
- JavaScript框架
- 简化DOM操作
- 响应式数据驱动(数据与页面同步更新)
1.2第一个Vue程序
开发步骤:
- 导入开发版本的Vue.js
- 创建Vue实例对象,设置el属性和data属性
- 使用简洁的模板把数据渲染到页面上
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">src="https://cdn.jsdelivr.net/npm/vue">
{{message}}
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
>
new Vue({
el: "#app",
data: {
message: "你好 小白!"
}
})
1.3el:挂载点
el使用设置Vue实例关联(管理)的元素
问题:
- Vue实例的作用范围是什么呢?
Vue管理el选项命中的元素及其内部的后代元素
- 是否可以使用其他的选择器?
可以使用其他的选择器,但是建议使用ID选择器
- 【前端|vue快基础知识快速入门】是否可以设置其他的dom元素呢?
可以使用其他的双标签,但是html和body不可以作为el挂在点建议使用div,div没有自身附属的样式。
- Vue中用到的数据定义在data中
- data中可以写负责数据类型的数据
- 渲染复杂类型数据时,遵守js的语法即可
2.1 内容绑定,事件绑定
v-text指令
- v-text**指令作用是:设置标签的内容textContent
- 默认写法会替换全部内容,使用插值表达式**{{}}**可以替换指定内容
- 内部支持写表达式
- v-html的作用设置标签的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
- 解析文本使用v-text,需要解析html结构使用v-html
v-on指令的作用是为元素绑定事件
事件名不需要写on*
指令可以简写**@**
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
案例一:
v-text v-html v-on基本案例
Vue基础 - 锐客网
>
* {
margin: 0px;
padding: 0px;
}.input-num {
background-color: #666;
margin: 100px auto;
padding: 0px;
border: 0.1px solid #ccc;
text-align: center;
border-radius: 20px;
width: 450px;
box-shadow: 5px 5px 10px 1px;
overflow: hidden;
font-size: 26px;
}.input-num span {
background-color: #fff;
width: 32%;
display: inline-block;
border: 1px solid transparent;
height: 67px;
line-height: 67px;
}.input-num button {
background-color: #666;
display: inline-block;
width: 32%;
height: 60px;
border: 1px solid transparent;
outline: none;
font-size: 40px;
color: red;
cursor: pointer;
/* 去除按钮点击后的边框 */
}
>{{num}}
文章图片
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
>
//3.创建Vue实例
new Vue({
el: "#app",
data: {
num: 1
},
methods: {
add: function() {
if (this.num >= 10) {
alert("最大到10")
} else {
this.num++;
}
},
sub: function() {
if (this.num <= 1) {
alert("最小到1")
} else {
this.num--;
}
}
}
});
小结:
- 创建Vue实例时:el(挂载点),data(数据),methods(方法)
- v-on指令的作用是绑定事件,简写为@
- 方法中通过this,关键字获取data中的数据
- v-text指令的作用是:设置元素的文本值,简写为{{}}
- v-html指令的作用是:设置元素的innerHTML
v-show指令 (广告、遮罩层)
- v-show指令的作用是:根据真假切换元素的显示状态
- 原理是修改元素的display,显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,值为false元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
- v-bind指令的作用是:为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接省略v-bind,只保留:属性名
- 需要动态的增删class建议使用对象的方式
Vue基础 - 锐客网
>
* {
margin: 0;
padding: 0;
}#app {
position: relative;
margin: 100px auto;
border: 1px solid green;
width: 600px;
height: 400px;
}#app img {
margin: 10px auto;
display: block;
width: 96%;
height: 95%;
/* background-color: yellow;
*/
}#app a {
text-align: center;
display: inline-block;
text-decoration: none;
border: 1px solid transparent;
width: 30px;
height: 100px;
line-height: 100px;
font-size: 45px;
background-color: #ccc;
color: #fff;
position: absolute;
}#app a:nth-of-type(1) {
top: 150px;
left: 20px;
}#app a:nth-of-type(2) {
right: 20px;
top: 150px;
}
文章图片
<
文章图片
-->src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
>
//3.创建Vue实例
var app = new Vue({
el: "#app",
data: {
imgArr: ["images\\-5b7302f92f4f1bb.jpg",
"images\\-25c420b74ac5d2ab.jpg",
"images\\-382cffb5743277d4.jpg",
"images\\-669d112974533e0f.jpg",
"images\\-23102fa82a7edd50.jpg",
"images\\-c1192626a994124.jpg",
"images\\9f395ac511e8d5a.jpg",
"images\\Snipaste_2020-03-25_17-05-05.png",
"images\\Snipaste_2020-03-25_17-06-13.png"
],
index: 0
},
methods: {
prev: function() {
this.index--
},
next: function() {
this.index++}}});
2.3列表循环,表单元素绑定
v-for指令
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是{item,index} in 数据
- item和index可以结合其他指令一起使用
- 数据长度的跟新会同步到页面上,是响应式的
v-on补充
- 时间绑定的方法写成函数调用的形式,可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 时间的后面跟上.修饰符可以对时间进行限制
- .enter可以限制触发的按键为回车
- 事件修饰符有很多种
v-model指令
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据<–>表单元素的值
综合案例3:小黑记事本
功能:
- 新增
- 生成列表结构(v-for)
- 获取用户输入(v-model)
- 回车,新增数据(v-on.enter 添加数据)
1.v-for指令的作用
2.v-model指令的作用
3.v-on指令,事件修饰符
4.通过审查元素快速定位
- 删除
- 统计
- 清空
- 隐藏
3、网络应用
3.1axios
功能强大的网络请求库
语法:
1.引入标签
src="https://unpkg.com/axios/dist/axios.min.js">
2.
axios.get(地址?key=value & key2=value).then(function(reponse){},function(err){})
axios.post(地址,key=value & key2=value).then(function(reponse){},function(err){})
- axios必须先导入才可以使用
- 使用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容,或错误信息
文档:
http://github.com/axios/axios
3.2axios+vue开发网络应用
- axios回调函数中的this已经改变,无法访问到data中数据
- 把this保存起来,回调函数中直接使用保存的this即可
- 和本地一应用的最大区别就是改变了数据来源
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- js|Vue快速入门-个人笔记
- js|vue table checkbox 单选问题
- ui|Vue相关开源项目库汇总 http://www.opendigg.com/tags/front-vue
- vuex|vuex5 Pinia状态管理
- 青龙教程资源分享|傻妞js插件教程
- CSS|【总结】(前端面试必考题 —— CSS两栏布局(最全面))
- 面试|【总结】(大厂面试常考手撕代码 —— JavaScript实现效果)
- JavaScript基础知识|ES6(Generator生成器的介绍及场景应用)
- 前端|常用优化网页加载速度方法