黑马程序员技术交流社区

标题: Vue学习笔记 [打印本页]

作者: fanLey 时间: 2019-9-10 14:42
标题: Vue学习笔记
VueJS
Vue.js是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.
一. MVVM模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版.
目的: 将视图UI和业务逻辑代码分开.

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性.

二. 快速入门

三. 插值表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值.

注: 每个绑定都只能包含单个表达式
四. VueJS常用系统指令
1. v-on: 事件绑定
作用: 监听DOM事件,并在触发时运行JavaScript代码.
注: @事件名称  就是v-on:事件名称的简写方式
1.1 v-on:click :单击事件

1.2 v-on:keydown: 键盘监听事件

1.3 v-on: mouseover: 鼠标移动事件

1.4 事件修饰符
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
1.5 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
2. v-text和v-html: 内容显示
类似于Jquery中的test()和html().
3. v-bind: 属性操作
插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令.

注:  v-bind 的简写形式:    :属性.
4. v-model: 输入框的值修改和获取
如果说输入框的变化的话,v-model的值也会发生相应的变化.
作用:  数据回显

5. v-for: 循环
① 遍历数组

② 操作对象

③操作对象数组

6. v-if与v-show
v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性

五. VueJS的生命周期
大方面来说,VueJS的生命周期分为四个阶段:
* create
* mount
* update
* destroy
并且这四个阶段,又可细分为before和after两个小阶段.
总的来说,VueJS的生命周期有八个.

六. VueJS的axios
1. 引入axios的方式
① 安装

② 引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2. get请求

3. post请求

注    :为方便起见，为所有支持的请求方法提供了别名:
axios.request(confifig)
axios.get(url[, confifig])
axios.delete(url[, confifig])
axios.head(url[, confifig])
axios.post(url[, data[, confifig]])
axios.put(url[, data[, confifig]])
axios.patch(url[, data[, confifig]])

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2