1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    10. <body>
    11.     <div id="app">
    12.         <div>{{msg}}</div>
    13.         <div v-text="msg1"></div>
    14.         <div v-html="mytitle"></div>
    16.         <!-- v-on 事件绑定 -->
    17.         <input type="button" value="按钮" @click="show"  title="mytitle">
    19.     </div>
    22.     <script src="./lib/vue.js"></script>
    23.     <script>
    24.         var app = new Vue({
    25.             el: "#app",
    26.             data: {
    27.                 msg: "abcd",
    28.                 msg1: "<h1>qwer</h1>",
    29.                 mytitle: "<h1>大大的mytitle</h1>"
    30.             },
    31.             methods: {  //这个methods属性中定义了当前vue实例所有可用的方法
    32.                 show:function(){
    33.                     alert("hello")
    34.                 }
    35.             },
    36.         })
    37.     </script>
    38. </body>
    40. </html>
    42. <!-- 
    43. 1.定义一个基本vue代码接口
    44. 2.插值与表达式 v-text
    45. 3. v-cloak
    46. 4. v-html
    47. 5. v-bind       #简写 :
    48. 6. v-on         #简写@
    49.  -->

    1.gif