vue学习

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>