首页  思维导图  详情

Vue.js

2021-01-22 10:37:15   31  举报





AI智能生成

vue总结

知识管理

作者其他创作

大纲/内容

基础语法

简介

定义

Vue 是渐进式 javascript 框架: 让我们通过操作很少的 DOM，甚至不需要操作页面中任何 DOM 元素，就很容易的完成数据和视图绑定、双向绑定 MVVM。

MVVM 架构双向绑定机制
Model：数据 Vue实例中绑定数据
View：页面页面展示的数据
VM：ViewModel 监听器

特点

易用 html css javascript

高效开发前端页面非常高效

灵活开发灵活多样性

下载 Vue

开发版本 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产版本 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

{{}}：插值表达式

Vue 实例对象中 el 属性：代表 Vue 的作用范围，在 Vue 的作用范围内都可以使用 Vue 的语法。

Vue 实例对象中 data 属性：用来给 Vue 实例绑定一些相关数据，绑定的数据可以通过 {{ xx }} 在 Vue 作用范围内取出。

在使用 {{ xx }} 进行获取 data 中数据时,可以在 {{ }}中书写表达式、运算符、调用相关方法以及逻辑运算等

el 属性中可以书写任意的 CSS选择器[jquery选择器]，但是在使用 Vue 开发推荐使用 id选择器。

v-text：显示文本

用来获取 data 中数据将数据以文本的形式渲染到指定标签内部，类似于 javascript 中 innerText

{{ xx }}（插值表达式）和 v-text 获取数据的区别

使用 v-text 取值会将标签中原有的数据覆盖，
插值表达式的形式不会覆盖标签原有的数据

使用 v-text 可以避免在网络环境较差的情况下出现插值闪烁。

v-html：显示解析html标签的文本

用来获取 data 中数据将数据中含有的 html 标签先解析在渲染到指定标签的内部，类似于 javascript 中 innerHTML

v-on：事件绑定

v-on:click 可以简化成 @click

事件函数可以简写，dowork: function() {} 可以简写成 dowork() {}

v-show：控制页面元素隐藏与显示(display控制)

v-show：用来控制页面中某个标签元素是否展示，底层通过控制元素的 display 属性来进行标签的显示和不显示控制。

特点

在 v-show 中可以直接书写 boolean 值控制元素展示

在 v-show 中可以通过变量控制标签展示和隐藏。

在 v-show 中可以通过 boolean表达式控制标签的展示和隐藏。

v-if：控制页面元素隐藏与显示(dom操作)

v-if：用来控制页面中的标签元素是否展示，底层通过对 dom 树节点进行添加和删除来控制展示和隐藏。

v-bind：绑定标签的属性

v-bind : 属性可以简写成 : 属性

v-for：遍历对象

在使用 v-for 的时候一定要注意加入:key 用来给 Vue 内部提供重用和排序的唯一 key

遍历时可以获取索引 index、…

v-model：实现双向绑定

定义：用来绑定标签元素的值与 vue实例对象中data数据保持一致，从而实现双向的数据绑定机制。

所谓双向绑定，就是表单中数据变化导致 vue 实例 data 数据变化，vue 实例中 data 数据的变化导致表单中数据变化。

事件修饰符

修饰符作用：用来和事件连用，决定事件触发条件或者是阻止事件的触发机制。

.stop：用来阻止事件冒泡。
.prevent：用来阻止标签的默认行为。
.capture
.self：只触发自己标签的上特定动作的事件，不监听事件冒泡。
.once：让指定事件只触发一次。
.passive

按键修饰符

作用：用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符。

常用按键修饰符：@keyup.xxx="function "

.enter
.tab （捕捉通过tab跳转到当前按标签）
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

Axios 基本使用

引入Axios

https://unpkg.com/axios/dist/axios.min.js

GET方式的请求

axios.get('http://localhost:8989/user/findAll?name=zhangsan')
.then(function (response) {
console.log(response.data);
}).catch(function (err) {
})

POST方式的请求

axios.post("http://localhost:8989/user/save", {
id: "996",
}).then(function (response) {
}).catch(function (err) {
});

并发请求

axios.all([findAll(), save()]).then(
axios.spread(function (res1, res2) {
console.log(res1.data);
console.log(res2.data);
}));

Vue 生命周期

生命周期钩子（lifecycle hooks）

生命周期函数

beforeCreate 组件没有创建之前触发
created 组件创建完成没有渲染时触发
beforeMount 组件渲染之前触发
mounted 组件渲染之后触发
beforeUpdate data改变，组件更新前触发
updated data改变，组件更新后触发
beforeDestroy 组件销毁之前触发
destroyed 组件销毁之后触发