Vue
关注
分享
扫一扫
文章平均质量分 69
rainynights
这个作者很懒，什么都没留下…
展开
-
Vue实例
每一个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的： var app = new Vue({ el: '#app', data: { })其语法十分简单，其中app就代表了我们创建的Vue实例。这里值得注意的是el选项，这是element的缩写，这个选项用于指定一个html页面中已...原创 2018-06-23 14:31:53 · 293 阅读 · 1 评论 -
vue 自定义标签页
本篇文章我们通过以前学习过的知识来构建一个自己的标签页组件。首先我们创建一个基于vue的项目，我用的IDE是webstorm。创建好的工程目录结构：我们先来分析一下我们需要做哪些工作，常见的标签页就像下面的图片：大家可以看到标签页的最上边是我们的标题区域，而下面则是我们对应的内容区域。第一眼看到这个布局，我就在想这个好像没有什么难度的，标题栏我用v-for渲染出来，下面的内容有几个...原创 2018-12-19 19:46:29 · 9508 阅读 · 0 评论 -
vue 自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inse...原创 2018-12-20 15:08:04 · 204 阅读 · 0 评论 -
vue 自定义指令 实现点击下拉菜单外部区域关闭下拉菜单
我们来看下常见的下拉菜单：这里我们点击菜单，下拉菜单就会显示，点击下拉菜单以外的区域就会隐藏。这是一个简单的例子：这里增加一个选项，就是当我们按下esc键的时候，下拉菜单也可以关闭。先贴出代码：<template> <div v-cloak v-clickoutside="outsideClose" class="dropmain"> <di...原创 2018-12-20 17:42:11 · 8075 阅读 · 0 评论 -
vue router
前面我们知道怎么创建一个vue项目，今天我们就来看一下vue中的vue router。它是 Vue.js 官方的路由管理器 并且与 Vue.js 的核心深度集成，可以让构建单页面应用变得易如反掌。包含的功能有： 1. 嵌套的路由/视图表 2. 模块化的、基于组件的路由配置 3. 路由参数、查询、通配符 4. 基于 Vue.js 过渡系统的视图过渡效果 5. 细粒度的导航控制 6. 带...原创 2018-12-26 19:22:29 · 298 阅读 · 0 评论 -
Express 安装和项目创建
从今天开始，我们开始学vue+express+mongodb+node从头开始构建一个完整的项目，至于完成一个什么样的项目，说实话我还没有想好，如果大家有特别的想法，我们可以一起交流学习。Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架，为 Web 和移动应用程序提供一组强大的功能。我们可以通过npm和yarn进行安装：npm install express...原创 2018-12-28 15:27:22 · 3498 阅读 · 0 评论 -
Vue3.0项目创建
创建一个vue项目基于vue-cli 3.x。vue-cli 3.x 和vue-cli2.x的选项稍有不同，这点大家不必在意。与vue2.x相比较，项目的目录结构也发生了变化：运行程序：...原创 2018-12-28 18:06:58 · 610 阅读 · 0 评论 -
webpack基础
在开始之前，确保大家已经安装了node和npm/yarn环境。首先我们新建一个目录用来初始化一个新的项目使用npm：使用yarn：上面的选项大家可以自己填入，也可直接回车快速跳过完成初始化，完成后会生成package.json文件接下来我们在局部安装webpack：yarn add webpack如果你习惯使用npm，那么就使用命令npm install 进行安装。web...原创 2018-12-25 19:04:11 · 147 阅读 · 0 评论 -
vue项目创建
在开始之前，我们说一下怎么创建一个vue项目，现在的vue版本是2.x，不过3.0的版本估计会在明年下半年发布吧。所以我们还是用2.x的方式来说明。最简单的方式就是使用一款IDE帮助我们创建vue项目，我用过的IDE中webstorm就可以完成这项功能，有些兴趣的可以下载使用，不过提醒大家一点，这玩意很吃内存。。。其次，就是我们使用vue官方提供的vue-cli脚手架工具来创建一个vue项目。...原创 2018-12-26 11:34:34 · 309 阅读 · 0 评论 -
Express+vue 后台与登录实现
在前面的基础上，我们首先实现后台管理的登录逻辑。我们使用的是Express+vue进行实现，后面的文章也一样。创建名为manager的项目，用来实现后台管理。创建client项目，用来实现前端。整个工程的结构如下：在这里我们使用Axios来实现后台数据请求，Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。安装使用：yarn add axio...原创 2019-01-24 19:22:19 · 7386 阅读 · 0 评论 -
electron项目使用vue以及打包生成安装程序
Electron Forge 是一个用来构建现代化Electron应用的完善的工具。 Electron Forge将多个现有的（ 且有稳定维护的 ）Electron构建工具整合为一个简单易用的工具包，所有人都可以用它来快速地搭建Electron开发环境。其中forge支持的框架模版可以参考下面的网址：https://electronforge.io/templates使用yarn安装 e...原创 2019-01-30 18:50:29 · 8616 阅读 · 1 评论 -
vue+koa2 美团开发实战1-创建项目
这篇开始的文章我会从头开始学习着去做一个高仿美团的网站，内容包括前后端的一些基础知识，当然了，由于本人也是抱着学习的心态，将这个过程以博客的形式记录下来，其中的不足希望大家可以谅解。如果能有幸得到各位大神们的指点，荣幸之至。在最近的一段学习过程中，感觉最深的就是将各种框架组合在一起的复杂性。索性，各路大神们为我们提供了一些十分便捷的轮子能够让我们进行快速开发。首先来说一下我们采用的技术：vue...原创 2019-03-15 12:22:06 · 847 阅读 · 0 评论 -
vue+koa2 美团开发实战2-目录结构
工欲善其事必先利其器，前面我们知道了怎么利用Nuxt.js去创建项目，今天我们就来聊一聊利用Nuxt.js创建出来的项目的目录结构，了解了这些基本的东西，才能让我们在后面的开发中越来越得心应手。这是我们vscode打开项目后所显示的项目的目录结构：接下来我们详细的去了解这些目录的用途。assets资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScri...原创 2019-03-16 19:51:47 · 1973 阅读 · 1 评论 -
Vue slot插槽
我们对于slot这个概念或许不是很清楚，但是我们在实际的使用中可能已经遇到很多次了。比如我们在使用ivew组件库的时候，就会经常遇到slot这个单词。而实际上，slot的使用更多的是用于独立组件的开发，在加上前面我们了解过的props和events事件，这3个东西可以完成vue中各种复杂的组件。slot我们中文的翻译是插槽，举个例子，我们中秋节都会吃月饼吧，可是月饼的样子也可能是千奇百怪的，所用...原创 2018-09-18 02:30:51 · 4501 阅读 · 0 评论 -
Vue 自定义事件
在实际场景中，我们通过props可从父组件向子组件传递数据来达到数据共享的目的。但是在某一些场景中，我们需要从子组件向父组件传递消息，此时，我们就可以使用vue提供的自定义事件。其语法很简单，在子组件中我们可以使用：emit（）来触发一个来自子组件的事件，在父组件中使用：emit（）来触发一个来自子组件的事件，在父组件中使用：emit（）来触发一个来自子组件的事件，在父组件中使用：on（）来监...原创 2018-09-09 18:31:58 · 858 阅读 · 0 评论 -
Vue 表单和v-model
表单控件在实际的业务场景中是比较常见的，单选，多选，下拉选择，输入框等，用这些控件可以完成数据的录入、校验以及提交等。vue给我们提供了v-model指令用于在表单类元素上双向绑定数据。 1.input上v-model的使用<template> <div> <input type="text" v-model="message" placehol...原创 2018-08-09 02:08:35 · 12921 阅读 · 0 评论 -
Vue 数据绑定
数据绑定就是将页面的数据和视图关联起来，当我们的数据变化的时候，视图可以自动更新。插值 文本插值是数据绑定的最基本形式，使用双花括号“{{ }}”,这种语法在Vue里面也称之为Mustache语法。 <div id="app"> {{content}} </div> <script src="h...原创 2018-06-23 18:23:41 · 5280 阅读 · 0 评论 -
Node.js安装教程
接下来的一些时间我会写一些关于vue的基础知识的文章，这篇我们就首先介绍下node.js的安装教程吧。Node.js官方地址： https://nodejs.org/en/进入官网后，我们选择自己需要的版本进行下载： 一般我们选择官网推荐的版本就好，这个版本是比较稳定的。Node.js安装 node.js的安装也是很简单的额，这里直接上图了。 如何知道我们是...原创 2018-06-16 22:37:48 · 249 阅读 · 0 评论 -
第一个Vue应用
不管我们学习哪种语言，我们第一个写的估计就是Hello World了，这里我们也是先通过一个简单的html代码开始，来对Vue有一个直观的感觉。<html> <head> <meta charset="utf-8"> <title>Vue 示例教程</title> &..原创 2018-06-16 23:46:27 · 169 阅读 · 0 评论 -
Vue class和style绑定
关于vue中class和style的绑定，我们在本篇主要是为大家说明一下该怎么使用v-bind来进行处理。首先我们看下class的几种绑定方式：1.对象语法 通过v-bind：class设置一个对象，可以动态的切换class。，在对象中我们可以传入多个属性。其中：class和普通的class是可以共同存在的。<template> <div class="he...原创 2018-07-16 19:33:35 · 184 阅读 · 0 评论 -
Vue v-cloak
关于v-cloak指令，这是一个解决初始化缓慢导致的页面闪动的最好的解决方案，不过这点对于简单的项目是很实用的。对于那些使用工程化的项目里，比如我们使用的webpack和vue-router，就不需要使用这个v-cloak。这个标签的特性在于它会在vue实例编译结束后从绑定的html元素上移除。通常情况下和下面示例的样式display: none一起使用的。<template>...原创 2018-07-17 23:40:57 · 1857 阅读 · 0 评论 -
Vue v-once
v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。下面我们看个例子，我们先不使用v-once指令：<!--v-once示例--><template> <div> <div&g...原创 2018-07-18 00:38:36 · 15772 阅读 · 0 评论 -
Vue 条件渲染指令
和JavaScript的条件语句一样，vue的条件指令可以根据表达式的值在dom中渲染或者销毁元素/组件,常用的条件指令有：v-ifv-else-ifv-else其中v-if可以单独使用，v-else-if必须紧跟v-if，v-else必须紧跟v-else-if或者v-if。当表达式的值为true时，当前元素/组件及所有的子节点都将会被渲染，反之被移除。如果一次判断的是多个元素...原创 2018-07-19 01:30:37 · 3093 阅读 · 0 评论 -
Vue 列表渲染指令 v-for
通常情况下我们需要将一个数组或者对象循环显示的时候，就会用到这个列表渲染指令v-for。它的表达式需要和in或者of结合使用。数组渲染 首先我们看一个关于数组渲染的例子，这也是最常见的使用形式：<template> <ul> <li v-for="book in books">{{book.name}}</li> &...原创 2018-07-25 01:45:17 · 1674 阅读 · 0 评论 -
Vue计算属性
计算属性就是当其所依赖的属性的值发生变化的时候，这个属性的值会自动更新，与之相关的东西也会自己更新。计算属性可以完成各种复杂的逻辑，但是最终都要返回一个结果。计算属性可以依赖多个vue实例的数据，只要其中一个发生变化，计算属性就会重新调用，相应的视图也会随之进行更新。下面我们看个实例：<template> <div id="computed"> <...原创 2018-07-16 02:49:56 · 1059 阅读 · 0 评论 -
Vue 组件基础
组件是vue中堪称最为强大的功能之一，这个概念的核心目标就是为了可重用性高，减少重复性的开发。我们可以把组件代码按照template、style、script的拆分方式，放置在对应的.vue 文件中。我前面的例子其实就是组件的形式。我们可以把组件理解为预先定义好行为的ViewModel类，一个组件可以定义很多的选项，但是最为核心的还是以下几个：模版-template 声明了数据和最终...原创 2018-08-10 01:12:50 · 173 阅读 · 0 评论 -
Vue 仿淘宝购物车
效果图： 页面布局： &lt;div id="shop_car"&gt; &lt;section class="car_main"&gt; &lt;!--顶部列表--&gt; &lt;div class="car_head"&gt原创 2018-08-02 01:55:01 · 4238 阅读 · 0 评论 -
Vue 组件之使用props传递数据
组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。这个正向的数据传递在vue组件中就是通过props来实现的。在组件中，我们首先需要使用选项props申明需要从父组件接收的数据，字符串数组的props的传递如下： 示例： 子组件<template>...原创 2018-08-13 02:08:45 · 42978 阅读 · 0 评论 -
vue+koa2 美团开发实战3-首页分析
在开始实现代码之前，我们先来看看美团的网页布局。大家自己去美团的官网看看，会发现头部和尾部是固定展示的内容，中间的区域随着内容的变化而不同。那么这个首页的布局使用下面的布局方式，这里我们使用的是elements-ui，使用其他的组件请参考对应的官方文档。首先我们去除pages/index.vue中的无用代码：接下里，我们使用element-ui的布局组件，快速构建出我们网页的整...原创 2019-03-18 17:39:00 · 511 阅读 · 0 评论