Vue常用的几个指令附完整案例

v-bind: =\"msg\"
// 简写：: =\"msg\"
<!-- 完整语法 -->
<a v-bind:href=\"url\" rel=\"external nofollow\" rel=\"external nofollow\" ></a>
<!-- 缩写 -->
<a :href=\"url\" rel=\"external nofollow\" rel=\"external nofollow\" ></a>

<!-- 完整语法 -->
<a v-on:click=\"doSomething\"></a>
<!-- 缩写 -->
<a @click=\"doSomething\"></a>

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

<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数据：<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>

< >
 export default {
  data () {
   return {
    message: \'Vue的生命周期\',
    msgData: \'消息数据\',
    msgHtml: \'<span style=\"color: red\">消息HTML</span>\',
    msgModel: \'\',
    list: [
     \'apple\', \'banana\', \'fruit\'
    ]
   }
  },
  methods: {
   alert () {
    this.$notify({
      : \'请求异常\',
     message: \'通知\'
    })
   }
  },
 mounted: function () {
   console.log(\'------mounted 挂载结束状态------\')
  },
}
</ >