vault backup: 2024-01-18 20:48:38

00. Inbox/vue.js.md

@@ -0,0 +1,62 @@
+## 輸出
+{{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
+        }
+    }
+});
+```