Vue常用的幾個指令附完整案例

更新時間：2018年11月06日 14:44:08 作者：Real_man

越來越多的人在用Vue，剛開始接觸vue的話常接觸的指令就幾個，統(tǒng)一歸納一下。感興趣的朋友跟隨小編一起看看吧

越來越多的人在用Vue，剛開始接觸vue的話常接觸的指令就幾個，統(tǒng)一歸納一下，做個demo演示。

指令

v-text
v-html
v-bind
v-on
v-model
v-for

代碼

學習技術最好還是要看下代碼是什么樣的。

v-text

解釋：更新DOM對象的 textContent

<h1 v-text="msg"></h1>

v-html

解釋：更新DOM對象的 innerHTML

<h1 v-html="msg"></h1>

v-bind

作用：當表達式的值改變時，將其產(chǎn)生的連帶影響，響應式地作用于 DOM

語法：

v-bind:title="msg"
// 簡寫：:title="msg"
<!-- 完整語法 -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 縮寫 -->
<a :href="url" rel="external nofollow" rel="external nofollow" ></a>

v-on

作用：綁定事件

語法：v-on:click="say" or v-on:click="say('參數(shù)', $event)"

簡寫：@click="say"

說明：綁定的事件定義在methods

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

v-model

作用：在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定

說明：監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)

案例：計算器

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-for

作用：基于源數(shù)據(jù)多次渲染元素或模板塊

<div v-for="item in items">
 {{ item.text }}
</div>

<!-- item 為當前項，index 為索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>

<!-- item 為值，key 為鍵，index 為索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>

完整案例

<template>

 <div>
  <p v-text="msgData"></p>
  <p>{{ msgData }}</p>

  <p v-text="msgHtml"></p>
  <p v-html="msgHtml"></p>

  <input v-model="msgModel" type="text"/>
  <p>v-model數(shù)據(jù)：<span v-text="msgModel"></span></p>

  <button v-on:click="alert">按鈕</button>

  <p v-for="(item, index) in list" :key="index">{{item}} -- {{index}}</p>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    message: 'Vue的生命周期',
    msgData: '消息數(shù)據(jù)',
    msgHtml: '<span style="color: red">消息HTML</span>',
    msgModel: '',
    list: [
     'apple', 'banana', 'fruit'
    ]
   }
  },
  methods: {
   alert () {
    this.$notify({
     title: '請求異常',
     message: '通知'
    })
   }
  },
 mounted: function () {
   console.log('------mounted 掛載結(jié)束狀態(tài)------')
  },
}
</script>

Note:代碼是在腳手架的項目中寫的。

效果如下：