weixin_48053866的博客

插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。关于axios的特点，可以查看axios中文文档，还可以了解一下axios, ajax和fetch的详细比较内容。接下来开始安装axios，在项目目录下执行（不同的node版本，成功后的提示不同）

数据获取：有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：- **导航完成之后获取**：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。- **导航完成之前获取**：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。

Element UI 和 Element Plus 都支持自定义主题。你可以通过修改 SCSS 变量来定制主题，也可以使用在线主题生成工具来生成。

程式导航，除了使用 `` 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。导航到不同的位置：**注意：在 Vue 实例中，你可以通过 `$router` 访问路由实例。因此你可以调用 `this.$router.push`。**想要导航到不同的 URL，可以使用 `router.push` 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退

导航守卫（路由钩子函数）正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。全局前置守卫，你可以使用 `router.beforeEach` 注册一个全局前置守卫：

我们接着上一篇文章04-Vue：ref获取页面节点–很简单来讲。用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子：首先使用导入npm包。

在Vue中，通过 ref 属性获取DOM元素，我们当然可以使用JS原生的做法（document.getElementById）或者 jQuery 来获取DOM，但是这种做法却在无形中操作了DOM，在Vue框架中并不推荐这种做法。我们可以通过`ref`属性获取DOM元素。`ref`的英文单词是**reference**，表示**引用**。我们平时可以经常看到控制台会报错**referenceError**的错误，就和引用类型的数据有关。

我们接着上一篇文章03-01-Vue组件的定义和注册来讲。父组件子组件互相传值

组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。### 模块化和组件化的区别- 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一- 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

我们接着上一篇文章01-05来讲。vue实例的生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。生命周期钩子：就是生命周期事件的别名而已。生命周期钩子 = 生命周期函数 = 生命周期事件。

Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache **插值表达式**、 **v-bind表达式**。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。### 过滤器的基本使用比如说，我要将data中msg 后面添加字符串。可以这样做：（1）在差值表达式中这样调用：

完整的代码如下：代码分析：数据是存放在data的list中的，将data中的数据通过遍历给表格。上方代码运行的效果：如果list中没有数据，那么表格中就会只显示表头，这样显然不太好看。为此，我们需要增加一个判断：当数据为空时，显示提示。如下：代码解释：指的是让当前这个横跨4个单元格的位置。如下：具体实现步骤如下：（1）用户填写的数据单独存放在data属性里，并采用进行双向绑定。（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内

`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：`.stop` 阻止冒泡。本质是调用 event.stopPropagation()。- `.prevent` 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。- `.capture` 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。- `.self` 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。- `.once` 事

本文主要内容：v-model、v-for、v-if、v-show：重点：**双向数据绑定，只能用于表单元素，或者用于自定义组件**。之前的文章里，我们通过v-bind，给``标签绑定了`data`对象里的`name`属性。当`data`里的`name`的值发生改变时，``标签里的内容会自动更新。可我现在要做的是：我在``标签里修改内容，要求`data`里的`name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。

在Vue的实例中，如果想要获取data里的属性、methods里面的方法，都要通过。

2013年底作为尤雨溪个人实验项目开始开发2014年2月公开发布。2014年11月发布0.11版本2016年10月发布2.0版本。Vue 本身并不是一个框架，Vue结合周边生态构成一个灵活的、渐进式的框架。Vue 以及大型 Vue 项目所需的周边技术，构成了生态。