文章目录
一、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> 元素作为承载分发内容的出口，称其为“插槽”，可以应用在组合场景中。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
