vue模板语法

v-if

<div v-if="type === 'A'">我是A</div>
<div v-else-if="type === 'B'">我是B</div>
<div v-else>不是A/B</div>

v-for

<div v-for="item in listData" :key="item.id">
   <p>{{item.name}}</p>
</div>

<div v-for="(item, index) in listData" :key="item.id">
   <p>{{index}} - {{item.name}}</p>
</div>

遍历对象

<li v-for="(value, name) in myObject">
  {{ name }}: {{ value }}
</li>

<li v-for="(value, name, index) in myObject">
  {{ index }}. {{ name }}: {{ value }}
</li>

data() {
    return {
      myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }

v-bind

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

@click || v-on

<!-- 完整语法 -->
<button v-on:click="doSomething"> ... </button>

<!-- 缩写 -->
<button @click="doSomething"> ... </button>

<!-- 动态参数的缩写 -->
<button @[event]="doSomething"> ... </button>

<!-- 原始的 DOM 事件 -->
<button @click="showMsg('提示参数', $event)">提交</button>

<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">提交</button>

<!-- 阻止单击事件继续冒泡 -->
<button @click.stop="doThis">提交</button>

<!-- 点击事件将只会触发一次 -->
<button @click.once="doThis">提交</button>

v-show

<!--v-show元素会被渲染并保留 DOM 中,只是切换元素的 display -->
<div v-show="ok">Hello!</div>

:class - 绑定 HTML Class

<div class="static"  :class="{ active: isActive, 'text-danger': hasError }"
></div>
data() {
  return {
    isActive: true,
    hasError: false
  }
}

:style - 绑定内联样式

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

或者

<div :style="styleObject"></div>

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

v-model 表单输入绑定

<!-- 文本 (Text)-->
<input v-model="message" placeholder="edit me" />

<!-- 复选框 (Checkbox)-->
<input type="checkbox" id="checkbox" v-model="checked" />

<!-- 单选框 (Radio)-->
<input type="radio" id="one" value="One" v-model="picked" />

选择框 (Select)
 <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
  </select>

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />

<!-- 输入值转为数值 -->
<input v-model.number="age" type="text" />

<!-- 过滤首尾空白字符 -->
<input v-model.trim="msg" />

刷新回调

this.nextTick( () => {
    console.log('数据已经更新')
});

this.$nextTick( () => {
    console.log('页面渲染已经完成')
})