vue学习

1.一个组件就相当于一个区域

 2.向子组件传值可以通过v-bind：

　　父组件向子组件传值：v-bind

　　ex:

　　>//循环list并将值赋值给item 通过v-bind:传值给子组件todo-item

　　Vue.component("TodoItem",{//全局组件
　　　　props:['content'],//从父组件要接受的值
　　　　template:'

{{content}}

'
　　})

　　子组件向父组件传值：$emit

　　

　　　　 @delete="handleItemDelete" :index=index>
　　

　　var TodoItem={//局部组件
　　　　props:['content','index'],
　　　　template:' @click="handleItemClick">{{content}}',
　　　　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还可以加字符串 插值表达式也可以加字符串

　　

　　　　

　　　　

　　　　{{inner}}
　　　　

　　　　

　　

　　var vm=new Vue({//全局
　　　　el:"#app",
　　　　data:{
　　　　　　content:'hello',
　　　　　　inner:'content'
　　　　}
　　});

7.computed:{//计算属性 有缓存 如果依赖的值没有变化则会使用缓存}

8.如果一个功能既可以用methods 又可以使用watch  还可以使用computed 建议使用computed

9.使用组件的细节点：

①使用is解决bug

　　
　　　　
　　

Vue.component('row',{
　　template:"hello"
})

10.vue是单向数据流  父组件可以向子组件传值  但是子组件不可以修改父组件参数，子组件可以通过克隆的方式修改

11.

此处content加冒号会报错是因为world没有在父组件里边定义，加上：相当与后边的是js表达式，在父组件找不到就会报错

去掉：就相当于字符串，和父组件没有关系或者非要加：可以写为:content="'world'"

:count="0"是强制将字符串转换为数字 如果0不见""代表为字符串

12.  

13.循环

　循环数组：

　　

　　　　

{{item.name}}

　　

　　循环对象(此处举例针对城市列表）

　　

　　　　

{{key}}

　　　　

　　　　　　

{{innerItem.name}}