Vue.js 0基础学习

一、应用与组件实例

1、生命周期函数不能采用箭头函数的写法，因为箭头函数没有this

二、模版语法

1、v-once：一次插值

2、v-html：类似react的dangerouslySetInnerHTML

3、v-bind：动态设置属性值，简写为冒号

4、v-on：监听方法，简写为@

5、@click.stop 不会向上冒泡

6、v-bind:class 值支持"","{}","[]"

7、模版表达式{{}}无法访问用户定义的全局变量

三、计算属性和监听器

1、计算属性computed与方法methods的区别：computed有缓存，当data不变时，不会重新计算

2、计算属性computed与watch监听器的区别：watch监听器更适合异步操作

四、条件渲染

1、v-show = false  本质上是display: none

2、为不可见的包裹元素

3、标签添加key属性，将不会复用

五、列表渲染

1、v-for="item,index in items" //数组 v-for=“value,key in object” //对象

六、事件绑定

1、事件最后一个参数是$event，则获取原始DOM的event.target.tagName

2、scroll.passive 提升滚动性能

七、表单输入绑定

1、v-model.lazy：只有在发生change事件时才会触发，而不是input触发

2、v-model.number：将输入值转数字

3、v-model.trim：过滤首尾空白字符

八、组件基础

1、组件内部用this.$emit('clicknow',this.count) 绑定外部方法clicknow，并且将count值传给外部方法clicknow

外部调用组件并通过@clicknow="myclick"传入myclick方法，myclick方法类似这样定义：

methods:{    myclick: function(e){        console.log(e) //this.count    }}

2、组件中的data必须是函数

3、v-model="a" 等价于 :value="a" @input="a=$event.target.value"

4、调用组件时，在组件标签之间添加文本内容，需要在组件内部用占位

5、动态组件：

九、插槽

1、slot标签中可以有内容，用于默认显示

2、slot可以有name属性，在调用该组件时通过template标签v-slot传入该name值，会显示在对应位置

3、v-slot缩写为#