Vue基础精讲 —— Vue的数据绑定和Vue的原生指令

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <div :class="[{ active: !isActive }]" :style="[styles, styles2]">
        数据绑定
      </div>
      <div :class="{ active: !isActive }" :style="[styles, styles2]">
        数据绑定
      </div>
      <div v-once>{{text}}</div>
      <div v-pre>{{表达式不会被解析}}</div>
      <div v-on:click="">Text: {{text}}</div>
      <div v-if="text === 0">if content</div>
      <div v-else-if="text === 1">else if content</div>
      <div v-else>else content</div>
      <div v-html="html"></div>
      <input text="text" v-model="text">
      <input type="checkbox" v-model="active">
      <div>
        <input type="checkbox" :value="1" v-model="arr">
        <input type="checkbox" :value="2" v-model="arr">
        <input type="checkbox" :value="3" v-model="arr">
      </div>
      <div>
        <input type="radio" value="one" v-model="picked">
        <input type="radio" value="two" v-model="picked">
      </div>
      <ul>
        <li v-for="(item, index) in arr" :key="item">{{item}}:{{index}}</li>
      </ul>
      <ul>
        <li v-for="(val, key, index) in obj">{{val}}:{{key}}:{{index}}</li>
      </ul>
    </div>
  `,
  data: {
    //  遍历数组
    arr: [1, 2, 3],
    // 遍历对象
    obj: {
      a: '123',
      b: '456',
      c: '789'
    },
    picked: '',
    text: 0,
    active: true,
    html: '<span>this is html</span>',
    isActive: false,
    styles: {
      color: 'red',
      appearance: 'none'
    },
    styles2: {
      color: 'black'
    }
  }
})

// v-on原理：若是dom节点，通过document.addEventListener()绑定事件；如是组件，通过vue.$on()绑定事件
// v-model.number 只能输入数字
// v-model.trim 去除首尾空格
// v-model.lazy 默认绑定input事件，.lazy绑定change事件，失去焦点之后改变

执行结果

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！