学习笔记：mpvue开发小程序——入门

created: () => console.log(this.a)

vm.$watch('a', newValue => this.myMethod())

<p :class="{ active: isActive }">111p>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222p>
<p class="static" :class="[activeClass, errorClass]">333p>
<p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444p>
<p class="static" v-bind:class="[{ active: isActive }, errorClass]">555p>

<view class="_p {{[isActive ? 'active' : '']}}">111view>
<view class="_p static {{[isActive ? 'active' : '', hasError ? 'text-danger' : '']}}">222view>
<view class="_p static {{[activeClass, errorClass]}}">333view>
<view class="_p static {{[isActive ? activeClass : '', errorClass]}}">444view>
<view class="_p static {{[[isActive ? 'active' : ''], errorClass]}}">555view>

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666p>
<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777p>

<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">666view>
<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">777view>

<template>
    
    <div class="container" :class="computedClassStr">div>
    <div class="container" :class="{active: isActive}">div>

    
    <div class="container" :class="computedClassObject">div>
template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
script>

<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        li>
    ul>
template>

// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

<template>
  <div>
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view class="picker">
        当前选择：{{array[index]}}
      view>
    picker>
  div>
template>

<script>
export default {
  data () {
    return {
      index: 0,
      array: ['A', 'B', 'C']
    }
  },
  methods: {
    bindPickerChange (e) {
      console.log(e)
    }
  }
}
script>

<template>
  <div>
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked"/> {{item.value}}
      label>
    radio-group>
  div>
template>

<script>
export default {
  data () {
    return {
      items: [
        {name: 'USA', value: '美国'},
        {name: 'CHN', value: '中国', checked: 'true'},
        {name: 'BRA', value: '巴西'},
        {name: 'JPN', value: '日本'},
        {name: 'ENG', value: '英国'},
        {name: 'TUR', value: '法国'}
      ]
    }
  },
  methods: {
    radioChange (e) {
      console.log('radio发生change事件，携带value值为：', e.target.value)
    }
  }
}
script>

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    view>
picker>

this.$root.$mp.query

this.$root.$mp.appOptions

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },

   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}