前端框架Vue入门笔记

下面是本人在观看慕课网上面的《vue2.5入门》这门课之后总结出来的笔记，供日后参考，不是很详细，也请大家放松身心观看。

vue基础语法

模板，实例，挂载点
创建vue实例时，使用new vue({})来创建，并通过el： ,来实现挂载点与实例之间的绑定。el中的就是挂载点，vue只会处理它的挂载点下面的内容。挂载点内部的内容就是模板，而且模板也可以写在vue实例里面，这时需要写在template：这个属性里面。

数据事件和方法
在data里可以定义数据，然后在模板中（就是挂载点下面，或者vue实例里面的template：属性）使用{{}}来进行使用。
v-test：用来在模板上显示data中的数据
v-html：too
v-on:click=“handleclick” :（简写@click）绑定事件函数handleclick，并且在vue实例中使用methods：属性来定义函数handkeclick。

属性绑定和双向数据绑定
title是鼠标放在div上时出现的提示语。
v-bind：（简写为 ：） v-bind：title = “title”这句话的意思是title这个属性，和后面的title数据项（在data属性中有一个title数据项）进行绑定，加上v-bind之后，双引号中的title就不再是一个字符串了，而是一个js的表达式，就是后面data中的title。
v-model： 双向数据绑定，用来实现input和数据的双向传播。

计算属性和侦听器
在vue实例中使用computed： 属性进行计算。
侦听器：使用watch: 属性，监听一个数据或者属性的变化，在进行相应的操作。

v-if,v-show,v-for
v-if：为true时，他所标记的div显示出来，否则删除。
v-show ：为true时，他所标记的div显示出来，否则隐藏（不是删除，这是区别于v-if的）。
v-for： v-for="(item,index) of list" :key = "index。list是一个数组。key要求每一项都不能相同。

组件的拆分
组件就是页面上的某一部分，使用vue.component

//这里定义的是全局组件
Vue.component('todo-item',{
			props :['content','index'],
			template:'<li @click="handleClick">{{content}}</li>',
			methods :{
				handleClick: function(){
					this.$emit('delete',this.index)
				}
			}
		})

//这里定义的是局部组件
var TodoItem = {
	template :'<li>item</li>'
}

在使用局部组件时，需要在vue实例中使用component：属性来进行对组件的注册。
component：‘todo-item’ = TodoItem
在外部给组件进行传递参数时，使用 ：content = “item”，将item参数传递给content属性，这时，content属性以及该接收了item参数，按理说可以使用在组件中

template:'<li @click="handleClick">{{content}}</li>'

但是还需要组件自身使用props属性来进行接收 props：【‘content’】，
流程：1.首先是new了一个vue根实例，然后在div中写了vue实例的模板。2.之后为了方便分理处一个小组件（使用vue.component）todo-item。3.然后这个小组件todo-item可以使用在vue的实例的模板中，

<todo-item></todo-item>

4.但是在模板中如果要向小组件todo-list中传递参数时，需要使用到content,并在组件中使用props来进行接收。
vue的组件其实又是一个vue的实例，在一个大的vue实例的模板里，我们会使用一个小的vue组件（也就是一个小的vue实例）。

总的来说，就是在父组件的模板中使用了子组件，父组件使用content属性对子组件进行传递参数，子组件props接收后，在子组件自己的模板（template）上显示。
子组件可以使用 emit 触发父组件的自定义事件。
在子组件中使用this.$emit(‘delete’,this.index)，然后在其父组件的模板中使用@delete监听，并将触发事件的函数写在父组件的实例的methods属性中。

整个逻辑：new一个vue实例，写vue实例的模板，定义一个todo-item组件，在vue实例的模板中使用todo-item，在vue实例的模板中定义参数，在vue组件中接收vue实例传递的数据，在vue组件的模板中对click进行监听，监听的函数写在组件内部，之后使用emit向外传递一个事件，这个事件被外部的vue实例的模板监听，这时监听的函数要写在vue实例的methods中，