vue demo:

new Vue({

el:'#app;'

data:{

  message:''Hello  vue.js '

}

})

 

 

1.vue 导航菜单实例：

《navi v-bind:class="activate"  v-on:click.prevent>

 

<!--当菜单的连接被点击时，我们调用的makeacvite 方法

    <a href="#" class="home" v-on:click="makeActive('home')">Home</a>

<a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>

 

<a href="#" class="services" v-on:click="makeActive('services')">Services</a>

 

<p>您选择了｛｛activate｝｝菜单</p>

</div>

 

<script>

var demo=new Vue({

//dom 元素

el:'##main'

data:{

activate:'home'

}'

 

//点击菜单键使用的函数：

method:{

 makeActivate:function(item){

//模型改变，视图会自动改变

}

 

 

1，参考资料：

https://www.runoob.com/try/try.php?filename=vue2-example-1