vue快基础知识快速入门
Vue.js快速入门
掌握HTML,CSS,JavaScript，ajax
开发工具：vscode
1、Vue基础
1.1Vue简介：
- JavaScript框架
- 简化DOM操作
- 响应式数据驱动（数据与页面同步更新）
https://cn.vuejs.org/
1.2第一个Vue程序
开发步骤：
- 导入开发版本的Vue.js
- 创建Vue实例对象，设置el属性和data属性
- 使用简洁的模板把数据渲染到页面上
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<div id="app">
{{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
new Vue({
el: "#app",
data: {
message: "你好 小白!"
}
})
script>
1.3el：挂载点
el使用设置Vue实例关联（管理）的元素
问题：
-
Vue实例的作用范围是什么呢？
Vue管理el选项命中的元素及其内部的后代元素
-
是否可以使用其他的选择器？
可以使用其他的选择器，但是建议使用ID选择器
-
是否可以设置其他的dom元素呢？
可以使用其他的双标签，但是html和body不可以作为el挂在点建议使用div，div没有自身附属的样式。
1.4data：数据对象
-
Vue中用到的数据定义在data中
-
data中可以写负责数据类型的数据
-
渲染复杂类型数据时，遵守js的语法即可
2、本地应用
vue指令是以v-开发的一组特殊语法
2.1 内容绑定，事件绑定
v-text指令
-
v-text**指令作用是：设置标签的内容textContent
-
默认写法会替换全部内容，使用插值表达式**{{}}**可以替换指定内容
-
内部支持写表达式
v-html指令
-
v-html的作用设置标签的innerHTML
-
内容中有html结构会被解析为标签
v-text和v-html的区别：
-
v-text指令无论内容是什么，只会解析为文本
-
解析文本使用v-text，需要解析html结构使用v-html
v-on指令
v-on指令的作用是为元素绑定事件
事件名不需要写on*
指令可以简写**@**
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
案例一：
v-text v-html v-on基本案例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础title>
<style>
* {
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;
/* 去除按钮点击后的边框 */
}
style>
head>
<body>
<div id="app" class="app">
<div class="input-num">
<button @click="sub">-button>
<span>{{num}}span>
<button @click="add">+button>
div>
<img src="#" alt="">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
//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--;
}
}
}
});
script>
body>
html>
小结：
- 创建Vue实例时：el(挂载点)，data(数据)，methods(方法)
- v-on指令的作用是绑定事件，简写为@
- 方法中通过this，关键字获取data中的数据
- v-text指令的作用是：设置元素的文本值，简写为{{}}
- v-html指令的作用是：设置元素的innerHTML
2.2显示切换，属性绑定
v-show指令 （广告、遮罩层）
-
v-show指令的作用是：根据真假切换元素的显示状态
-
原理是修改元素的display，显示隐藏
-
指令后面的内容，最终都会解析为布尔值
-
值为true元素显示，值为false元素隐藏
-
数据改变之后，对应元素的显示状态会同步更新
v-if指令
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示
- 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
v-bind指令
- v-bind指令的作用是：为元素绑定属性
- 完整写法是v-bind：属性名
- 简写的话可以直接省略v-bind，只保留：属性名
- 需要动态的增删class建议使用对象的方式
综合案例：图片切换
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础title>
<style>
* {
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;
}
style>
head>
<body>
<div id="app" class="app">
<img :src="imgArr[index]" alt="">
<a href="#" @click="prev" v-show="index!=0">
< a>
<a href="#" @click="next" v-show="index" >> a>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
//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++
}
}
});
script>
body>
html>
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.引入标签
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
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即可
-
和本地一应用的最大区别就是改变了数据来源