前端开发 - Vue
文章平均质量分 73
Hayley2016
微信【H19950211H】
2018.08.20学习计划:
《带你学习Jade模板引擎》
《所向披靡的响应式开发》
《Vue+Webpack打造todo应用》
《Vue核心技术Vue+Vue-Router+Vuex+SSR实战精讲》
2018.12.18学习计划:
《全面系统讲解CSS工作应用+面试一步搞定》
《Node.js七天搞定微信公众号》
展开
-
ElementUI2.0组件库el-table表格组件如何自定义表头?
问题概述鼠标移动到el-table表格组件的表头显示提示信息,也算是自定义表头的一种吧。效果图:(宝宝不会做动图,宝宝心里苦!!!)1. ElementUI2.0组件库el-table表格组件常规用法先贴上ElementUI2.0组件库的官网地址:http://element-cn.eleme.io/#/zh-CN ,百度搜索“element”第一个就是啦。平常使用el-t...原创 2018-07-02 10:32:00 · 37451 阅读 · 14 评论 -
Vue基础精讲 —— Vue中computed和watch使用场景和方法
watch和computed都是以Vue的依赖追踪机制为基础,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。methods用来定义函数,它需要手动调用才能执行,需要像”fuc()”这样去调用它(假设函数为fuc)computed是计算属性,事实上和data对象里的数据属性是...原创 2018-08-16 17:38:27 · 4128 阅读 · 0 评论 -
Vue基础精讲 —— Vue的组件之组件的定义、继承、自定义双向绑定、高级属性
Vue组件基础定义import Vue from 'vue'const compoent = { props: { active: { // type: Boolean, // required: true, validator (value) { return typeof value === 'boolean' ...原创 2018-08-16 17:40:21 · 2749 阅读 · 0 评论 -
Vue基础精讲 —— render function创建Vue组件(实例)
Vue一共有三种方式定义组件 template、 render、 jsx本节介绍用render function 来定义组件import Vue from 'vue'const component = { props: ['props1'], name: 'comp', // 同下: // template: ` // <div :style="sty...原创 2018-08-17 10:38:17 · 1902 阅读 · 0 评论 -
Vue核心插件 —— Vue Router
Vue-router之集成在项目目录新建config文件夹,新建router.js文件(Vue Router入口文件)和routes.js文件(路由配置文件),推荐项目结构安装Vue Router插件npm install vue-router -S在 routes.js文件 中配置路由,以下为路由配置基础示例import Login from '../views/lo...原创 2018-08-20 09:13:22 · 1081 阅读 · 0 评论 -
Vue核心插件 —— Vuex
Vuex之集成在项目目录新建store文件夹,推荐项目结构安装vuex插件npm i vuex -S在store.js文件 中编写入口文件代码,推荐使用 export default () => {return new Vuex.Store({})} 方法(即方法2)创建store实例,每次服务端渲染的过程中,都需要新生成一个store 不能用同一个store,会有...原创 2018-08-20 09:13:11 · 472 阅读 · 0 评论 -
Vue核心插件 —— Vue服务端渲染
从头搭建一个服务端渲染的应用真的是相当复杂,骨头虽硬,还是得啃呀。原创 2018-08-20 11:41:32 · 496 阅读 · 0 评论 -
vue报错:Error: [vuex] Do not mutate vuex store state outside mutation handlers.
报错原理解读 Error: [vuex] Do not mutate vuex store state outside mutation handlers.该报错从文本意思理解还是很清晰的,不要在mutation函数外修改vuex中存储的值。通常情况下,vuex挂载到vue上之后,vuex中的值可以在组件中修改this.$store.state.count = 1但我们不...原创 2018-08-24 14:22:50 · 38755 阅读 · 4 评论 -
Vue基础精讲 —— 深入理解v-model
未完待续https://www.jianshu.com/p/4147d3ed2e60原创 2018-08-24 14:20:42 · 659 阅读 · 0 评论 -
Vue基础精讲 —— Vue的数据绑定和Vue的原生指令
import Vue from 'vue'new Vue({ el: '#root', template: ` <div> <div :class="[{ active: !isActive }]" :style="[styles, styles2]"> 数据绑定 </div> <d...原创 2018-08-16 17:35:06 · 253 阅读 · 0 评论 -
Vue基础精讲 —— 实例解析Vue的生命周期
结合官网Vue生命周期图例,实例生命周期钩子// vue生命周期import Vue from 'vue'new Vue({ el: '#root', template: '<div>{{text}}</div>', data: { text: 'text' }, beforeCreate () { // 无法做dom节点操...原创 2018-08-16 17:33:51 · 291 阅读 · 0 评论 -
Vue基础精讲 —— 详解Vue实例、Vue实例的属性和方法
Vue实例 —— 基本配置在 build文件夹 下新建 webpack.config.practice.js 配置文件,内容参考:const path = require('path')const HTMLPlugin = require('html-webpack-plugin')const webpack = require('webpack')const merge = re...原创 2018-08-16 17:33:59 · 2620 阅读 · 0 评论 -
Electron-vue脚手架改造vue项目(2018.11.13更新)
文章中涉及vue项目都是基于vu-cli快速构建,展示的目录结构是vue-cli快速构建之后的目录。Electron-vue也是基于vue-cli的脚手架工具。小伙伴们自己构建的vue项目想要改造成桌面应用,还请移步Electron将Web页面打包成桌面应用实例。2018.11.13更新——实操过程中遇到的问题1. 关于<template lang="html"> (Emi...原创 2018-07-02 11:30:26 · 11908 阅读 · 5 评论 -
Electron将Web页面打包成桌面应用实例
上一篇文章Electron-vue脚手架改造vue项目 介绍了如何将Vue项目构建成桌面应用的方法。这篇文章将继续介绍Electron构建桌面项目,不仅仅局限于Vue项目,使用Vue项目做案例,只是目前做的Vue项目比较多,拿其中一个练手比较方便。事实是,将项目打包成桌面应用跟使用什么前端框架没有关系,通过Electron任何项目都能打包成桌面应用electron官网:https...原创 2018-07-02 12:07:32 · 27054 阅读 · 1 评论 -
Vue基础精讲 —— 规范代码三步走?关于eslint和editorconfig以及precommit的安装和使用
eslintESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的 javascript 代码检测工具。1. 安装eslint插件npm i eslint eslint-config-standard eslint-plugin-st...原创 2018-08-16 17:24:32 · 1425 阅读 · 0 评论 -
Vue UI 组件库大起底 element VS iview VS ...
最近接触了几个开源项目,发现大家都在用iview框架,趁机整理一下自己接触过的几个基于Vue.js的UI组件库Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。由饿了么前端开源的UI框架。主要用于开发PC端的后台产品。维护率高/大厂开发iView,是一套基于 Vue.js 的开源 UI 组件库,主要用于开发PC端的后台产品。较为小众但ui丰富VU...原创 2018-12-20 15:29:42 · 3969 阅读 · 0 评论