1. 程式人生 > 實用技巧 >1.Vue的基本使用

1.Vue的基本使用

1.引入Vue

根據https://cn.vuejs.org/v2/guide/installation.html中的方法引入Vue,學習過程中建議下載Vue的開發版本到本地引入.

<script src="../js/vue.js"></script>

2.Vue的基本使用

讓我們先來看一下基本使用的程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>

<!--1.匯入Vuejs-->
<script src="../js/vue.js"></script>
<script>
  //2.繫結Vue物件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好!Vuejs!'
    }
  });
  
</script>
</body>
</html>

使用Vue需要建立一個Vue物件的例項,並傳入一個物件引數.物件引數裡的el(element)屬性就是我們要繫結的dom物件,data屬性存放Vue的一些資料.事實上,只有被繫結的dom物件裡的內容才會被Vue引擎解析.