cnpm i string-loader -D
配置loader{
	test:/\.string$/,
	loader:'string'

}
单页面应用 一个视图一个string
双向绑定
 <input type="text" v-model="message">
渲染列别 v-for="value in 集合"  {{todo.text}}
绑定事件 v-on:事件名="方法名"
方法定义 methods:{
	方法名(){
	this.message
	}
}
v-on:keyup.enter="事件名" 需要传参可以加括号() $index是索引值
v-if 条件渲染 插值表达式{{*}}加*只渲染一次  {{}}只解析文本 {{{}}}三个可以解析html
过滤器|
v-bind:属性名=M层属性名 也可以绑定属性
v-bind缩写 :属性名=M层属性名  v-on缩写 @
computed:{
	b:function(){
	return this.a+1
}
}//计算属性
vm.$watch()
vm对象上调用watch vm.$watch('检测值',function(val){
	//val为新值
	var vm =this;
	vm.fullName=val+''+vm.lastName;
})
定义样式 v-bind:class="{ 'classA':isA,'class-B':isB}" 把true的class加上
v-bind:class="clsObj"对象写在data里面
v-bind:class="[x,y]" 也可以这样用  同时可以直接定义class不冲突
条件渲染v-if="isShow" v-else
template 包装元素
v-show v-for="(index,item) in items" 第一个参数可以展开 后面就不需要加$
数组变动检测
track-by="$index"
用vm.items[1]=值  不能刷新监控数组 
vm.items.$set(index,newval) 可以刷新监控数组
vm.items.length 无法清空数组 vm.items.splice(0,vm.items.length)可以这样清空
如果事件传多个参数 $event $index 
v-on:click.stop 绑定事件可以阻止事件冒泡 v-on:cliock.stop.prevent阻止冒泡和默认事件
enter tab delete esc spaace up down left right
checkbox v-model 为true勾 false不勾	
vue-resource  插件 npm i vue-resource
{
this.$http.get('Url').then(
	(res)=>{
	//success call back
},
	(res)=>{
	//error callback
}）
}

cnpm i vue-loader -D
配置.config
{
	test:/\.vue$/,
	loader:'vue'
}
string-loader可以不要
components组件文件夹
index.vue-><template></template> <script></script>
app.js 里面引入.vue npm list vue-loader 可以查看版本
cnpm i vue-loader@版本号 -D 8.5.2

cnpm i vue-html-loader -D	
在module平级定义
//vue
vue:{
	loaders:{
		js:'babel'
	}
}
->index.html配置路由入口<router-view></router-view>

->在app.js里面引入
->同时引入vue 执行Vue.use( 插件名)


let router = new VueRouter();
let App = Vue.extend({});
router.map({
    '/': { //访问的根 调用的组件
        component: index //引入的.vue
    }
    
})
router.srart(App, 'body') //组件名 入口名

router.map({
    '/': { //访问的根 调用的组件
        component: index //引入的.vue
        ,subRoutes:{
        	'/'：{
        		component:main
        		}       //子路由的默认页面
        }
    }
    
})
在index.vue里面加 <router-view></router-view>
export default {
	data(){
		return {
			//M层
		}
}
}

'/search':{
	component:search
}	

return {
	tablist:[
	{
		path:'/',icon:'','name':''
		}]
}
v-link={'path':xxxx}
具名路径 restful

'/detail/:id':{
	name:"detail",

}

v-link="{name:'detail',params:{id:l.id}}"
在模板中{{$router.params.id}}可以接到参数
this.$router.params.id在js中

Vue.nextTick(fn) 在DOM更新后执行

路由的切换->组件的切换
调整组件动画的方式transtion-mode

Vue.directive(id, definition)
myScroll(){
	var that =this;
	Vue.directive('scroll',value =>{
		that.isAllloaded(value,(value)=>{
			new iScroll(value,{
				click:true
				})
			})
		})
}
import commonUtil from ""
commonUtil.myScroll();

1. 
cnpm i --save vuex
新建文件夹vuex (放一些关于state管理的文件)
新建store.js
state对象里面放公共的全局变量
mutations 里面放一些变更state的方法
export default new Vuex.Store({
	state,
	mutations
	})
mutations里面的方法惯例全大写
const state={
	tabIndex:0
}
const mutations={
	CHANGEINDEX(state,curIndex){
		state.tabIndex=curIndex;
	}
}
-> app.js 
	import store from ""
	let App = Vue.extend({
	store:store //注册store
	})
触发更新 actions做的 定义更新mutations做的		
新建actions.js
export const changeIndex=({dispatch,state},tabIndex)=>{
	dispatch('CHANGEINDEX',tabIndex)
}
在子组件里面加一个
import {changeIndex} from ""
vuex:{
	actions:{
		change:changeIndex
	}
},
ready(){
	this.change(1)
}

在组件中获取
新建getters.js
export  const getIndex = state => state.tabIndex;

->在父组件中
import {getIndex }from ''
import  {changeIndex} from ''
vuex:{
	getters:{
		curIndex:getIndex
	},
	actions:{
		change:changeIndex
	}
}

扩展yo 样式  可以在yo-dialog yo-dialog-a
@include yo-dialog(
	$name: a
){


}
lib->core->variables

插件名.install = function(){

}	
创建plugins文件夹
新建vue-dialog.vue 
<template>
组件内容
</template>
<script>
</script>
新建dialog.js
let VueDialog ={};
import dialog frome '';
VueDialog.install=function(){
	//定义指令
	//Vue.directive('dialog',function(){
	//
	//	})
	Vue.component('vue-dialog',dialog);//注册组件
}
export default VueDialog

在要使用的文件夹
import VueDialog from '';
Vue.use(VueDialog);
使用<vue-dialog></vue-dialog>