vue入门

一、vue的特点

1、模板渲染
2、模块化
3、扩展功能
路由、ajax、数据流

二、内容

vue实例 模板渲染 条件渲染
组件交互 标签属性 事件绑定 计算属性 属性监听
表单 动画 vue-cli项目搭建
vue-router vuex vue组件 vue指令 内置组件
实例方法 实例选项 实例属性

三、入门

1、 项目搭建

>	创建：
		vue init webpack project-name
	依赖：
		npm install
	运行：
		npm run dev

2、案例解析

new Vue({
	  el: '#app',//挂载位置
	  router,
	  components: { App },
	  template: '<App/>'//挂载的东西，即组件
	})

var root=new Vue({
  el: '#app',
  router,
  template: '<div>{{fruit}}</div>',
  data:{
  	fruit:'apple'//数据部分
  }
})
获取对象数据：
	root.$data
对象绑定事件：
	root.$on('emit',function(){})

3、vue生命周期

		0、初始化对象
		1、beforeCreate
		2、data\method初始化
		3、created
		4、模板在内存中编译完
		5、beforeMount
		6、内存中替换到页面
		7、Mounted
		8、beforeUpdate旧数据
		9、updated数据更新
		10、beforeDestory
		11、destroyed

4、全局注册组件(组件树)

	定义：
		Vue.compenent('my-comp',{
			template:'<p>hello</p>'
		})
	调用：
		<my-comp/>

5、局部组件

		var my-comp={
			template:'<p>hello</p>'
		}
		new Vue({
		  el: '#app',
		  components:{
		  	'my-header':my-comp
		  }
		})
	    在挂载元素app位置内调用:
			<my-header/>

6、多组件组合

		var mychild={
			template:'<p>hello child</p>'
		}
		var myparent={
			template:'<p><my-chlid/>hello parent</p>',
			compenents：{
				'my-chlid':mychild
			}
		}

7、组件赋值

		避免多个相同组件同时更新
		data() {
			return {
				name:'s'
			}
		}

8、注册插件

		Vue.use()

9、指令

		v-on:事件名=""
		v-on:click=""
		缩写：@click

10、内置组件

	<router-view/>

四、入门2

1、模板内数据显示

	* {{name}}
	* v-text
	* v-html

2、列表

	* 数组
		<p v-for="(item,index) in list">
			{{index}}
			{{item.name}}
			{{item.price}}
		</p>

		data(){
			list:[{
				name:'link',
				price:'12'
			},{
				name:'min',
				price:'23'
			}],
			obj:{
				name:'link',
				price:'12'	
			}
		}
	* 对象
		<p v-for="(value,key) in obj">
			{{key}}
			{{value}}
		</p>
	* 组件
		导入模板:
			import componentA from './component/a.vue'
		注册为组件：
			export default {
				components: {'ComponentA'：componentA}
			}
		渲染：	
			<ComponentA v-for="(value,key) in obj">
			</ComponentA>

3、组件内方法访问数据

	data(){
		return{
			list:[{
			   name:'link'
			}]
		}
	}
	说明：this类似java中的对象,列表更新方法pop
	methods:{
		add() {
			this.list.push({
				name:'min'
			})
		}
	}

4、v-bind绑定

	v-bind:html的标签属性
	如：	  v-bind:href="link"
	缩写：      ：href="link"

	如:  :class
	     v-bind:class="str"

	如：  ：style
	data(){
		return{
			link:'www.baidu.com',
			str:red-font
		}
	}

5、条件渲染

	v-if="true":dom 消失
	v-else

	v-show="true"：display:none
	v-else

6、自定义事件

	<compA/ @my-event="onCompMyEvent">
	onCompMyEvent(param){
		console.log("onCompMyEvent"+param)
	}
	子组件：
	<button @click="emitMyEvent">emit</button>
	data(){
		return{
			hello:'link'
		}
	}
	emitMyEvent(){
		this.$emit('my-event',this.hello)
	}

7、表单数据绑定(双向绑定)

	<input v-model="val" type="text"></input>

	<select v-model='selection'>
		<option v-for="item in selectOptions" :value="item.value">{{item.text}}</option>
	</select>
	selection:null
	selectOptions:[
		{
		  text:'1',
		  value: '1'
		},{
		  text:'2',
		  value:'2';
		}
	]

8、v-model

	v-model.number:数字
	v-model.lazy:懒加载
	v-model.trim:去空

9、计算属性与属性监听

  * 计算属性(调用方法也可以)
	{{myVal}}

	data(){
		return{
			value:'link'
		}
	}
	在value更新时myVal也更新,即自动更新
	computed:{
		myVal(){
			return this.value
		}
	}
  * 属性监听
  	<input v-model="myVal"></input>
	data(){
		return{
			myVal:'',
			list:[
				{name:'link'}
			]
		}
	}
	在list被修改时,自动更新myVal
  	watch:{
  		myVal:function(val,oldVal){
  			console.log(val+":"+oldVal)
  		},
  		list:function(){}
  	}

五、进阶

1、父子组件通信

	parent——>child:Props
	child——>parent:Emit\Event

2、向子组件传数据

  * 例：
	父组件：
	    <child number='10'></child>
	子组件：
		引入：
			props:['number']
		调用：
			{{number}}
 *  动态传递
	<input type="text" v-model="myVal"/>
	<child v-bind:my-value="myVal"></child>

	data(){
		return{
			myVal:''
		}
	}

3、向父组件传数据

	子组件：	
	<button @click="emitMyEvent"></button>
	data(){
		return{
			name:'link'
		}
	}
	methods:{
		emitMyEvent(){
			this.$emit('myEvent',this.name)
		}
	}
	父组件：
	data(){
		return{
			msg:''
		}
	}
	<child @myEvent="getMyEvent"></child>
	getMyEvent(name){
	     this.msg=name
	}

4、插槽

	本质：父组件向子组件传(代码块)数据
	父组件：
		<child @myEvent="myevent">
	          <p>123</p>
	          <span>link min</span>
	    </child>
	子组件：
	child.vue:
		显示数据
		<slot></slot>

5、具名插槽:

  <child @myEvent="myevent">
      <p slot="header">header</p>
      <span slot="footer">footer</span>
  </child>
 child.vue:
  <template>
    <slot name="header">no heaer</slot>
    <slot name="footer">no footer</slot>
  </template>

说明：
	<slot>:显示数据插槽
	slot="":传入的数据
	slot-scope:prop外部数据
案例：	
组件与插槽分离：
<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
	  ||
  <h1 slot="header">Here might be a page title</h1>
</base-layout>

base-layout.vue:
<template>
   <slot name="header">no heaer</slot>
   <slot name="footer">no footer</slot>
</template>

组件与插槽共用：
<template slot="default" slot-scope="slotProps">
   {{ slotProps.msg }}
</template>

6、组件切换

	<p :is="currentView"></p>

	import com-A from './components/com-A'
	import com-B from './components/com-B'
	components:{
		com-A,
		com-B
	},
	data(){
	  ruturn{
	  	currentView:'com-A'
	  }
	},
	methods:{
		change(){
			if(this.currentView==com-A){
				this.currentView==com-B
			}else{
				this.currentView==com-A
			}
		}
	}

六、高级

1、过渡:

  *	css过渡四个阶段：
		fade-enter
		fade-enter-active
		fade-leave-active
		fade-leave
	例：
	  <transition name="fade">
        <p v-show="res">Hello,I am world</p>
      </transition>
      .fade-enter-active,.fade-leave-active{
	      transition: all .2s;
	  }
	  .fade-enter,.fade-leave-active{
	    opacity: 0;
	   }
	用法：包含组件动态效果进入显示

  *js过渡

2、自定义指令

	<p v-color="'red'">1</p>

	directives:{
	      color:function(el,binding){
	        el.style.color=binding.value
	      }
	}

3、插件

	安装：
		npm install vue-router --save
	导入：
		import Router from 'vue-router'
		||
		var Router =require('vue-router')
	注册：
		Vue.use(Router)
	放入根组件：

4、单文件组件

5、mixins

七、工具

1、vue-cli

	* 项目架构
	* 测试
	* 打包
	* Node(4.x)
	* Git

2、安装vue-cli

	安装：
		npm install vue-cli -g
	创建项目：
		vue init webpack project-name
	安装依赖：
		npm install
	运行：
		npm run dev
	打包：
		npm run build

3、变量声明

	let:作用在{}内
	var:全局
	const:常量

4、组件以变量形式导出\导入

	export  {com}
	import {com} from './components/com'

5、路由

	本质：访问的页面的位置,与请求url保持一致
	优点：比原来的路由不用重复加载资源
	注：将router放到根节点
	let router=new Router({
		mode:'history',
		routes:[
			{
				path:'/apple',
				component:Apple,
			}
		]
	})

	路由跳转：
		默认：<router-view/>
		链接：<router-link :to="{path:'apple'}"/>

6、路由参数

url:localhost:8080/apple/red
routes:[
	{
		path:'/apple/:color',
		component:Apple,
	}
]
* 在apple.vue页面的方法获取参数：
	methods:{
		getParam(){
			console.log(this.$route.params)
		}
	}
* 在页面直接获取参数
	{{$route.params.color}}

7、路由嵌套

```java
routes:[
	{
		path:'/apple',
		component:Apple,
		children:[
			{
				path:'/red',
				component:RedApple,
			}
		]
	}
]

apple.vue:
	<template>
		//子组件的路由位置,必须包含在父组件内
		//此处为RedApple
		//此时的url：/apple/red
		<router-view/>
	</template>

路由跳转：
	<router-link :to="{path:'apple/red'}"/>

8、router-link

 基于当前路径跳转：
		<router-link to="apple"/>
		基于根目录跳转：
			<router-link to="/apple"/>
		动态绑定：
			<router-link ：to="apple"/>
			data(){
				return{
					apple:'apple'
				}
			}
			或
			<router-link :to="'apple'"/>
		绑定带参数：
			<router-link :to="{path:'apple',param:{color:'red'}}"/>
		具名路由：
			<router-link :to="{name:'applePage'}"/>
			routes:[
				{
					path:'/apple',
					component:Apple,
					name:'applePage'
				}
			]
		指定标签：
			<router-link :to="'apple'" tag="li"/>
			或
			<router-link :to="'child'" tag="a">apple</router-link>

9、编程式导航

router.push(‘apple’)
或
router.push({path:‘apple’})
用处：
在路由跳转前，检查用户登录信息
router.beforeEach()
未登录时转入登录页面

10、命名视图

	
apple.vue:
	<router-view name="viewA"></router-view>
	<router-view name="viewB"></router-view>	
routes:[
		{
			path:'/apple',
			components:{
				viewA:Apple,
				viewB:RedApple
			},
			name:'applePage'
		}
]

11、重定向

routes:[
	{
		path:'/',
		redirect:'/apple'
	},
	{
		path:'/apple'
		component:Apple
	}
]

12、vuex状态管理

多组件的状态交互、数据共享：
即不同的组件使用到相同的数据
Store:数据中心
更新时同步到所有组件

单向流动：
Actions:动作
|
Mutation:事件
|
State:状态
|
Components:组件更新

13、vuex使用

		安装：
			npm install vuex --save
			save为保存依赖
		引入：
			import Vuex from 'vuex'
			Vue.use(vuex)
		调用：
			let store=new Vuex.Store({
				state:{
					totalPrice:0
				},
				mutations:{
					increment(state,price){
						state.totalPrice+=price
					},
					decrement(state,price){
						state.totalPrice-=price
					}
				}
			})
			放入Vue根节点,注册为全局组件：
				new Vue({
					store
				})
			在其他组件调用：
				数据：
					this.$store.state.totalPrice
				操作：
					this.$store.commit('increment',this.price)	
					注:commit(方法名,参数)
				父组件自动刷新：
					 {{totalPrice}}
					 computed:{
					    totalPrice(){
					        return  this.$store.state.totalPrice
					    }
					  }
		action与getters:
			let store=new Vuex.Store({
				state:{
					totalPrice:0
				},
				getters:{
					getTotal(state){
						return state.totalPrice
					}
				},
				mutations:{
					increment(state,price){
						state.totalPrice+=price
					},
					decrement(state,price){
						state.totalPrice-=price
					}
				},
				actions:{
					//只能调用mutations
					increment(context,price){
						context.commit('increment',price)
					}
				}
			})
			action使用：
				this.$store.dispatch('increment',this.price)
			getters使用,避免从state获取数据：
				this.$store.getters.getTotal
		注：action为异步操作,mutation同步
			模板中定义元素必须要加在根节点下

element中prop与slot-scope区别 ：

	* prop直接显示数据值
		<el-table-column label="姓名" width="180" prop="name">
		</el-table-column>
	* slot-scope可以对显示数据编辑
		<el-table-column label="姓名" width="180">
		  <template slot-scope="scope">
		    {{'a' + scope.row.name + 'b'}}
		  </template>
		</el-table-column>