Vue第三天

目录

计算属性

计算属性的概念

写法

简写

完整写法（用于修改计算属性值的时候）

计算属性和methods的区别

默认计算属性只能获取，不能设置，如要设置，完整写法

核心点

watch侦听器（监视）

可以用来监听数据（data/computed）改变

简单类型数据(简写监听)

复杂数据类型(完整写法监听)

本地存储

localStorage    getItem()    setItem()    只能存储字符串

JSON    对象转字符串：JSON.stringfy()    字符串转对象：JSON.parse()

组件化

组件

3、组件的基本使用

组件名的大小写规范

保证组件样式的独立性  

组件化

组件通信

---

计算属性

计算属性的概念

是一个属性，依赖的数据变化了，会自动重新计算

写法

简写

computed:{变量名(){return XXX}}

完整写法（用于修改计算属性值的时候）

嘻嘻嘻：{

get(){...},

set(value) {...}

}

计算属性和methods的区别

计算属性有缓存功能，如果依赖的值不变，计算属性就不会重新计算

默认计算属性只能获取，不能设置，如要设置，完整写法

核心点

1、写在computed中

2、写法上是一个函数

3、函数中必须要有返回值

watch侦听器（监视）

可以用来监听数据（data/computed）改变

简单类型数据(简写监听)

1、'属性名' (newVal, oldVal) {
  ...
}

2、'对象名.属性名' （newVal, oldVal） {
   ...
}

复杂数据类型(完整写法监听)

1、写完整写法

2、属性名:  {
   immediate: true, // 可选，是否立即执行
   deep:  true,
   handler (newVal) {
     ....
   }
}

本地存储

localStorage
    getItem()
    setItem()
    只能存储字符串

JSON
    对象转字符串：JSON.stringfy()
    字符串转对象：JSON.parse()

组件化

组件

1、独立的，结构样式行为（html、css、js）为一体，可复用的vue实例

2、优点
    可维护性高
    便于复用
    提高开发效率

3、组件的基本使用

1、创建组件

.Vue

2、引入

全局引入在main.js

局部引入在某个.vue文件中

3、注册

全局注册
    main.js引入
    Vue.component(组件名，组件对象)

局部注册
    组件内引入
    components: { ... }

4、使用
    组件名当成标签名使用即可

组件名的大小写规范

大驼峰
    'HmButton'注册
        <HmButton></HmButton>
        <hm-button></hm-button>

横岗式
    'hm-button'注册
        <hm-button></hm-button>

XXX.name(不常用)

保证组件样式的独立性
  

 scoped
    若没有设置scoped 样式是全局样式 组件之间的样式会互相影响

组件化

将一个完整页面，拆分成一个个组件的过程 => 组件化

组件通信

父传子
    1. 给子组件添加标签属性的方式传值
    2. 子组件内部props接收
    props中定义的数组元素名需要和父组件绑定的自定义属性名保持一致
    单向数据流：谁定义数据，谁负责修改，保证数据的可维护性（父=>子）

父传子
    1. 给子组件添加标签属性的方式传值
    2. 子组件内部props接收
    props中定义的数组元素名需要和父组件绑定的自定义属性名保持一致
    单向数据流：谁定义数据，谁负责修改，保证数据的可维护性（父=>子）