想通过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属性目前不可见。在此时可以通过el属性目前不可见。在此时可以通过http.get获取数据,让文档及时得到渲染
* beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
* mounted
el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时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-case
3. 动态Prop
4. 字面量语法
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用法：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。
扫一扫
2881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
