Vue.js前端框架

vue.js是一套用于构建用户界面(用vue向html页面中填充数据)的渐进式框架，也就是说我们可以由浅入深的、从简单到复杂的来使用这个框架。

vue.js的核心是一个允许使用简洁的模版语法，来声明式地将数据渲染进DOM的系统。

vue的优点：

vue体积小，被压缩后只有33K
使用简单的命令加数据来进行DOM操作,避开了繁杂的获取,创建和删除DOM元素的操作.即简化了DOM元素的操作。
vue基于虚拟dom，拥有更高的运行效率
vue.js是响应式的数据驱动，简单来说就是由数据生成页面。它是双向数据绑定
vue的特性：

数据驱动视图  ：数据的变化会驱动视图自动更新，数据驱动视图是单向的数据绑定
双向数据绑定   ： js数据的变化会被自动渲染到页面上，页面上表单采集的数据发生变化时，会被vue自动获取并自动更新到js数据中。
 vue使用的是MVVM模式。MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM是指：Model、View、ViewModel。

Model表示当前页面渲染时所依赖的数据源
View表示当前页面所渲染的DOM结构
ViewModel表示vue实例，它是MVVM的核心
MVVM的工作原理：

ViewModel作为MVVM的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构；当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model数据源中。 

vue.js的应用可以分为两个部分：一个是视图（html），一个是脚本（script）。

脚手架结构剖析
再开始写项目以前，咱们须要弄清什么地方写什么代码。github

build文件夹
webpack配置文件。此处配置webpack规则。整个项目是经过webpack支持的。好比你要使用less，你须要在webapck规则里使用less。web

src 文件夹
撸码的地方～基本你全部的代码都在这一块完成。vuex

assets文件夹vue-cli

存放web中引用的图片 媒体资源。npm

components文件夹

主要存放可复用组件，你能够在任意页面中复用这些组件。

router文件夹

index.js 路由配置文件。在此处配置各个页面的跳转引用关系。

APP.vue

这里看一看作页面的根部。咱们能够在这个页面进行一些css reset 操做。

main.js

根逻辑，页面加载首先会加载这份js文件。

static文件夹
主要存放外部引用资源。好比xxx.min.js

index.html
vue是spa应用，因此只有一个入口，也就是index文件，这里咱们进行一些不可更改资源（好比某某库）的引用，和html页面meta 、title之类的设定。

vue核心概念
vue的核心概念是‘数据驱动’，假如咱们须要切换view层，咱们应该修改的是数据。下面我会分享一些我本身在学习vue中收获的一些实例，你们自行感觉。

实例展现的是方法论，概念性同样的东西，不要被例子局限，要将思惟扩散出去。知识点学习仍是看官方文档为主。

vue如何处理dom显示，样式切换，动态样式


watch 和 computed的 简析
vue提供了2个动态监测data的函数，一个是watch，一个是computed。

watch： 主要监测已经存在的data，处理data变化后的钩子

computed： 处理一个已存在的data，返回一个data



vuex 是一个比较好的例子，能够用来学习监测，何时用什么方法去处理这些变化。

v-for 列表渲染机制
v-for 是我认为vue中一个很是很是强大的指令，全部规律性动态数据的展现，均可以用for指令来完成。
v-for是很是强大，能够追踪循环体内任意一个值的变化，针对变化来单独渲染。

v－for 建议仔细阅读官方文档，而不是通读。在项目中，咱们应该养成习惯。对于可变化的，规律性数据都采用for指令渲染。 我之因此又把for指令写了一遍，是由于我在开始写vue时，根本就没有活用for指令的简便和强大，仍是古老的ul li 循环，繁杂的事件绑定委托。估计人类本性对一个东西还不太了解的时候会习惯性的用本身熟悉的方式去操做的缘由。



vue中引入组件以及父子组件的数据交互
关于组件，任意vue文件你均可以看作一个组件。 在项目中咱们通常使用的应该都是单文件组件，单文件组件与页面结构无异，是具备完整功能的一个模块。好比一个评论框，你就能够剥离成一个组件，在任意页面文件中引入这个组件。





vue过滤器
在有一些业务场景须要对数据进行一些转换，好比后端图片地址的前缀匹配，这个时候filters就派上大用场了。看个例子感觉一下。



vue路由
路由对于spa应用的重要性不言而喻，整个应用的页面关系都是经过路由定义的。咱们先来看看一个路由文件大体是什么样子



vue 使用history模式，咱们就能够去使用history的API，须要在路由配置中启用。默认hash模式，history模式也是通常应用的经常使用模式。

//切换当前地址，同 history.replaceState
 this.$router.replace({name: 'list'})  
//向history推入一级，同history.push
 this.$router.push({name: 'list'})  
//添加参数
 this.$router.push({name: 'list', query: {setting: 'setting'}})

//监测路由变化
watch:{
      '$route': function () {
       //处理事件
      }
    },

》》》》能够在页面任意处打印this.$route查看路由对象
vue的路由配置相对来讲，是比较简单的，阅读一遍router文档，就能够快速上手。

路由是很是重要的一块，在动手开始写你的vue项目以前，你很是有必要通读一遍路由文档。而不是碰到问题再去解决。嵌套路由，动态路由会对你的开发起到很是有用的帮助。官方路由

可监测的全局变量——vuex
项目开发中，每每咱们会有一些全局变量，可是正常全局变量，vue是不能监测的，这个时候vuex就派上用场了。 vuex官方文档

npm install vuex --save

／／安装好vuex后，咱们先新建一个store文件夹，存放vuex相关文件，以下图所示
>>>>> index.js

import Vue from 'vue'
import Vuex from 'vuex'
import modulesApp from './modules/app'  //引入一个app模块
Vue.use(Vuex)

let store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    app: modulesApp
  }
})

export default store

———————————————— 分割线——————————————————

>>>>>app.js    //这里是个个人示例结构，能够查阅文档选择本身喜欢的书写方式

let state = {
  height: document.documentElement.scrollHeight + 'px',
  total: 1,
  list: [],

};

let getters = {};

let mutations = {
  height: state => state.height = document.documentElement.scrollHeight + 'px',
  totalChange (state, total) {
    state.total = total
  },
  listChange (state, list) {
    state.list = list
  },

};

let actions = {};

export default {
  state,
  getters,
  mutations,
  actions
}


如何开始写第一个demo项目
看完以上内容，想必你们对vue都有了进一步的了解。在通读官方文档后，咱们对vue都有一个大体的了解，这样其实对于新手而言仍是没有方向去写一个demo出来的，咱们每每想写个漂亮的demo，但这样就必须花大量时间去写html和css，这点博主深有体会，看了2遍文档后仍是不知道怎么去入手写个demo练手。这里博主有个建议就是：

专一于vue自己，而不是花过多的时间去写html，css。

以上咱们已经搭建了一个vue开发环境，接下来就是找一款心仪的UI组件库，博主这里推荐iview，我的感受很是漂亮。而后就是构思你的demo要写什么，好了，拖组件搭UI，开始写真正写项目代码把，把更多时间花在vue学习之上。

后记
写到这里也就告一段落了。经过项目去学习vue，在这个过程碰到问题解决问题，就是一个效率的学习方法。
之后回过头来看，“本身之前这个demo写的这么垃圾？” 就说明你又进步了。入门第一步，框架用的好，用的熟练，当表面已经没法知足咱们的时候，OK ，深刻框架的时机到了。能够开始研究vue是怎么实现数据绑定，怎么实现数据响应式这些更深层的技术原理了。