vueナビゲーションメニューとテキスト編集のためのコード例を実現します。

<div id="main">
 
 <!--          active   -->
 <!--             ，      "prevent"     (preventDefault    )。 -->
 
 <nav v-bind:class="active" v-on:click.prevent>
 
  <!--            ，      makeActive   ,      Vue      。 -->
 
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="home" v-on:click="makeActive('home')">Home</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="projects" v-on:click="makeActive('projects')">Projects</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="services" v-on:click="makeActive('services')">Services</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="contact" v-on:click="makeActive('contact')">Contact</a>
 </nav>
 
  <!--    "active"                  -->
 
 <p>     <b>{{active}}   </b></p>
</div>
 
<script>
//        Vue   
var demo = new Vue({
 // DOM   ，      
 el: '#main',
 
 //     ，      
 data: {
  active: 'home'
 },
 
 //          
 methods: {
  makeActive: function(item){
   //     ，       
   this.active = item;
  }
 }
});
</script>

<!-- v-cloak         ，   Vue       。 -->
<!--       hideTooltp()       -->
 
<div id="main" v-cloak v-on:click="hideTooltip">
 
 <!--        
   v-on:click.stop           ，stop            
   v-if      show_tooltip   true      -->
 
 <div class="tooltip" v-on:click.stop v-if="show_tooltip">
 
  <!-- v-model          
            ，            -->
 
  <input type="text" v-model="text_content" />
 </div>
 
 <!--       "toggleTooltip"           -->
 
 <!-- "text_content"                 -->
 
 <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
 
</div>
 
<script>
var demo = new Vue({
 el: '#main',
 data: {
  show_tooltip: false,
  text_content: '  ，     。'
 },
 methods: {
  hideTooltip: function(){
   //       ，        
   this.show_tooltip = false;
  },
  toggleTooltip: function(){
   this.show_tooltip = !this.show_tooltip;
  }
 }
})
</script>