vault backup: 2025-02-10 17:27:57

21.01. Programming/vue.js.md

@@ -0,0 +1,61 @@
+## 輸出
+{{message}}
+
+## 迴圈
+v-for
+
+```javascript
+<li v-for="item in list">{{ item }}</li>
+```
+
+## 輸入雙向綁定：`v-model`
+```html
+<input v-model="message">
+```
+
+```javascript
+var app = Vue.createApp({
+    data: function() {
+        return {
+            message: "要被綁定的訊息"
+        }
+    }
+});
+```
+
+## 事件：`v-on`
+
+```html
+<button v-on:click="testEvent">按我</button>
+```
+
+```javascript
+var app = Vue.createApp({
+    method: {
+        testEvent: function() {
+            alert("你按了button");
+        }
+    }
+});
+```
+
+
+## 條件式：`v-if`
+
+```html
+<div v-if="isShow"></div>
+```
+
+```javascript
+var app = Vue.createApp({
+    data: function() {
+        return {
+            message: "要被綁定的訊息",
+            isShow: true
+        }
+    }
+});
+```
+
+## 屬性綁定
+### `v-bind`