vue.js
关注
分享
扫一扫
MakeGreatEffort
这个作者很懒，什么都没留下…
展开
-
Vuex简单入门
1.Vuex是什么？学院派：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；集中存储和管理应用的所有组件状态。理解：以上这4个词是我们理解的关键。状态：什么是状态，我们可以通俗的理解为数据。Vue只关心视图层，那么视图的状态如何来确定？我们知道是通过数据驱动，这里的状态管理可以简单理解为管理数据。集中存储：Vue只关心视图，那么我们需要一个仓库（Store）来存储数据，而且是所有的...转载 2018-05-18 09:50:15 · 208 阅读 · 0 评论 -
Vuex之理解Store的用法
说了，Vuex就是提供一个仓库，Store仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data（后面讲到的actions和mutations对应于methods）。在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules。总结，Sto...转载 2018-05-18 09:54:01 · 9178 阅读 · 1 评论 -
Vuex之理解state的用法实例
，Vuex就是提供一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data（后面讲到的actions和mutations对应于methods）。响应书存储：state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。（这里“状态”=“数据”），也就是是说数据和视图是同步的。2.局部...转载 2018-05-18 09:56:45 · 1058 阅读 · 0 评论 -
Vuex之理解Mutations
通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。2.怎么用mutations？mutation结构：每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发响应...转载 2018-05-18 10:04:31 · 2003 阅读 · 0 评论 -
v-model和v-for指令
1.基本雏形<!DOCTYPE html><html><head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="转载 2018-05-18 12:35:46 · 563 阅读 · 0 评论 -
监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例：<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} tim...原创 2018-05-18 12:45:05 · 246 阅读 · 0 评论 -
事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。示例：<div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button>&原创 2018-05-18 12:45:53 · 285 阅读 · 0 评论 -
vue单文件项目构建
VUE单文件组件在Vue项目中，然后使用 new Vue({el: '#container' }), 在每个页面内指定一个容器元素。使用Vue.component来定义全局组件，这种方式在小规模项目中还可以，但是在项目中有如下缺点：1. 全局定义：强制要求每个component中的命名不能重复。2. 字符串模板：缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的 \3. 不支持css，意味着HT...转载 2018-05-18 13:19:34 · 1058 阅读 · 0 评论 -
vue.js的前后台如何传参数
原创 2018-05-22 14:37:56 · 7679 阅读 · 0 评论 -
axios基本用法
vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios,前一段时间用了一下，现在说一下它的基本用法。首先就是引入axios,如果你使用es6，只需要安装axios模块之后import axios from 'axios';//安装方法npm install axios//或bower install axios当然也可以用script引入<script s...转载 2018-05-23 08:08:39 · 1761 阅读 · 0 评论 -
深入理解vue中的slot与slot-scope
写在前面vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。实际上，插槽的概念很简单，下面通过分三部分来讲。这个部分也是按照vue说明文档的顺序来写的。进入三部分之前，先让还没接触过插槽的同学对...转载 2018-05-23 12:14:56 · 6793 阅读 · 2 评论 -
Vuex中mapState的用法
今天使用Vuex的时候遇到一个坑，也可以说是自己的无知吧，折腾了好久，终于发现自己代码的错误了。真是天雷滚滚~~~~~~index.jsimport Vue from 'vue'import Vuex from 'vuex'import mutations from './mutations'import actions from './action'import getters from...转载 2018-06-23 23:07:46 · 896 阅读 · 0 评论 -
关于vue 自定义组件的写法与用法
最近在网上看到很多大神都有写博客的习惯，坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴！当然本人能力实在有限写出的文章可能和大神们不能比拟 如果有什么不专业甚至是错误的地方还请大家指正！好了说了这么多那么下面进入正题^_^在网上经常看到有朋友在问自己能不能写vue组件 如果可以怎么应用到自己的项目之中呢！我觉得吧这个...转载 2018-06-24 18:42:41 · 7319 阅读 · 1 评论 -
vue.js自定义标签(自定义组件)
分为三个部分:1.template模版：123456<script type="text/x-template" id="todo-form-template"> <form v-on:submit.prevent="addtodo(newtodo)"> <input type="text" v-model="newtodo.ti转载 2018-06-24 18:48:47 · 12249 阅读 · 1 评论 -
关于vue 里:class 的几种使用方式
最近一直在做vue项目 从网上搜索到的资料不太多。关于:class的使用 结合自己的实现 整理如下。接下来一篇写:style 。其实从:class 这里可以想到:style的使用 也是类似的一 class1 自定义class 通过vue computed 计算属性 实现 我的class 是名称+时间戳，是独一份的，可以作为id角色使用。html:<div :class="_module"...转载 2018-06-24 18:52:55 · 91361 阅读 · 1 评论 -
VUE -- 自定义控件(标签)
vue 引入自定义css 和js一. 引入自定义js方法一首先在main.js中引入：import Comjs from './js/common.js' //引入公用jsVue.prototype.$comjs = Comjs; //添加到vue属性中12自定义js 中写：const comjs = {}comjs.title = function (title...转载 2018-06-24 18:58:37 · 1678 阅读 · 0 评论 -
promise基本概念
先学习promise的基本概念。promise只有三种状态，未完成，完成(fulfilled)和失败(rejected)。promise的状态可以由未完成转换成完成，或者未完成转换成失败。promise的状态转换只发生一次promise有一个then方法，then方法可以接受3个函数作为参数。前两个函数对应promise的两种状态fulfilled, rejected的回调函数。第三个函数用于处理...转载 2018-06-29 10:53:58 · 256 阅读 · 0 评论 -
this.$router.go()和this.$router.push()的差别
1.this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。2.this.$router.push(path) => 在history栈中添加一条新的记录。转载 2018-06-29 12:35:00 · 11048 阅读 · 0 评论 -
vue.js2.0 自定义组件初体验
理解组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。使用组件创建单文件组件<template></template><script> expor...转载 2018-06-25 00:44:36 · 197 阅读 · 0 评论 -
package.json字段全解
Name必须字段。小提示：不要在name中包含js, node字样；这个名字最终会是URL的一部分，命令行的参数，目录名，所以不能以点号或下划线开头；这个名字可能在require()方法中被调用，所以应该尽可能短；Version必须字段。Description可选字段，必须是字符串。npm search的时候会用到。Keywords可选字段，字符串数组。npm search的时候会用到。Homep...转载 2018-06-25 01:21:39 · 782 阅读 · 0 评论 -
使用 JavaScript 包管理工具（npm）
大约从 2010 年开始，几个相互竞争的 JavaScript 包管理工具开始出现，来帮人们从中心仓库中自动完成下载和升级的流程。Bower 在 2013 年可以说是最流行的一个了，但最终在 2015 年左右还是被 npm 打败了。（值得一提的是，大约从 2016 年开始，yarn 作为一个可选的 npm 替代开始占据一席之地，但 npm 仍占上风。）注意到，npm 作为一个包管理工具，最开始是专...转载 2018-06-25 01:24:01 · 11977 阅读 · 4 评论 -
ES6 对象的解构赋值
ES6的解构赋值，在我看来是提供了一个整体赋值的方案。包括数组和对象的整体赋值。基本原则如下：数组的元素是按次序排列的，变量的取值由它的位置决定；对象的属性没有次序，变量必须与属性同名，才能取到正确的值。数组的解构赋值：let [x, y]= [1, 2];// x = 1// y = 2对象的解构赋值：let { foo , bar } = { foo: "aaa", bar: "bbb" }...转载 2018-06-29 14:46:36 · 27391 阅读 · 1 评论 -
关于Vue实例的生命周期created和mounted的区别
每个钩子函数都在啥时间触发beforeCreate在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。created实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。beforeMount在...转载 2018-06-29 14:53:20 · 281 阅读 · 0 评论 -
vue.js 修饰符
事件修饰符Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。.stop.prevent.capture.self.once<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doTh...转载 2018-06-25 11:32:57 · 148 阅读 · 0 评论 -
常用js框架之vue.js(深入三:组件1）
这个要单独写，原文是这么描述vue的组件的：组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。这个特性我感觉比较难理解，一步步来，看看组件到底是个什么东西？1.举个栗子//model层：// ...转载 2018-06-25 12:21:04 · 172 阅读 · 0 评论 -
vue-router 2.0 常用基础知识点之router.push()
router.push(location)http://www.jianshu.com/p/ee7ff3d1d93d除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。router.push(location)想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加...转载 2018-06-25 17:43:23 · 207 阅读 · 0 评论 -
vue辅助函数mapState和mapGetter前面三个点
mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符（现处于 ECMASCript 提案 stage-3 阶段），我们可以极大地简化写法：computed: { localComputed () { /* ... */ }, // 使用对象展开...转载 2018-07-01 10:02:51 · 1052 阅读 · 0 评论 -
Vue.js 快速入门
关于前阵子的文章错误有点多所以从新修改了并添加了一些在官方脚手架vue-cli开发时需要注意的事项， Vue.js是一个轻巧、高性能、可组件化的MVVM库。Vue 的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的API（中英文都有提供），vue-router以及组件间的通信请使劲的敲这里：敲敲敲Vue快速入门准备：Vue.js 地址：http://cn.vuejs.org/Boots...转载 2018-07-01 10:12:49 · 189 阅读 · 0 评论 -
axio 参数配置
分析Config配置参数很多，我们一个一个来了解它们url —— 用来向服务器发送请求的urlmethod —— 请求方法，默认是GET方法baseURL —— 基础URL路径，假如url不是绝对路径，如https://some-domain.com/api/v1/login?name=jack,那么向服务器发送请求的URL将会是baseURL + url。transformRequest —— ...转载 2018-07-01 11:17:44 · 4555 阅读 · 0 评论 -
vue-cli脚手架config目录下index.js配置文件详解
此文章介绍vue-cli脚手架config目录下index.js配置文件https://www.cnblogs.com/ye-hcj/p/7077796.html此配置文件是用来定义开发环境和生产环境中所需要的参数关于注释当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看上代码// see http://vuejs-templates.github.io/web...转载 2018-07-01 15:40:39 · 782 阅读 · 0 评论 -
vue-cli脚手架config目录下index.js配置文件的方法
下面我就为大家分享一篇vue-cli脚手架config目录下index.js配置文件的方法，具有很好的参考价值，希望对大家有所帮助。此文章介绍vue-cli脚手架config目录下index.js配置文件1、此配置文件是用来定义开发环境和生产环境中所需要的参数2、关于注释当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看3、上代码1234567891011121...转载 2018-07-01 16:06:59 · 544 阅读 · 0 评论 -
module.exports用法
module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。1、返回一个JSON Objectvar app = { name: 'app', version: '1.0.0', sayName: function(name){ c...转载 2018-06-26 16:58:58 · 4885 阅读 · 0 评论 -
Vue.js 项目build后路径问题
Vue.js 项目build后路径问题执行npm run build 后再打开index.html发现引用的css和js出现了路径找不到的问题。 打开config/index.js 找到build：module.exports = { build: { env: require('./prod.env'), index: path.resolve(__d...转载 2018-06-26 17:02:44 · 2619 阅读 · 0 评论 -
vue-cli脚手架build目录中的build.js配置文件
本文系统讲解vue-cli脚手架build目录中的build.js配置文件这个配置文件是命令npm run build 的入口配置文件，主要用于生产环境由于这是一个系统的配置文件，将涉及很多的模块和插件，所以这部分内容我将分多个文章讲解，请关注我博客的其他文章关于注释当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看上代码// 写在前面// 此文件是在node...转载 2018-06-26 17:13:17 · 532 阅读 · 0 评论 -
webpack.config.js配置文件
1、基本配置webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。 //创建webpack.config.jsvar webpack = require('webpack');module.exports = {...转载 2018-06-26 17:20:04 · 964 阅读 · 0 评论 -
使用Vue.js 2.0搭建单页应用：从构建到部署
入门请参考这篇文章：Vue构建单页应用最佳实战在此记录下在我使用Vue.js 2.0开发较大型的单页应用时遇到的困难。写文章不容易，如果这篇文章对你有帮助，请给我的github仓库加个star~ github项目地址项目结构.├── build/ # webpack config files│ └── ...├── config/ ...转载 2018-06-26 17:41:39 · 1003 阅读 · 0 评论 -
Vue.js 目录结构
我们在 IDE（Eclipse、Atom等） 中打开该目录，结构如下所示：目录解析目录/文件说明build项目构建(webpack)相关代码config配置目录，包括端口号等。我们初学可以使用默认的。node_modulesnpm 加载的项目依赖模块src这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。component...转载 2018-06-26 17:55:41 · 777 阅读 · 0 评论 -
vue实例中data使用return包裹
在简单的vue实例中看到的Vue实例中data属性是如下方式展示的：let app= newVue({ el:"#app", data:{ msg:'' }, methods:{ }})在使用组件化的项目中使用的是如下形式：export default{ data(){ return { ...转载 2018-07-02 00:48:19 · 454 阅读 · 0 评论 -
Firebug & Chrome Console 控制台的一些其他功能
console.log(object[, object, ...])使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然，也可以不使用格式化输出来达到同样的目的：var animal='frog', count=10;console.log("The %s jumped over %d tall buildings", animal, count);co...转载 2018-07-02 10:14:01 · 183 阅读 · 0 评论 -
从零开始搭建VUE项目
前言： 此样板面向大型，严肃的项目，并假定您对Webpack和vue-loader有些熟悉。 请务必阅读vue-loader的常见工作流配方的文档。如果您只想尝试vue-loader或者鞭打一个快速原型，请改用webpack-simple模板。快速开始： 要使用这个模板，可以用vue-cli来支持一个项目。 建议使用npm 3+更高效的依赖关系树：$ npm install -g ...转载 2018-06-27 00:55:10 · 406 阅读 · 0 评论