安裝
首先需要安裝好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變數的值
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501113.html
標籤：其他