vue学习笔记（基础）

 

1、父子组建通信：父->子 [props],子->父 [events]（子组件一定要在父组件中注册才能使用！！）

2、出现key问题（v-for should have explicit keys 稍后解答）

3、子组件向父组件：（一定要记得操作数据！不要操作dom！） （因为数据定义在父组件里 数据控制页面显示 所以子组件应该向父组件传消息）

在子组件中$emit 触发一个事件  然后父组件监听这个事件 当这个事件发生时 执行方法（可以传值！值是父组件传过来的！也要在props里声明！）

4、vue的生命周期函数：vue在某个时间点会自动执行的函数。

   beforeCreate()

   created(),

  (是否有el->是否有template)

beforeMount(),还没被渲染

Mounted(), 已经被渲染

vm.$destroy()后才执行下面两个方法

beforeDestroy(),

destroyed()

数据发生改变时，执行下面两个。

beforeUpdate(),还没被渲染

updated(),已经被渲染。

还有activated（），deactivated（），errorCapture()...

5.模版语法！

vue指令后跟的是js表达式，不是字符串。{{ }} 同 v-text 。。。v-html不同。

6.计算属性：computed（不希望在模版上写逻辑。） computed: { fullname () :{ return  }}

内置缓存。依赖于原属性。原数据改变计算属性才会改变。（依赖的值发生了改变computed才会发生改变。）

（也可以用方法实现。但是调用的时候要在方法名后面加 () 。没有缓存机制。每次刷新都会重新渲染。）.

（还可以用watch实现）(监听firstName的改变)

computed: {
 get () {
  return this.firstName + this.LastName
},
 set (val) {
    this.name = val
}
}

 

watch: {
 firstName () {
 this.fullName = this.firstName + this.lastName
}
}

class对象绑定。 

8.v-for 时加上 :key 有利于提高性能。key唯一。

9.操作数组的方法：pop push shift(第一项删除) unshift（添加到第一项）splice sort reverse

不能直接用下标操作数组。

this.list.splice(1,1,{...}) 从数组下标为1的 删除1项 再插入 {...}。但可以直接改变数组的引用数组。

10 template 可以帮我们包裹一些元素，但渲染的时候不会渲染到页面上。