vue学习笔记

ES6语法补充

一、数组篇

1.遍历数组

let i in arr 其中 i表示索引
let item of arr 其中item表示数组里面的对象

2.数组函数

push() 在数组后面加上元素，可以加上多个，以逗号分隔。
pop() 删除数组最后面的一个元素。
shift()删除数组最前面的一个元素。
unshift()在数组最前面加上元素，可以加上多个，以逗号分隔开。
splice() 可以删除元素，插入元素，替换元素：
删除元素时：第一个参数为开始的索引，第二个参数是要删除元素的个数，如果第二个参数不传，会删除开始元素的后面的所有元素；
替换元素时：第一个元素是开始的元素，第二个元素是要替换的元素的个数，后面是要替换的元素；
插入元素时：第一个元素时开始的元素，第二个元素是0，后面是要插入的元素，可以有多个。
sort()为数组排序。
reverse()反转数组。
filter()会自动创建一个新函数。参数是函数，每次遍历都会执行一次，传入的回调函数必须返回一个Boolean值。如果返回值为true都会被加到一个新的数组里面，如果为false，元素则不会被加到一个数组里面。
map()会自动创建一个新数组。参数是回调函数，函数是对数组里面的每个元素的操作，并将得到的新元素返回。
reduce(参数一(a,b)，参数二)对数组中所有的内容进行汇总。参数一是一个回调函数，参数a是每次回调函数返回值，第二个参数是遍历的元素，参数二是a的初始值。最终返回的是最后的a的值。

以上函数都是响应式的，使用这些函数对数组进行操作在vue使用v-for的时候才是响应式的，如果仅仅是用索引来改变数组，v-for将无法响应式的显示。

二、数字篇

给数字保留两位小数使用toFixed(保留小数位数)

组件

一、注册组件

注册组件原理(全局组件)

1. 创建组件构造器对象 ，调用Vue.extend()方法

   const cpn = Vue.extend({
   template:‘要封装的模板’
   })

补充ES6语法：``内定义的字符串可以换行，对于写模板更加方便，内容更加清晰。

2. 注册组件，调用Vue.component()方法

Vue.component(‘组件的名字’, 组件构造器构造的对象)

3. 使用组件。（必须在vue的使用范围之内）

注册局部组件

在一个vue实例的内部添加components属性，在components属性后面跟着的对象中加入要添加的组件，对象中的属性名是要使用组件时的标签，属性后跟着创建的组件对象。

//注册局部组件
const app = Vue({
  el:"#app",
  components:{
  	cpn:cpnc}
  	})
  	//使用
  	<cpn></cpn>

二、父组件和子组件

在父组件的组件构造器传入的对象中添加属性components

const cpn2 = Vue.extend({
	template:`
		组件模板
		<cpn1></cpn1>	//选择你要将子组件放在哪里
	`,
	components:{
		cpn1:cpn1
		}
	})
	//在Vue实例中注册组件后使用
	<cpn2></cpn2>

vue实例可以看成一个根组件，最大的父组件。
注意：子组件要能够使用要不在全局注册过，要不在要使用的对应的父组件注册。例如在子组件 cpn1 在父组件 cpn2 中注册过，cpn2 在父组件 cpn3 注册过，但 cpn1 未在 cpn3 中注册，则 cpn1 在 cpn3 中不可用。

注册组件的语法糖

//全局组件第一种语法糖
Vue.component('cpn',{
	template:`组件模板`
	})

//局部组件的语法糖
const app = new Vue({
	el:"#app",
	component:{
		cpn:{
			template:`组件模板`
			}
		}
		
//组件模板template的抽离1
<script type="text/x-template" id="cpn">
	//此处写模板内容
</script>

//组件模板template的抽离2
<template id='cpn'>
	//此处写模板内容
</template>

Vue.component('cpn',{
	template:'#cpn'
	})

组件对应的数据

组件是一个单独功能的模块的封装，有属于自己的HTML模板，也应有属于自己的数据data。组件不能直接访问vue实例中的data。

组件中的 data 属性应该是一个函数，不能是一个对象。而且 data 函数应该返回一个对象。组件也可以有methods属性。

Vue.component('cpn',{
	template:'#cpn',
	data(){
		return {
			title:'这是标题'
			}
		}
	})

组件对应的方法

Vue.component('cpn',{
	template:'#cpn',
	data(){
		return {
			title:'这是标题'
			}
		},
	methods:{
		//对应的方法
		}
	})

多个组件不是用同一个数据，因为每次都会通过 data 返回一个新的数据对象。

如果想要多个组件相互影响，将 data 要返回的对象定义成为常对象再利用 data 返回。但是实际开发中我们并不希望组件的数据会相互影响。要不组件就失去了自己的成为组件可以复用的意义。

父子组件之间的通信

1. 父组件向子组件传递数据(props)
   在子组件中添加属性props，其后跟上数组，或者是对象。为子组件添加属性，利用v-bind动态绑定要传入的数据。

<div id='app'>
	<cpn :cmessage="message"></cpn>
</div>
<script>
	<template id='cpn'>
		<div>
			<p>{{cmessage}}</p>  //父组件传递过来的信息
		</div>
	</template>
	const cpn = {
		template:'#cpn',
		props:['cmessage'] //数组写法
		props:{
			cmessage:{
				type:string,
				default:'默认值',
				required:true //必须传入这个属性
			}, //对象写法，可以对传入数据类型进行限制，还可以提供一些默认值，还可以限定是否必须传入这个属性
			arr:{
				type:Array,
				default(){
					return [] //当传入数据类型是数组或对象是，默认值必须是有返回值的函数
				}
			}
		}
	}
	const app = new Vue({
		el:'#app',
		components:{
			cpn //注册组建的语法糖
		}，
		data:{
			message:'Hello Vue!!!'
		}
	})
</script>

props 中属性不可以用驼峰标识，如果要用驼峰标识，在大写与小写之间用v-bind绑定时用’-‘隔开。

2. 通过事件子组件向父组件传送消息($emit Events)

<div id="app">
	<cpn @itemclick="cpnClick"></cpn> //不可以写驼峰标识
</div>
<template id="cpn">
	<div>
		<button v-for="item in categories" @click="btnClick(item)">
			{{item.name}}
		</button>
	</div>
</template>

const cpn = {
	template:"#cpn",
	data(){
		return {
			categories:[
				{id:"aaa",name:"热门推荐"},
				{id:"bbb",name:"手机数码"},
				{id:"ccc",name:"家用电器"},
				{id:"ddd",name:"电脑办公"}
			]
		}
	},
	methods:{
		btnClick(item){
			this.$emit("itemclick",item)
			//this.$emit("事件名称",事件参数)
		}
	}
}

const app = new Vue({
	el:"#app",
	methods:{
		itemclick(){
			//执行事件
		}
	}
})

父子组件的访问方式

1. 父组件直接访问子组件： $children 或者 $refs
   $refs的方式相较于 $children性能更高，为组件添加属性ref ，拿到的总是对应属性的组件。

<div id="app">
<cpn ref='aaa'></cpn>
<button @click="btnclick">按钮</button>
</div>

<template id="cpn">
	<div>这是一个子组件</div>
</template>

const app = new Vue({
	el:"#app",
	components:{
		cpn:{
			template:"#cpn",
			methods:{
				showmessage(){
					console.log('showmessage');
				},
			data(){
				return {
					name:'我是子组件name'
				}
			}
			}
		}
	},
	methods:{
		btnclick(){
			console.log(this.$children);//$children是数组
			this.$children[0].showmessage();
			//$refs是默认空对象，只有当组件添加ref属性时才不为空
			console.log(this.$refs.aaa);
			for(let c of this.$children){
				console.log(c.name);//通过拿到子组件对象获得数据
				c.showmessage();//通过拿到子组件对象调用方法
			}
		}
	}
})

2. 子访问父$parent

<div id="app">
	<cpn></cpn>
</div>

<template id='cpn'>
	<div>
		<h2>我是子组件</h2>
		<button @click='btnclick'>按钮</button>
	</div>
</template>

const app = new Vue({
	el:'#app',
	data:{
		message:'你好啊'
		},
	components:{
		cpn:{
			template:'#cpn',
			methods:{
				btnclick(){
					console.log(this.$parent)
				}
			}
		}
	}
})

插槽的使用

插槽的使用可以让组件更具有扩展性

<div id="app">
	<cpn><button>按钮</button></cpn>
	<cpn><span>哈哈哈哈哈哈哈</span></cpn>
	<cpn><p>你好啊</p></cpn>//插入多个标签时，插槽会将其全部替换
</div>

<template id="cpn">
	<div>//组件需要根标签
		<div>我是组件</div>
		<p>我是组件内容</p>
		<slot><button>按钮</button></slot>//给插槽设置默认值
	</div>
</template>

const app = new Vue({
	el:'#app',
	data:{
		message:'你好啊'
	},
	components:{
		cpn:{
			template:'#cpn'
		}
	}
})

具名插槽的使用，可以指定替换哪个

<div id="app">
<button slot='left'>按钮</button>
<span slot='center'>标题</span>
</div>

<template id="cpn">
	<slot name="left"><span>左边</span></slot>
	<slot name="center"><span>中间</span></slot>
	<slot name="right"><span>右边</span></slot>
</template>

const app = new Vue({
	el:'#app',
	data:{
		message:'你好啊'
	},
	components:{
		cpn:{
			template:'#cpn'
		}
	}
})

vue-router

使用步骤

1. 通过Vue.use(VueRouter)，安装路由插件
2. 创建VueRouter对象

const routes = [
	
]
const router = new VueRouter({
	routes
})

3. 将router对象传入到Vue实例中
4. 配置映射路径
5. 通过< router-link >< /router-link >和< router-view >< /router-view >