Vue腳手架的開始，項目目錄，綁定文本、屬性、事件

安裝

首先需要安裝好NPM，然後使用下列的命令一次進行
npm install -g @vue/cli //安裝腳手架
vue create xx //創建Vue項目,xx為要創建的項目名
創建項目後，使用 cd 進入目錄
npm run serve //啟動項目

目錄

Pubulic：靜態文件
src：我們開發Vue大多數文件都放在裡面
package.json：記錄Vue項目的所有依賴。

我們的npm run serve命令就是在該文件的script中定義的

main.js 用於引入三方模塊

一個單文件組件中分為三個部分

開寫：綁定文本 {}

我們直接在App.vue文件中寫個Hello world

一定要註意，template中只能暴露一個標簽（Vue2中）

<template>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</template>

在script標簽中，進行暴露

export default {
  data() {
    return{
      message:'hello Vue!'
    }
  }
}

然後頁面可正常展示內容了

綁定屬性 v-bind(簡寫 : )，綁定事件 v-on(簡寫@)

事件的相關函數寫在 methods中

<template>
  <div id="app">
    <h1 :title="message">{{message}}</h1>
    <button @click="sayHi">sayHi</button>
  </div>
</template>

<script>
export default {
  data() {
    return{
      message:'hello Vue!'
    }
  },
  methods: {
    sayHi() {
      alert("Hi!")
    }
  }
}
</script>

然後我們點擊按鈕就會完場相應的事件，title屬性也會顯示meassage變數的值