Vue 学习总结笔记 (一)

文章目录

• 1. Vue 的介绍
• • 1.1 什么是Vue？
  • 1.2 Vue的诞生 和 特点
  • 1.3 Vue 的引入 和 Vue devtools开发者工具
  • 1.4 Vue 引入后浏览器端的信息处理
  • 1.5 Vue.config 配置全局
• 2. MVC和MVVC的基本流程
• 3. Vue 的使用详解
• • 3.1 Vue 的mvvm架构
  • 3.2 Vue 的注意事项 (重要)
  • • 3.2.1 Vue实例对象和容器是一一对应的关系
    • 3.2.2 开发中只有一个Vue实例
    • 3.2.3 Vue中 { { xxx }} 可以写什么？
• 4. Vue 模板语法
• • 4.1 { {xxx}} 插值语法
  • 4.2 v-??? 指令语法
• 5. 单向绑定 和 双向绑定
• 6.el和data的两种写法方式
• • 6.1 实例Vue对象 的一些方法
  • 6.2 el的两种写法
  • 6.3 data 两种写法方式
• 7. MVVM的架构图
• 8. 数据代理 Object.defineProperty方法
• • 8.1 Object.defineProperty方法 介绍
  • 8.2 Object.defineProperty方法 的get和set使用
  • 8.2.1 get方法(也叫getter) 使用
  • 8.2.2 set方法(也叫setter) 使用
• 9. 数据代理
• • 9.1 数据代理 例子
  • 9.2 数据代理 详解
• 10. Vue 事件处理
• • 10.1 v-on 事件
  • 10.2 methods方法 和 event事件对象
  • 10.3 指定参数
  • 10.3 为什么不能直接在data中设置函数？

1. Vue 的介绍

1.1 什么是Vue？

---

Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架，这两都可以来开发网站和手机App，但vue开发手机app需要Weex的帮助。vue的开发者是尤雨溪。

Vue.js是一套构建用户界面的框架，只关注视图层。主要负责MVC的V的这一层，还是只关注于界面。

其实学习前端的这些框架，无非就是提升效率，大体上的开发进度都是：

原生JS代码 --》 jQuery库 --》前端模板引擎 --》 Angular.js / Vue.js / React.js

1.2 Vue的诞生 和 特点

---

Vue就是一套用于构建用户界面的渐进式JavaScript框架。

尤雨溪是Vue开发者，他是收到Angular框架的启发，发出了一款轻量级的框架Seed，之后改名为Vue。

---

Vue的特点：

• 采用组件化模式，提高代码复用率，且让代码更好的维护。
  

• 声明式编码，让编码人员无需直接操作DOM，提高开发效率。
  解释一下命令式编码和声明式编码的区别：

  • 命令式编码就是通过js代码一步步实现的效果，如下：
    
  • 声明式编码通过一些指令的方式来简化操作，从而得到想要的结果，如下图：
    

• 使用虚拟DOM 和 优秀的Diff算法，尽量复用DOM节点。
  

1.3 Vue 的引入 和 Vue devtools开发者工具

---

Vue有两个版本，生产版本和开发版本。

引入，很简单从官网下载js文件也好，引入script也好都行。

devtools可以去github上下载，也可以去谷歌应用商店下载。

需要注意两个版本：

1.4 Vue 引入后浏览器端的信息处理

---

我们可以在控制台打印Vue对象来查看！

上面两个提示的解释：

第一个提示：提示是告诉我们要安装Vue的devtools开发者工具，安装这个插件后就不会报错了。

第二个提示：是提示我们当前是在开发者环境中，部署项目要在生产模式！

1.5 Vue.config 配置全局

---

对于上面的提示，第一个提示安装devtools就没了，但是想要第二个也不提示，就需要在Vue.config中配置一下: Vue.config.productionTip = false;

首先，我们去Vue官方网站，查看Vue相关的API ，也是可以查询到一些全局配置的！会看官网很重要！一定要学习看官网！

https://cn.vuejs.org/v2/api/

可以在控制台直接打印出Vue.config的内容：

2. MVC和MVVC的基本流程

---

mvc：（主要考虑后端分层开发）