index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./vue.js"></script>
  </head>
  <body>
    <div id="root">
        <h1>你好，{{msg}}{{number}}</h1>
        <div v-html="contentHtml"></div>
        <div v-text="contentText"></div>

        <!-- v-on:是用于绑定一个事件，可以用@符号代替，这样更加方便 -->
        <div v-on:click="handleClick"><h1>点击==>{{msg}}</h1></div>
        <div @click="handleClick"><h1>点击==>{{msg}}</h1></div>
    </div>

    <script>
        new Vue({
            el:"#root",
            data:{
              msg: "Hello World!",
              number: 123,
              contentHtml: "<h2>以html格式进行展示</h2>",
              contentText: "<h2>以文本格式进行展示</h2>"
            },
            methods:{
                handleClick : function(){
                    this.msg = "世界和平！"
                }
            }

        })
    </script>
  </body>
</html>