动态内联样式(class,style)

1.vue:

:style="{height: xx > 0? '300px' : ' ' }"

 :class="{firstImg: index === 0}"    

2.react:

style={{display: (index === this.state.currentIndex) ? ‘block’: ‘none’}}

className={box ${index === this.state.currentIndex ？'active' : null}}

3.minpro 小程序:

style=“display: {{ num ===3? ‘block’ : ‘none’ }}”

class=“box {{num==3?‘cur’:’ '}}”

标签内属性（绑定key值）

vue:

:key = “index” (字符串)

react:

key={index} (单括号)

minpro 小程序:

key="{{index}}" (字符串内双括号)

绑定数据值

vue

v-model=“msg” vue双向数据绑定，v-model直接就可以绑定

小程序

value={msg} 改变值的时候就需要 setData 去改变值

react

change=()=>{this.setState({msg:event.target.value})}
react需要触发change去改变值

vue和小程序 父子组件传值总结

1. vue 父组件给子组件传值

1. ++父组件调用子组件的地方++，添加一个自定义的属性,此属性的值就是需要传递给子组件的值（数据）
2. 如果属性的值是变量、boolean、number数据，需要使用绑定属性 （v-bind / :）

3. ++子组件定义的地方++，添加一个props选项，props选项的值是一个数组或者对象

• 如果是数组数组的元素就是自定义的属性名，可以在组件中通过此自定义属性名访问数据(不理解的话看三阶段 day07)
• 如果是对象，有两种形式
  • key值为自定义的属性名，value值为数据类型
  • key值为自定义的属性名，value为一个对象，该对象有两个选项，一个为type（数据类型），另一个为default（默认值），如果默认值是对象或者数组，需要把default写成一个函数，返回对象和数组

2. 小程序父组件给子组件传值

1. ++父组件调用子组件的地方++，添加一个自定义的属性,此属性的值就是需要传递给子组件的值（数据）
2. 如果属性的值是变量、boolean、number数据，需要使用{{ }}包裹

<prolist prolist="{{prolist}}"/>
            |           |
        自定义属性   （数据）值
                        |
                       变量

3. ++子组件定义的地方++，添加一个properties（组件的属性列表）选项，properties选项的值是一个对象
   key值为自定义的属性名，value值为数据类型

properties:{
          prolist  :   Array
             |           |
        自定义属性   （数据）值
    
}

可以在组件中通过自定义的属性名访问数据

绑定事件

• vue @click=""
• react onCLick={ this.clickFn }
• minpro 移动端尽量不使用click事件 ，建议使用tap事件，或者使用touch代替click事件
  • bindtap
  • catchtap ---- 阻止冒泡

事件不加（） bindtap=“backtop”
返回顶部

声明式导航和编程式导航

首页列表进入详情

声明式导航

vue <router-link></router-link>
react <Link></Link> <NavLink></NavLink>

编程式导航

> new Vue({router, store, el: ''})
vue this.$router.push() replace() back() go()
react this.props.history.push() .......

minpro 小程序

  声明式导航 - 标签跳转 - a
  <navigator url="" open-type=""></navigator>
  open-type 
    1. navigate 保留当前页面，新添加一个页面，不能新添加tab页面 ---- push
    2. redirect 替换当前页面，不能替换tab页面  ---- replace
    3. switchTab 切换当前的tab页面 ---  小程序独属
    4. navigateBack 返回  ----  back  goBack

  编程式导航 - js跳转 - window.location.href=""

---

结束语：

还有好多不全面的地方，后期慢慢更新吧~