文章目录
一、vue 概述
- Vue 是一套用于构建用户界面的渐进式框架。
- 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
- Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
- vue.js 是一个 MVVM 的实现者,他的核心是实现了 DOM 监听与数据绑定。
- SoC:关注度分离原则。
二、第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: "hello Vue !"
}
});
</script>
</body>
</html>
- 界面效果:
- 可以在前端通过修改 message 的值,直接修改界面中显示的文字:
三、Vue 基本语法
1. 指令
- 指令 (Directives) 是带有
v-
前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。 - 指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:
<p v-if="seen">现在你看到我了</p>
- 这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
2. 条件渲染—— if 判断
3. 列表渲染—— for 循环
四、Vue 绑定事件
五、Vue 双向绑定
1. 什么是数据双向绑定?
- vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。
- 值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具(如redux)的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。
2. 为什么要实现数据的双向绑定?
- 在vue中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,vue的双向数据绑定用起来就特别舒服了。
- 两者并不互斥, 在全局性数据流使用单项,方便跟踪; 局部性数据流使用双向,简单易操作。
3. 例子
- 输入框里内容修改时,后面的字符串也可以实时修改:
六、Vue 组件详解
1. 组件基础
- 通常一个应用会以一棵嵌套的组件树的形式来组织:
2. 例子:
七、Axios异步通信
1. Axios是什么?
- Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post请求。说到get、post,大家应该第一时间想到的就是Jquery吧,毕竟前几年Jquery比较火的时候,大家都在用他。但是由于Vue、React等框架的出现,Jquery也不是那么吃香了。也正是Vue、React等框架的出现,促使了Axios轻量级库的出现,因为Vue等,不需要操作Dom,所以不需要引入Jquery.js了。
2. Axios 功能特点
- 可以在浏览器中发送 XMLHttpRequests
- 可以在 node.js 发送 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 能够取消请求
- 自动转换 JSON 数据
- 客户端支持保护安全免受 XSRF 攻击
3. vue 生命周期
4. 应用
八、计算属性
1. 概念
- 调用方法时,每次都要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?
- 此时就可以考虑将这个结果缓存起来,采用属性可以很方便的做到这一点,计算属性的主要特征就是为了将不经常变化的结果进行缓存,以节约我们的系统开销。
2. 例子
- 注意:methods 和 computed 里的东西不能重名;
- methods:定义方法,调用方法使用 currentTime1(),需要带括号;
- computed:定义计算属性,调用属性使用 currentTime2,不需要带括号,this.message 是为了能够让 currentTime2 观察到数据的变化;
九、插槽
1. 概念
在 Vue.js 中,我们使用 <slot>
元素作为承载分发内容的出口,称其为“插槽”,可以应用在组合场景中。