vue.html

组件

<head-b></head-b>
	
import headA from './components/head.vue'

	components: {
		headB:  headA
	}


// 全局组件 不需要声明


main.js
import headA from './components/head.vue'

Vue.component('headB', headA)	


传值
prors

传方法
$on  
$emit



css
	scoped  局部使用



过滤器
vm.filters: {
	myFilter: function($value){
		return 1;
	}
}


全局
Vue.filter('myFilter', function($value){
	return 1;
})



获取dom
ref="dom"     可以放在组件上 $el
this.$refs.dom











/webpack-dev-server.js



安装node

安装npm

安装cnpm
	npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli
	cnpm install -g vue-cli


npm install --no-optional

npm install live-server
live-server  直接启动本地的一个服务器
npm init 项目初始化

//安装插件到项目
npm install less --save-dev



/webpack-dev-server.js



安装vue环境

	安装node.js

	安装cnpm
	npm install -g cnpm --registry=https://registry.npm.taobao.org

	安装vue-cli
		cnpm install -g vue-cli

	新建一个vue 项目
		vue init webpack vue-demo

	// 运行开发者模式
		npm run dev


Vue.js 是用于构建交互式的 Web 界面的库
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API


指令 
	Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）

常用指令
	v-if
		根据条件表达式的值来执行元素的插入或者删除行为。
	v-show
		条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
	v-else
		为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别
	v-for="item in items"
		基于一个数组渲染一个列表 items是一个数组，item是当前被遍历的数组元素。
	v-bind
		可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
	v-on
		和v-bind 类似  绑定方法  <a v-on:click="doSomething">
	v-model
		绑定数据

	v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。


	定义指令
		bind 
		// 绑定的时候
		inserted
		// 新增的时候
		updatesdf
		// 更新的时候
		componentUpdated
		// 被绑定于元素所在的模板更新时调用, 而无论绑定值是否变化
		unbind
		// 只调用一次 指令与元素解绑时调用

		//绑定和更新都有的时候使用一个匿名函数就可以了
	Vue. directive('stat', {
			bind(el, bind){
				console.log(bind);
	fdsafdsaf	sdfsad	}
		})afdsfads

		app.$destroy() 销毁fdsfdsfdsfasdfsd


当两个name一样的表单存在 key属性抹掉数据

v-if
v-else-if
v-else
fsd
//循环
v-for="v in news"
v-for="v in 20"  
v-for="(v,k,index) of news"


v-bin:class="hd"
:class="{color:false,font:true}"   //判断给
:class="['color', 'font']"     //直接给类
:lists.sync="goods" 			//子组件 同步父组件数据

:css 								//禁止css

v-on:click
v-on:keyup.enter  //回车时执行  
@submit
@click.self 	  //点自己才触发
@click.capture    //捕获     冒泡的反方向
@submit.prevent   //取消提交默认行为
@click.left 		//鼠标左键
@contextmenu 		//鼠标右键 
@click.stop      //阻止冒泡

//velocity.org    动画js类库 
@beforeEnter 	//动画  进来的之前    第一个参数 元素
@enter 			//进来  第一个参数 元素   第二个回调  
@leave  		//出去 

//绑定数据
v-model="hd"
v-model.number    //数值类型
v-model.trim      //去掉空格
v-model.lazy      //懒加载   失去焦点

//只绑定一次
v-once

//引入数据
v-text
v-htmlmac



// extend 扩展   propsData
<exten>{{a}}</exten>

let exten = Vue.extend({
	template: "<h1>123</h1>",
	props: ['a']
})


new exten({propsData:{a:1}}).$mount('exten');


// set 全局操作
var outData = {
	count: 1
}
Vue.set(outData, 'count', 2)

var app = new Vue({
	data: outData
})

// mount 挂载
<div id='app'></div>

var jspang = Vue.extend({
	template: '<h1></h1>',
	data: function(){
		return {
			message: 'hello'
		}
	}

	var vm = new jspang().$mout('#app')
})

// 卸载
app.$destroy()

// 更新
app.$forceUpdate()

// 修改
app.$nextTick()


// 执行主 方法
app.$emit('mo')

实例事件
app.$on('reduce', function(){
	this.num --;
})

app.$once('add', function(){
	// 只能执行一次         
})

app.$off('reduce', function(){
	// 关闭事件
})


//  内置组件  slot
<div id="app">
	<jspang slot="bolgUrl"></jspang>
</div>

<template id="temp">
	<div>
		<slot name="bolgUrl"></slot>
	</div>
</template>

var jspan = {
	template: '#temp'
}

var app = new Vue({
	components: {
		'jspang': jspan
		]
	}
})



// template 模板
<template id="d">
	<div>第二种模板</div>
</template>
<script type="x-template" id="d">
	<div>第三种模板</div>
</script>

var app = new Vue({
	template:`
		<h1>第一种模板</h1>
	`,
	template: "#d"

})

// component 组件
<jspang></jspang>
<panda :a="aaa"></panda>
<component :is="city"> 动态绑定组件 </component>

Vue.component('jspang', {
	template: `<div>全局组件 可以在任何vue实例范围里面</div>`
})

var panda = {
	template: `<div>1</div>`
}
var city = {
	template: `
	<div>
		<panda></panda>
	</div>
	`,
	components: {'panda': panda}
}

var app = new Vue({
	data: {
		message: '啊'
	},

	components:{
		// 第一种
		'panda': {
			template:`<div>局部组件 {{ a }}</div>`
			peops: ['a']    // 注册
		}

		// 第二张
		'panda': panda

	}
})




//
$refs  表单    this.$refs.表单的ref值

//  把对象转为数组
_.values(object)


// 选项
<div id="app">
	{{ computed }}
</div>

var app = new Vue({
	el: '#app',
	data: {
		count: 1
	},
	//实例   返回数据  计算属性   变量改变时
	computed: {
		sum(){
			return 1; 
		}
	},
	//方法   执行时间
	methods: {
		sum(){
			this.$emit('sum')    //子组件呼叫  主组件 绑定方法
		}
	}
	//监听   数据改变的时候  
	watch: {
		word: function(newV, oldV){
			app.result
		}
	}

	app.$watch('wendu', function(newV, oldV){

	})
	// mixins 混入
	var addConsole = {
		updated: function(){
			console.log(1)
		}
	}

	Vue.mixin({
		updated: function(){
			// 全局的混入
		}
	})

	
	mixins: ['addConsole']

	// extends 扩展
	var extendsObj = {
		updated: function(){
			console.log(1);
		}
	}

	extends: extendsObj
	

})
	





animate.css   //过度动画类库
<taransition mode="模式"></taransition>
//过度动画   配合taransition   样式类名
	hd-enter 				//开始
		hd-enter-active		//过程
			hd-enter-to     //结束

	hd-leave
		hd-leave-active
			hd-leave-to





//监听   数据改变的时候  
watch: {
	'word': function(newV, oldV){
		app.result
	}
}

// 组件激活的时候使用
activated(){
	
}



生命周期
	beforeCreate
	// 初始化之前
	created
	// 创建完成
	beforeMount
	// 挂载前
	mounted
	// 被挂载之后   页面渲染完执行
	beforeUpdate
	// 数据更新前
	updated
	// 更新之后
	activated
	deactivated
	beforeDestroy
	// 销毁之前
	destroyed
	// 销毁之后


//追加数据
	push
	unshift
	pop
	shift

	//删除
	splice(start, lenth)
	//排序
	sort
	//反转
	reverse


axios     //http请求
	axios.get('php').then(function()response{

	})

lodash    //延时执行
	_.debounce(function(){}, 1000)


// 磨板输出定义符
	delimiter: ['{{', '}']


组件

	Vue.component('hdSlie',{
		template: '123'
		props: ['hd']     // 获取组件标签属性 给data  
		props: {
			list : {
				required: true  //必须
				type: false   //指定类型
				default: false  //默认值
				validator(v)    //验证函数
					return true;
				}
				default(){
					return [{'title':'abc'}];
				}
			}
		}
	}) 			子组件  全局的	
	new Vue({
		el: '',
		components:{
			hdSlies:{
				template: '321'
			}
		}, //局部组件
		//绑定命令    
		directive: {
			stat:{
				bind(el,bid){}
			}
		}
	})    根组件




//路由   router
	<route-link to="/">home</route-link>
	<route-link :to="{name:路由中的name}"></route-link>


	<route-view name=""></route-view>


	const php = {
		template: '<h1>123</h1>'
	}
	let route = new VueRoute({
		routes: [
			{path: '/phpedit/:id(a\\d{2})?', compnent: php, name: phpe}

			// 多组件  compent 加 s
			{path: '/', components: {
				default: menu,
				news:news
				//  news 是根据 route-view 的name值
			}}

			{path: '/php/', compnent: php, children:[
				//子路由
			]}

			//重定向
			{path: '/', redirect: //重定向}
			{path: '/about', redirect: {name: 'content', params: {id: 3}}}

			//别名
			{path: '/conent/2', alias: ['/about']}


			//其他的路由  如404
			{path: '*', compnent: NotFound}

			// 钩子函数
			{beforeEnter: (to. from, next) => {
				// 允许跳转
				next()
			}}
		]
	})


	export default{
		// 请求前
		beforeRouteEnter: (to, from, next) => {}	
		// 准备离开
		beforeRouteLeave: (to, from, next) => {}	
	}
	
	$route.params

	this.$route.params    //参数
	this.$router.push('')  //跳转到
	this.$router.replace('')  //没有历史记录  直接替换url
	this.$router.go(-1)  //
	
//路由监听
watch: {
	'$route'(to, from){

	}
}



路由切换就是控制组件显示隐藏   可以使用动画


vuex
	npm install vuex --save

	创建 src/vuex/store.js 文件
		import Vue from 'vue'
		import Vuex from 'vuex'
		Vue.use(Vuex)
		export default new Vuex.Store({
			state,
			mutations,
			getters,
			actions
		})

	文件里面引入
		import store from '@/vuex/store'
	    export default{
	        data(){},
	        store    
    	}

	// 数据   仓库
	state
		count: 1

		$store.state.count

	// 修改    仓库数据
	mutations
		add(state, n) {
			state.count += n;
		}

		$store.commit('add', n)


	// 获取    仓库数据时
	getters
		count:function(state){
			return state.count
		}

		$store.getters.count


	// 修改数据 方法  
	actions
		addAction(store, n){
			store.commit('add', 10)
		}

		addAction({commit}, n){
			commit('add')
		}

		this.$store.dispatch('addAction', 10)

	// 模块组
		const moduleA={
	    	state,mutations,getters,actions
		}

		export default new Vuex.Store({
		    modules:{a:moduleA}
		})

		<h3>{{$store.state.a.count}}</h3>

		computed:{
		    count(){
		        return this.$store.state.a.count;
		    }
		},


const caetModule = {
	// 命名空间
	namespaced: true

	this.$store.getters['cart/goods']
	this.$store.dispatch('cart/loadGoods')
}

let store = new Vuex.Store({
	//定义模块
modules: {
		cart: cartModule
	}
	this.$store.state.cart.goods

	// 数据
	state: {
		number: 1
	},

	属性 获取
	// 获取仓库
	getters: {
		total:state=>{
			let number = state.number;
			return number
		}
	},

	属性获取
	// 修改仓库
	mutaions: {
		del(state, param){
			
		},
		setData(state, param){
			state.goods = param
		}
	}

	this.$store.commit('del', {id: id})

	// 抓取数据  发异步
	actions: {
		loadGoods(store){
			//异步
			store.commit('setData',{goods:response.data})
		}	
	}

	this.$store.dispatch('loadGoods')
})


<hd-slie>
	<div :is="">使用的组件</div>
	<p slot="body">内容分发</p>
	<template scope="v">{{v}}</template>  //接收slot的属性

	<transition name=hd>
		<h1 v-if="type">过度动画显示</h1>
	</transition>
	<transition enter-active-class="">
		<h1 v-if="type">css过度动画显示</h1>
	</transition>

	<router-link to="/php">1</router-link>
	<router-link to="{name:'phpe', params{id:v.id}}">1</router-link>
	<router-view name="news" class="news">
		{{$route.params.id}}  接收参数
	<router-view>
</hd-slie>
<script type="text/x-template" id="hdSlie">
	<div>
		<slot name="body">没有传递内容</slot>
		<slot name="head">没有传递内容</slot>
	</div>
</script>





<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
        	<my-component></my-component>
            <p><input type="text" v-model="message"></p>
            <p>
                <!--click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <!--click事件使用内联语句-->
                <button v-on:click="say('Hi')">Hi</button>
            </p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
 		// 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
        Vue.component('my-component', myComponent)

        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                greet: function() {
                    // // 方法内 `this` 指向 vm
                    alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            },
			components: {
				//局部注册
			},
			router: route
        })
    </script>
</html>



单页面去掉#
	apache
		.htaccess
			RewiteEngine On
			RewriteCond ${REQUEST_FILENAME} !-d
			RewriteCond ${REQUEST_FILENAME} !-f
			RewiteRule ^ index.html [L]

		new VueRouter({
			mode: 'history'
		})	




<style lang="less" scoped="">
	scoped 作用域
</style>





// 路径别名
  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    {
      'vue$': 'vue/dist/vue',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
    }
  },