Vuex 是什么？ 官方给出的解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 相信很多新选手看完这段话有种绝望的感觉。开始我也是这样的，后来我想到了一个比方！ 比如某年级有5个小班，每个小班有25个同学，但是只有一个老师授课，假如5个小班就对应着5个组件，每个班的25个同学就相当于每个组件中的25条数据，这个老师...
1. 什么是双向绑定？ Vue框架很核心的功能就是双向的数据绑定。 双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。这样以来，就彻底变革了之前Dom的开发方式，之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行...
上一节我们介绍了Vue.js框架，这一节，我们可以来试着动手写点小代码了。 1 简易安装要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件，先把代码敲代码再说。 <head><meta charset="UTF-8"><title>简易安装 Vue.js</title><script src="vue.js"></script> </head> 官网提供了Vue.js源码下载的地方：https://cdn.jsdelivr.ne...
1.Vue.js介绍 当前前端三大主流框架：Angular、React、Vue。React前段时间由于许可证风波，使得Vue的热度蹭蹭地上升。另外，Vue友好的API文档更是一大特色。Vue.js是一个非常轻量级的工具，与其说是一个MVVM框架，不如说是一个js库。Vue.js具有响应式编程和组件化的特点。响应式编程，即保持状态和视图的同步，状态也可以说是数据吧；而其组件化的理念与React则一样，即“一切都是组件，组件化思想方便于模块化的开发，是前...
1.node下载地址：http://nodejs.cn/download/，安装完成检查node和npm版本2.淘宝镜像 ： npm install cnpm -g --registry=https://registry.npm.taobao.org ，淘宝镜像比npm要快很多，可以直接用cnpm代替npm3.安装vue-cli：cnpm install -g vue-cli 安装webpack：cnpm install -g webpack -g 表示全局安装 编程过程中需要引入模块的话可以cnpm install <module> --save 比如需要安装vue-router路由模块直接用脚手架cnpm install vu...
这几天新项目用vue2.0开发，由于之前没用过vue，拿到项目框架看到都是.vue文件，不知道怎么用，以下是关于.vue文件的发现： 1、一个.vue文件是一个封装的组件，在.vue文件里可以写 html, css, js其中template 中写html 代码，其实就是定义模板。 2、各个.vue之间样式不是独立的，同一选择器在不同的.vue里只要满足选中的条件就可以起作用.比如我在箭头1指的文件里定义了样式 .box{ width:200px; },如果在箭头2指的文件里也有 .box，...
vuex.js状态（数据）管理在vue中当我们管理数据的时候比较乱，我们要用到下面的这个库，vuex.js Vuex介绍 每一个Vuex应用的核心就是store（仓库），他是用来存储数据的 "store" 基本上就是一个容器，它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同 1.Vuex 的状态存储是响应式的 2.你不能直接改变 store 中的状态 vuex有6个概念 Store(最基本的概念)（创库）State (数据)Getters(可以说是计算属性)Mu...
介绍 为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API，使用特殊的 slot 元素作为原始内容的插槽。 编译作用域 在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。假定模板为： <child-component>{{ message }} </child-component>message 应该绑定到父组件的数据，还是绑定到子组件的数...
看完vue2的官方文档后，找个入门项目巩固下知识点，简单的todolsit是个不错的选择。项目用到了vue.js vue.cli webpack ES6 node环境，完成项目后会对这些技术栈有了些了解。 准备开发环境 $ npm install -g vue-cli $ vue init ，比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev安装谷歌插件vue.js devtools下载vue.js的webpack模板下载todomvc的模板 (提供html和css)（也可以直接$ git clone https://...
前言 在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目，那么接下来，我们来梳理一下vue-cli项目的结构。 总体框架 一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。文件结构细分 1.build——[webpack配置] build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动...
原教程： http://cn.vuejs.org/guide/instance.html http://cn.vuejs.org/guide/syntax.html 本博文是在原教程的基础上加上实例，并尝试说明的更详细。 （十）Vue实例的生命周期 如图：（我自己翻译的中文版，英文版请查看本博文顶部的，第一个链接）（八）传入的数据绑定 先创建一个对象（假如是obj），然后将他传入Vue实例中，作为data属性的值，那么 ①obj的值的变化，将影响Vue实例中的值的变化； ②相反一样； ③可以在Vue实例...
1.Vuex是什么？学院派：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；集中存储和管理应用的所有组件状态。理解：以上这4个词是我们理解的关键。状态：什么是状态，我们可以通俗的理解为数据。Vue只关心视图层，那么视图的状态如何来确定？我们知道是通过数据驱动，这里的状态管理可以简单理解为管理数据。集中存储：Vue只关心视图，那么我们需要一个仓库（Store）来存储数据，而且是所有的数据集中存储，视图和数据就可以分...
前言 在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式，详细点击这篇文章查看。 但是如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。 一、安装并引入 Vuex 项目结构：首先使用 npm 安装 Vuex cnpm install vuex -S然后在 main.js 中引入import Vue from vue import App from ./App import Vuex...
1 什么是服务端渲染 SSR server side render 就是通过后端吐模板，而不是通过前端ajax获取数据，拼接字符串。 2 为什么需要SSR 需要SEO，因为爬虫不会等待ajax结果。 客户端网络慢，加载速度慢，影响用户体验。 3 另一种解决办法 预渲染 不是一次性下载整个单页应用，预渲染只是在构建时为了特定的路由生成特定的几个静态页面 你用webpack可以很简单地通过prerender-spa-plugin来添加预渲染 4 NodeJS编写Vue的SSR 首先npm install...
最近公司的H5项目准备重构，部门老大说前端使用vue2.0来开发，所以就准备把整个项目的开发过程记录下来，一方面是为了记录开发过程中遇到的坑，另一方面也加强自己写作的能力。 什么是 Vue？ 简要介绍一下vue，vue就是一个前端框架，特点是 数据双向绑定，比如说改变input输入框里的内容，就会自动同步更新到页面上绑定该输入框的组件的值。 看一下官方对vue的介绍： Vue.js，读音 /vju?/，和view发音几乎一样，可见重心是在视图（...