Vue 综合- v-xxx 自带指令

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: `
    <div>
      <div v-show='active'>{{text}}</div>
      <div v-if='active'>{{'Text:'+' '+ text}}</div>
      <div v-text='"v-text:"+" " + text'></div>
      <div v-text='"v-text Text:" + " " + text'></div>
      <div v-html='html'></div>
      <div v-pre>{{'v-pre示例' + picked}}</div>
      <div>{{'Picked：' + picked}}</div>
      <input type='text' v-model.number='text'>
      <ul>
      数组：
        <li v-for='(item, index) in arr' :key='item'>{{item}}--{{index}}</li>
      </ul>
      <ul>
      对象：
        <li v-for='(value, key, index) in obj' :key='key'>{{value}}--{{key}}--{{index}}</li>
      </ul>
      控制显示:
      <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>
      控制picked：
        <input type='radio' value='one' v-model='picked'>
        <input type='radio' value='two' v-model='picked'>
        <input type='radio' value='three' v-model='picked'>
      </div>
    </div>
  `,
  data:{
    text: 0,
    html: '<span>this is html</span>',
    active: true,
    arr: [1,2,3],
    obj:{
      a: '123',
      b: '456',
      c: '789'
    },
    picked: '点击下面的“控制picked”'
  }
})

// v-show: DOM节点是存在的，只是隐藏了而已, display: none。
// v-if v-else-if v-else: DOM节点是不存在的，每次都会动态的增删操作节点，动态的节点会触发整个页面的重绘以及重新排版，如果动态节点太多的话，算是比较耗时的一个操作，性能不好。
// v-text: 当不需要拼接内容的时候使用，如果需要拼接很多内容，推荐使用 {{}} 的方式。
// v-for: 一定需要记得绑定 key
// v-once: 标记的节点初始化之后则不会在变化，无论怎么修改都不会在变化
// v-pre: 标记节点的里面的表达式都不会被解析，会被全部直接展示出来。 {{'v-pre示例' + picked}}
// <input type='text' v-model.number='text'>  v-model.number 会将输入的内容转场 number
// <input type='text' v-model.trim='text'> v-model.trim 会将输入的内容去掉首尾空格
// <input type='text' v-model.lazy='text'> v-model.lazy 输入内容不会立即更新，只有等响应结束之后才会更新，也就是输入完成点击其他区域终止输入的时候更新。