test6.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VueJS2 Click 事件-vuejs实战教程[云海天教程]</title>
    <meta name="keywords" content="Vue.js 教程,vue教程,新手入门教程,vue实例教程,vue基础教程,vue教程案例实战项目,最全vue项目实战">
    <meta name="description" content="VuejsClick 事件,vuejs实战教程">

	</head>
	<body>
<!-- 模仿后台加载 -->
    <div id="app">
        <!-- 第三步输出 -->
        <!-- 循环索引显示 -->
        <template v-if="loaded">
            <div class="active" v-for="(article,index) in articles">
                  <h5><span>{{ article.id }}:</span>{{ article.title }} </h5>
                  <p>{{ article.body }}</p>
            </div>
        </template>
        <template v-else>
          点击下方加载数据按钮...1秒后显示
        </template>
        <hr>
<!-- click 事件 -->
      <template>
        <!-- 禁止页面刷新 可以给href='#'  也可以加click.prevent  也可以简写把v-on: 换成@ -->
        <a href="#" v-on:click="showMessage()">点击我</a><br>
        <a href="" @click.prevent="showMessage('hello')">我是传参方法</a><br>
        <a href="" @click.prevent="loadData">点击加载数据</a><br>
      </template>
    </div>

    <!-- 第一步引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <!-- 第二步定义 -->
    <script type="text/javascript">

      let app = new Vue({
        el:"#app",
        data:{
          loaded : false,
          articles :null
        },
        methods:{
          showMessage(content = ''){
            alert(content + ' 我是小海，在云海天教程网学习！');
          },
          loadData(){
   //模拟Ajax
            setTimeout(()=>{
              this.articles =  [
                { id : 1, title : '吃苹果的好处', body : '测试苹果内容1' },
                { id : 2, title : '吃西瓜的好处', body : '测试西瓜内容2' },
                { id : 3, title : '吃葡萄的好处', body : '测试葡萄内容3' },
                { id : 4, title : '吃香蕉的好处', body : '测试香蕉内容4' },
              ];
              this.loaded = true
            },1000)
          }

        },
        mounted() {

        }

      })

    </script>
<p>

	</body>
</html>