【Vue】第一个Vue例子

代码：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
     <title>标题</title>
    </head>

     <body>
        <div id="app1" @click="handleClick">
            <span>{{message}}</span>
            <input type="text" v-bind:value="myValue"/>
            <p v-if="seen">现在你看到我了</p>
            <ul>
                <li v-for="hobby in hobbies">
                  {{ hobby.text }}
                </li>
              </ul>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
    // 脚本
    var app = new Vue({
      el: '#app1',
      data: {
        message: 'Hello Vue!',
        myValue:'19491001',
        seen:true,
        hobbies: [
          { text: '抽烟' },
          { text: '喝酒' },
          { text: '烫头' }
        ]
      },
      methods:{
        handleClick:function(){
            alert(1);
        }
      }
    })
//-->
</script>
效果：
这个Vue用Editplus也可以调试，这还不错。
END