【Vue3】開始使用vue

創建vue

1

<div id="app">{{ count }}{{ text }}</div>

1
2
3
4
5
6
7
8


Vue.createApp({
  data(){
    return{
      count: 0,
      text: "這是一段文字"  
    }
  }
}).mount("#app");

mount是綁定html顯示位置

顯示結果：

1

<div id="app">0這是一段文字</div>

資料數字，每次點擊按鈕資料數字+1

1
2
3
4


<div id="app">
  <p>{{ count }}</p>
  <button type="button" @click="addCount">按我</button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


const app = {
  //資料（函式）
  data(){
    return{
      count: 0
    }
  },
  //生命週期（函式）
  created(){
    this.count = 10
  },
  //方法（物件）
  methods:{
    addCount(){
      this.count = this.count + 1;
    }
  }
}

Vue.createApp(app).mount("#app");

不論在data或created或methods裡新增的東西，都會被攤在Proxy層，所以this都可以直接取用

更新名稱和圖片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<div id="app">
  <form>
    <div class="row mb-3">
      <label for="productName" class="col-sm-2 col-form-label">產品名稱</label>
      <div class="col-sm-10">
        <!-- 輸入框綁定data的temp -->
        <input type="text" id="productName" class="form-control" v-model="temp.name">
      </div>
    </div>
    <div class="row mb-3">
      <!-- src綁定data的temp -->
      <img v-bind:src="temp.imageUrl" class="img-fluid" alt="">
    </div>
    <div class="row mb-3">
      <label for="productImage" class="col-sm-2 col-form-label">產品圖片</label>
      <div class="col-sm-10">
        <!-- 輸入框綁定data的temp -->
        <input type="text" id="productImage" class="form-control" v-model="temp.imageUrl">
      </div>
    </div>
    <button type="button" @click="updateFile">更新</button>
  </form>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


const app = {
  data(){
    return{
      temp:{
        name: "",
        imageUrl: "https://images.unsplash.com/photo-1602526430780-782d6b1783fa?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
      }
    }
  },
  methods:{
    updateFile(){
      console.log(this.temp);
    }
  }
}

Vue.createApp(app).mount("#app");

創建vue

顯示結果：

資料數字，每次點擊按鈕資料數字+1

更新名稱和圖片

其他相關