前端|vue快基础知识快速入门 vue|vue.js

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属性
使用简洁的模板把数据渲染到页面上

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没有自身附属的样式。

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基本案例

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

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建议使用对象的方式

综合案例：图片切换

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：小黑记事本
功能：

新增
1. 生成列表结构(v-for)
2. 获取用户输入(v-model)
3. 回车，新增数据(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){})