vue实战开发原理

想通过vue必须安装vue-cli Vue-cli是Vue的脚手架工具 地址：https://github.com/vuejs/vue-cli

主要作用：目录结构、本地调试、代码部署、热加载、单元测试

vue开发与angular,react的区别 http://blog.csdn.net/dreamstom/article/details/53043992

Vue.js的特性如下：1.轻量级的框架2.双向数据绑定3.指令4.插件化

vue工作原理 https://github.com/DMQ/mvvm
是一种MVVC视图模型, 也是实现数据的双向绑定 vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉defineProperty，猛戳这里整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点： 1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者 2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图 4、mvvm入口函数，整合以上三者

vue的生命周期 https://segmentfault.com/a/1190000008010666
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们注册js方法，可以让我们达到控制整个过程的目的地，哇赛，如果你搞过Asp.Net WebForm的话，你会发现整个就是WebForm的翻版嘛哈哈。值得注意的是，在这些事件响应方法中的this直接指向的是vue的实例。

vue提供的可以注册的钩子都在上图片的红色框标注。 他们是：

* beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

* created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，el属性目前不可见。在此时可以通过http.get获取数据,让文档及时得到渲染

* beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

* mounted

el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内。

* beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

* updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。

* beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

* destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

Vue 组件 https://www.cnblogs.com/w-wanglei/p/5851629.html
什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
Vue组件的使用有3个步骤，创建组件构造器，注册组件，使用组件3个方面。

Vue prop http://blog.csdn.net/jession_lin/article/details/60581318

1. 使用prop传递数据2. camelCase 转换为 kebab-case3. 动态Prop4. 字面量语法5. 单向数据流  当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。6. prop验证    组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。

Vue的父向子组件传参, 子组件向父传参 https://www.cnblogs.com/yujihang/p/6838283.html
1.父向子组件传参
App.vue为父，引入componetA组件之后，则可以在App.vue中使用标签（注意驼峰写法要改成componet-a写法，因为html对大小写不敏感，componenta与componentA对于它来说是一样的，不好区分，所以使用小写-小写这种写法）。
而子组件componetA中，声明props参数’msgfromfa’之后，就可以收到父向子组件传的参数了。例子中将msgfromfa显示在

标签中。
App.vue文件

<component-a msgfromfa="( 不积跬步,无以至千里;不积小流,无以成江海)"></component-a>import componentA from './components/componentA'export default {new Vue({components: {componentA        }    })}

componentA.vue文件

<p>{{ msgfromfa }}</p>export default {props: ['msgfromfa']}  

2.1 子组件向父传参
用法：vm.$emit( event, […args] )，触发当前实例上的事件。附加参数都会传给监听器回调。
例子：
App.vue中component-a绑定了自定义事件”child-say”。
子组件componentA中，单击按钮后触发”child-say”事件，并传参msg给父组件。父组件中listenToMyBoy方法把msg赋值给childWords，显示在

标签中。
App.vue文件

<p>Do you like me? {{childWords}}</p><component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>import componentA from './components/componentA'export default {new Vue({data: function () {return {childWords: ""    }},components: {componentA},methods: {listenToMyBoy: function (msg){this.childWords = msg            }        }    })}

componentA.vue文件

<button v-on:click="onClickMe">like!</button>import componentA from './components/componentA'export default {data: function () {return {msg: 'I like you!'}},methods: {onClickMe: function(){this.$emit('child-say',this.msg);}}}

2.2 .dispatch用法：vm.dispatch( event, […args] )，派发事件，首先在实例上触发它，然后沿着父链向上冒泡在触发一个监听器后停止。
例子：App.vue中events中注册”child-say”事件。子组件componentA中，单击按钮后触发”child-say”事件，并传参msg给父组件。
父组件中”child-say”方法把msg赋值给childWords，显示在

标签中。
App.vue文件

<p>Do you like me? {{childWords}}</p><component-a msgfromfa="(Just Say U Love Me)"></component-a>import componentA from './components/componentA'export default {new Vue({events: {'child-say' : function(msg){this.childWords = msg            }        }    })}

componentA.vue文件

<button v-on:click="onClickMe">like!</button>import componentA from './components/componentA'export default {data: function () {return {msg: 'I like you!'    }},methods: {onClickMe: function(){this.$dispatch('child-say',this.msg);        }    }}

Vue-router https://segmentfault.com/a/1190000007825106

1.1使用路由 在main.js中明确安装路由功能import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'Vue.use(VueRouter)1.2定义组件，这里使用从其他文件import进来import index from './components/index.vue'import hello from './components/hello.vue'1.3定义路由const routes = [{ path: '/index', component: index },{ path: '/hello', component: hello },]1.4创建router实例,然后传入toutes配置const router = new VueRouter({routes})1.5.1创建和挂载根实例, 通过router配置参数注入路由, 从而让整个应用都有路由功能const app = new Vue({router,render: h => h(App)}).$mount('#app')1.5.2在App.vue中通过<router-view></router-view>渲染<template><div id="app"><router-view></router-view></div></template>1.5.3在index.html中是  常规写法<body><div id="app"></div></body>2.重定向redirect      npm run dev 之后进入, 显示默认页面const routes = [{ path: '/', redirect: '/index'}, // 这样进/ 就会跳转到/index{ path: '/index', component: index }]3.嵌套路由         作用是在子路由中嵌套子路由const routes = [{ path: '/index', component: index,children: [{ path: 'info', component: info} //通过/index/info就可以访问到info组件了]}]4.懒加载        通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。const routes = [{ path: '/index', component: resolve => require(['./index.vue'], resolve) },{ path: '/hello', component: resolve => require(['./hello.vue'], resolve) },]5.router-link     在vue-router 2中，使用了<router-link></router-link> 在页面打开之后显示为a标签   通过这个可以实现类似于tab标签页切换6.路由信息对象1.$route.path字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。2.$route.params一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。3.$route.query一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。4.$route.hash当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。5.$route.fullPath完成解析后的 URL，包含查询参数和 hash 的完整路径。6.$route.matched一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。

Vue-X是什么 https://vuex.vuejs.org/zh-cn/intro.html
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，
提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

flux是一种架构思想,专门解决软件的结果问题, 他跟MVC架构是同一类东西,但是更加简单和清晰,以上图片就是flux
我们再什么情况下使用vueX呢?
如果ajax请求的数据只是在当前组件中使用，可以直接ajax请求，不需要vuex，如果他的父组件或者其他组件需要使用这个ajax返回的数据，
可以使用vuex，在其他组件里面的computed监听这个state，数据返回后会自动刷新其他组件的。store是个容器，所有的共享数据挂在state下面。

学习总结 https://www.cnblogs.com/libin-1/p/6518902.html

简单来说，vuex 就是使用一个 store 对象来包含所有的应用层级状态，也就是数据的来源。
当然如果应用比较庞大，我们可以将 store 模块化，也就是每个模块都有自己的 store。