1. 程式人生 > >Vue.js 筆記(一) 起步

Vue.js 筆記(一) 起步

快速入門

<!DOCTYPE html>
<html lang="zh" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>vue test    </title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js" charset="utf-8"></script>

  </head>
  <body>
    <div id="v1">
      {{msg}}
      <button @click="sayhi">sayhi</button>
    </div>
  </body>
</html>
<script type="text/javascript">
  let vm=new Vue({
    el:"#v1",
    data:{msg:"hello vue!"},
    methods:{
      sayhi:function(){
        alert(this.msg);
      }
    }
  });
</script>

說明:

el --------引數是 DOM 的id            

data --------用於定義屬性,例項中有三個屬性分別為:site、url、alexa。

methods --------用於定義的函式,可以通過 return 來返回函式值。

{{ }} --------用於輸出物件屬性和函式返回值。