小程序day04

目标

小程序day04_第1张图片

小程序day04_第2张图片

自定义组件

创建组件 小程序day04_第3张图片

引用组件

小程序day04_第4张图片

局部引用

小程序day04_第5张图片

全局引用 

小程序day04_第6张图片

小程序day04_第7张图片组件的函数定义到metods节点中,梦回vue2. 

小程序day04_第8张图片

 样式

小程序day04_第9张图片

小程序day04_第10张图片

小程序day04_第11张图片

小程序day04_第12张图片 数据,方法,属性

小程序day04_第13张图片

下划线开头的称为自定义方法,非下划线开头的都是事件处理函数。 

小程序day04_第14张图片

 小程序day04_第15张图片

小程序day04_第16张图片 神特么,this.data===this.properties居然是true,?????

小程序day04_第17张图片

数据监听器

小程序day04_第18张图片

小程序day04_第19张图片

小程序day04_第20张图片 小程序day04_第21张图片

 案例

小程序day04_第22张图片

小程序day04_第23张图片 小程序day04_第24张图片

小程序day04_第25张图片

小程序day04_第26张图片 纯数据字段

小程序day04_第27张图片

该字段即使在页面中使用也不会被渲染。 

小程序day04_第28张图片

小程序day04_第29张图片

生命周期函数

小程序day04_第30张图片

小程序day04_第31张图片

小程序day04_第32张图片 组件监听所在页面的生命周期函数

小程序day04_第33张图片

小程序day04_第34张图片 

    _randomColor(){
      this.setData({
        _rgb:{
          r:Math.floor(Math.random()*256),
          g:Math.floor(Math.random()*256),
          b:Math.floor(Math.random()*256),
        }
      })
    }

小程序day04_第35张图片

插槽

小程序day04_第36张图片

小程序day04_第37张图片

小程序day04_第38张图片

小程序day04_第39张图片小程序day04_第40张图片

组件通信——父子组件通信的3种方式

小程序day04_第41张图片

属性绑定_单向绑定 

小程序day04_第42张图片

小程序day04_第43张图片

 重点: 属性绑定只具有父组件到子组件的单向绑定,子组件内数据发生变化不会影响父组件的数据.

事件绑定_双向绑定

虽说是双向绑定,但是还是整的很麻烦

小程序day04_第44张图片

小程序day04_第45张图片

小程序day04_第46张图片

小程序day04_第47张图片

小程序day04_第48张图片

 获取组件实例

小程序day04_第49张图片

behaviors

相当于vue中的mixins?怎么没听过vue里面有着这玩意?

这个东西是为了分离js代码。感觉mixins就没什么作用,学了这么久,一次都没有遇见过这个东西.小程序day04_第50张图片

这里要新建一个文件夹存放新创建的这些个文件.

小程序day04_第51张图片

小程序day04_第52张图片

小程序day04_第53张图片 小程序day04_第54张图片

你可能感兴趣的:(小程序,前端,开发语言,小程序,javascript)