随笔分类 - Vue
摘要：前言 如果我们想在Web端实现在线代码编译的效果，那么需要使用组件vue-codemirror，他是将CodeMirror进行了再次封装 支持代码高亮 62种主题颜色，例如monokai等等 支持json, sql, javascript，css，xml, html，yaml, markdown,
阅读全文
摘要：实现效果与原理 我们希望实现鼠标移动至树型结构的结点上就显示按钮，移出就隐藏按钮 实现原理：是通过@mouseenter 和 @mouseleave两个属性来控制鼠标hover的效果，再配合v-show来控制是否展示你需要的控件 具体代码 <el-tree :data="data" ref="tre
阅读全文
摘要：什么是axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 主要的作用：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。 axios有8个特性 从浏览器中创建 XMLHttpRequests 从 `node.js 创建 ht
阅读全文
摘要：Vuex的核心概念 Vuex有5个核心概念，分别是State，Getters，mutations，Actions，Modules。 State Vuex使用单一状态树，也就是说，用一个对象包含了所有应用层级的状态，作为唯一数据源而存在。没一个Vuex应用的核心就是store，store可理解为保存应
阅读全文
摘要：前言 每一个 Vuex 应用的核心就是 store（仓库）。store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那
阅读全文
摘要：Vuex是做什么的？ 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new wi
阅读全文
摘要：生命周期函数 生命周期函数代表的是Vue实例，或者是Vue组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段和运行期间以及销毁期间。 其中创建期间的函数有beforeCreate、created、beforeMount、mounted； 运行期间的函数有beforeUpdate、u
阅读全文
摘要：嵌套路由 有时候在路由中，主要的部分是相同的，但是下面可能是不同的。比如访问首页，里面有新闻类的/home/news，还有信息类的/home/message。这时候就需要使用到嵌套路由。项目结构如下： 我们创建了3个组件，分别是Home.vue，HomeNews.vue，HomeMessage.vu
阅读全文
摘要：什么是路由懒加载 官方的解释： 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 官方想表达的意思 首先，我们知道路由中通常会定义很多不同的页面 这个页面最后会被打包到哪
阅读全文
摘要：介绍 Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CS
阅读全文
摘要：vue-cli创建项目 上一篇我们安装了vue-cli，接下来我们就使用该脚手架进行创建项目 1.进入一个目录，创建项目 创建项目命令如下： vue create <Project Name> //文件名 不支持驼峰（含大写字母） 输入完命令后，会让你选择一个preset 我们可以看到，默认有3个选
阅读全文
摘要：前言 vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的。 vue-cli介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 实
阅读全文
摘要：为什么使用slot slot(插槽) 在生活中很多地方都有插槽，电脑usb的插槽，插板当中的电源插槽 插槽的目的是为了让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘，手机，鼠标，键盘等等 组件中的插槽 组件的插槽也是为了让我们的组件更具有扩展性 让使用者决定组件内部的一些内容到底
阅读全文
摘要：父组件和子组件 我们经常分不清什么是父组件，什么是子组件。现在来简单总结下：我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。具体代码如下 <div id="app"> <component2></component2> </d
阅读全文
摘要：组件的组织 通常一个应用会以一棵嵌套的组件树的形式来组织： 例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.
阅读全文
摘要：前言 有时候有一组html结构的代码，并且这个上面可能还绑定了事件。然后这段代码可能有多个地方都被使用到了，如果都是拷贝来拷贝去，很多代码都是重复的，包括事件部分的代码都是重复的。那么这时候我们就可以把这些代码封装成一个组件，以后在使用的时候就跟使用普通的html元素一样，拿过来用就可以了。 基本使
阅读全文
摘要：v-model v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件： 1.text和textarea元素使用value属性和input
阅读全文
摘要：购物车案例 经过一系列的学习，我们这里来练习一个购物车的案例 **需求：**使用vue写一个表单页面，页面上有购买的数量，点击按钮+或者-，可以增加或减少购物车的数量，数量最少不得少于0，点击移除按钮，会移除该商品，当把所有的商品移除后，页面上的表单消失，然后出现文字：购物车为空，表单下方是商品的总
阅读全文
摘要：循环 在模板中可以用v-for指令来循环数组，对象等。 循环数组 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <div id="app"> <u
阅读全文
摘要：v-if 在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的。示例代码如下： <div id="app"> <p v-if="weather == 'sun'">今天去公园玩！</p> <p v-else-if="weather == 'rain'"
阅读全文
浙公网安备 33010602011771号