下面是本人在观看慕课网上面的《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中,