1.一个组件就相当于一个区域
2.向子组件传值可以通过v-bind：
父组件向子组件传值：v-bind
ex:
<todo-item v-for="item in list" :content="item"></todo-item>//循环list并将值赋值给item 通过v-bind:传值给子组件todo-item
Vue.component("TodoItem",{//全局组件
props:['content'],//从父组件要接受的值
template:'<li>{{content}}</li>'
})
子组件向父组件传值：$emit
<ul>
<todo-item v-for="(item,index) in list" :content="item" @delete="handleItemDelete" :index=index></todo-item>
</ul>
var TodoItem={//局部组件
props:['content','index'],
template:'<li @click="handleItemClick">{{content}}</li>',
methods:{
handleItemClick:function(){
this.$emit('delete',this.index);
}
}
}
var vm=new Vue({
el:"#app",
components:{//将局部组件注册到全局里
TodoItem:TodoItem
},
data:{
list:[],
inputVal:'',
content:'hello'
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputVal)
this.inputVal=""
},
handleItemDelete:function(index){
this.list.splice(index,1)
}
}
});
3.使用局部组件时需要将局部组件注册到跟实例中
4.以$开头的东西都是vue的实例属性或实例方法
5.生命周期函数：
//生命周期函数：vue实例在某一个时间点自动执行的函数（不放在methods 直接放在实例中
beforeCreate: function () {//在实例部分（事件/生命周期）初始化完成之后调用
console.log('beforeCreate')
},
created: function (){//完成外部的注入/双向绑定等的初始化后调用
console.log('created')
},
beforeMount: function (){//模板和数据相结合，即将挂载到页面上的一瞬间渲染到页面上之前执行
console.log(this.$el)
console.log("beforeMount")
},
mounted:function(){//元素挂载到页面之后 自动执行此函数
console.log(this.$el)
console.log('mounted')
},
beforeDestroy:function(){//实例销毁之前执行
console.log('beforeDestroy')
},
destroyed:function(){//实例销毁之后自还行
console.log('destroyed')
},
beforeUpdate:function(){//数据发生改变前 没有重新渲染到页面 执行此函数
console.log("beforeUpdate")
},
updated:function(){//数据渲染完成之后执行
console.log('updated')
}
6.v-指令写的是js表达式
v-指令后面除了可以写js还可以加字符串 插值表达式也可以加字符串
<div id="app">
<div v-text="content +' world'" :title="content"></div>
<div v-html="inner"></div>
{{inner}}
<div v-text="inner"></div>
<div v-html="content"></div>
</div>
var vm=new Vue({//全局
el:"#app",
data:{
content:'hello',
inner:'<span>content</span>'
}
});
7.computed:{//计算属性 有缓存 如果依赖的值没有变化则会使用缓存}
8.如果一个功能既可以用methods 又可以使用watch 还可以使用computed 建议使用computed
9.使用组件的细节点：
①使用is解决bug
<table>
<tbody>
<tr is="row"></tr>
</tbody>
</table>
Vue.component('row',{
template:"<tr><td>hello</td></tr>"
})
10.vue是单向数据流 父组件可以向子组件传值 但是子组件不可以修改父组件参数，子组件可以通过克隆的方式修改
11.<child :content="world"></child>
此处content加冒号会报错是因为world没有在父组件里边定义，加上：相当与后边的是js表达式，在父组件找不到就会报错
去掉：就相当于字符串，和父组件没有关系或者非要加：可以写为:content="'world'"
:count="0"是强制将字符串转换为数字 如果0不见""代表为字符串
12.<child :content="'hello world'" @click.native="handleClick"></child> <!--给组件绑定原生事件-->
13.循环
循环数组：
<li v-for="item of list" :key="item.id">
<div>{{item.name}}</div>
</li>
循环对象(此处举例针对城市列表）
<li v-for="(item, key) of list" :key="key">
<div>{{key}}</div>
<div v-for="innerItem of item" :key="innerItem.id">
<div>{{innerItem.name}}</div>
</div>
</li>