vue知识点碎碎念(强化记忆)

1.vue组件封装四步走:

(1)创建组件

设置组件的结构样式和行为

(2)导入组件

import xxxx from './xxx.vue'

(3)注册组件

components:{XXX}

(4)template中使用组件

<XXX/>

2.子组件props中由父组件传过来的属性值是只读的

注意点:

(1)props值是只读的

(2)props后可以是数组,也可以是对象

(3)props里面的属性值可以是静态固定值,也可以是动态的值,如果是静态值,那么属性名无需加:,如果是绑定动态属性值,则属性名前需要绑定:

3.data里面定义的变量是全局的,可以直接在template中调用,行内或者双标签中调用均可

4.计算属性一定要设置return返回值,里面的变量也是全局的,会平铺在vue实例对象中

5.计算属性默认情况下只能取值,不能修改,如要修改需要设置setter,经典应用场景是购物车的全选框和单选框

6.watch深度监听可应用于localstorage,监听引用类型的值的变化

7.插值表达式{{}}的功能是将data中定义的数据显示到模板上,{{}}里面的变量一定要事先在data里面声明好,不能访问未在data里面定义的变量,只能在里面进行简单地运算(拼接,算术运算,三元运算),不能循环,也不能进行复杂的条件判断

8.vue中的指令(directive),功能是用来扩展标签原有的功能,一个标签中可以使用多个指令

指令v-打头,形式上是标签中的自定义属性,vue中常见指令及其功能有:

(1)v-bind:用于动态绑定标签的属性值,典型的应用场景是动态设置类名:class,属性值一般是data里面的数据项,:属性名='data数据项'

(2)

9.父传子

(1)在父组件中使用子组件,在子组件的标签中设置动态的自定义属性,把data中或者computed中的数据传递给子组件

(2)子组件中设置props项目用来接收父组件传过来的数据,变量和自定义属性名保持一致,注意变量名要加''