CodePen 練習
環境建立
兩種方法: CDN(整包加入) / import esm (需要的加入)
CDN
<script src="https://unpkg.com/vue@next"></script>
import esm
<script type="module">
import {要載入的模組} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/dist/vue.esm-browser.min.js';
</script>
ESM 如果沒有加 type="module" 使用 import/export 會報錯
擇一使用，不會同時使用兩種載入方法，建議使用 ESModule 的載入方法。
vue-cli(除非對node有一定認識，不然不建議使用)
npm install -g @vue-cli
vue create hello-vue3
Vue 基本寫法
三個重點:
- data 資料邏輯
- methods 方法
- mounted 生命週期
一般的JS是將HTML內的DOM取值拉進來JS在操作。(透過操作DOM)
Vue.js的不同點: 會先定義資料邏輯(data/function)，再將資料拉出並呈現在HTML。
Vue的基本寫法是寫出一個元件，並指定到HTML位置上。
CDN
Vue.createApp({
data: function(){
return{ ... }
},
methods:{ ... },
mounted: function(){ ... },
}).mount('DOM')
data部分 一定是function 搭配 return。'function' 可以不寫
import
import {要載入的模組} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/dist/vue.esm-browser.min.js';
createApp({
data: function(){
return{ ... }
},
methods: {
clickAlert() { // 建議可以縮寫就縮寫（提升程式碼閱讀性）
alert('我被觸發了');
},
mounted: function(){ ... },
}).mount('DOM')
data部分 一定是function 搭配 return。'function' 可以不寫
基本練習
Vue.createApp({
data: function(){
return{
text: '文字',
name: 'Andy',
num: 30,
person: {
name: 'Ted',
cash: 20000,
image: 'http://fakeimg.pl/210x210/',
gender: 'male',
},
people: [
{
name: 'Andy',
cash: 4000000,
image: 'http://fakeimg.pl/210x210/',
gender: 'male'
},
{
name: 'Betty',
cash: 2500,
image: 'http://fakeimg.pl/210x210/',
gender: 'female'
},
{
name: 'Mark',
cash: 38000,
image: 'http://fakeimg.pl/210x210/',
gender: 'male'
},
]
}
}
}).mount('#app');
將資料寫入HTML
使用: {{ }}
<body>
<div id="app">
{{text}}
<p>名字 {{name}} </p>
</div>
</body>
將資料作為屬性寫入
使用: v-bind
<img v-bind:src="person.image" :alt="person.name" width='100'>
省略語法：直接在屬性前加上 : 省略 v-bind
將資料與HTML雙向綁定(會同步資料)
使用: v-model
<input type: "number" v-model="num">
這邊會將data中的num帶入，並與html雙向綁定。(會同步資料)
將資料帶入HTML做判斷式(if/else)
使用: v-if & v-else-if & v-else
v-if & v-else 要搭配一起使用才會有效果
v-if：將判斷式寫入 "" 中，若是 true 則會顯示，false 則不會顯示
v-else：不用加判斷式，但需要搭配 v-if 一起使用（若要還需要判斷，則使用 v-else-if）
<i class="fas fa-mars" v-if="person.gender === 'male'"></i>
<i class="fas fa-venus" v-else></i>
將多筆資料透過迴圈方式載入進HTML
使用: v-for
<ul>
<li v-for="item in people">
{{ item.name }}
<im
.image" :alt="item.name">
<i class="fas fa-mars" v-if="item.gender === 'male'"></i>
<i class="fas fa-venus" v-else></i>
{{ item.cash }}
</li>
</ul>
將methods載入html事件觸發
使用: v-on
可縮寫為 @ ，來監聽DOM事件。
v-on:click="methodName" = @click="methodName"
<button type="button" @click="item.cash++">增加</button>
<button type="button" @click="clickAlert">clickAlert</button>
關於 mounted 生命週期
- 網頁載入後只會執行一次，適合做初始化。
- 主要為使用 this 方式取 data 的值。
