Vue3 起手式

#vue3 #v-if #v-else #v-on #v-bind #v-model #v-for

Posted by hoyi-23 on 2021-07-16

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 基本寫法

三個重點:

  1. data 資料邏輯
  2. methods 方法
  3. 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 生命週期

  1. 網頁載入後只會執行一次，適合做初始化。
  2. 主要為使用 this 方式取 data 的值。

#vue3 #v-if #v-else #v-on #v-bind #v-model #v-for

hoyi-23




Related Posts

OOP - 5 抽象類別與介面 (2)

OOP - 5 抽象類別與介面 (2)

tsungtingdu
從 SessionStorage 開始一場 spec 之旅

從 SessionStorage 開始一場 spec 之旅

 huli
JavaScript 提升(Hoisting)概念

JavaScript 提升(Hoisting)概念

 hoyi-23

Comments