From 33c8ca367769bb62e7ac8c60a9da0100e8505cca Mon Sep 17 00:00:00 2001
From: yumaojun03 <719118794@qq.com>
Date: Sun, 29 Dec 2024 16:24:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E6=A8=A1=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 skills/web/vue-project/README.md              | 102 ++++++++++++++----
 skills/web/vue-project/src/assets/main.css    |   1 +
 skills/web/vue-project/src/assets/my.css      |   1 +
 .../web/vue-project/src/views/AboutView.vue   |  38 ++++++-
 skills/web/vue3/README.md                     |   2 +-
 5 files changed, 121 insertions(+), 23 deletions(-)
 create mode 100644 skills/web/vue-project/src/assets/my.css

diff --git a/skills/web/vue-project/README.md b/skills/web/vue-project/README.md
index 48b75e1..376cd4b 100644
--- a/skills/web/vue-project/README.md
+++ b/skills/web/vue-project/README.md
@@ -1,35 +1,95 @@
 # vue-project
 
-This template should help get you started developing with Vue 3 in Vite.
+## Vue 模版语法
 
-## Recommended IDE Setup
+```vue
+<template>
+  <div class="about">
+    <h1>This is an about {{ pageName }} page</h1>
+    <hr />
+    <input v-model="inputData" type="text" />
+    <hr />
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
+    {{ person.name }}, {{ person.age }}
+  </div>
+</template>
 ```
 
-### Compile and Hot-Reload for Development
+`{{ }}` vue的模版语法, 需要vue编译器, 编程普通的 js语法
 
-```sh
-npm run dev
+### 标签的文本值
+
+HTML标签里 所有的 InterText的值，都可以使用`{{}}`来访问, element.innerText
+
+### 元素属性binding
+
+```html
+<hr />
+<!-- 操作这个元素，然后通过Set Attri -->
+<!-- 一套独立的语法，获取元素的属性，然后来实现属性的绑定 -->
+<!-- person.name -> element Set attri: v-bind -->
+<!-- 为元素绑定动态属性 -->
+<!-- v-bind -> : -->
+<span name="静态变量" :id="person.name">{{ person.name }}, {{ person.age }}</span>
 ```
 
-### Compile and Minify for Production
+### 元素事件binding
 
-```sh
-npm run build
+```html
+<button v-show="false" @click="buttonClickHandler">确定</button>
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+### 表单bindding
 
-```sh
-npm run lint
+```html
+<input v-model="inputData" type="text" />
+```
+
+https://cn.vuejs.org/guide/essentials/forms.html
+
+### 元素内联样式binding
+
+沿用v-bing 这个属性绑定语法: style 这种 样式设置，他有特殊的结构, 样式属性：
+
+```
+{
+    color: bule,
+    backgrouClor: blue;
+}
+```
+
+```html
+<div>Picked: <span :style="">{{ picked }}</span></div>
+
+<input type="radio" id="red" value="red" v-model="picked" />
+<label for="red">Red</label>
+
+<input type="radio" id="blue" value="blue" v-model="picked" />
+<label for="blue">Blue</label>
+```
+
+### 元素class样式binding
+
+```html
+<div>Picked: <span :class="[picked]">{{ picked }}</span></div>
+
+<input type="radio" id="red" value="red" v-model="picked" />
+<label for="red">Red</label>
+
+<input type="radio" id="blue" value="blue" v-model="picked" />
+<label for="blue">Blue</label>
+```
+
+### 条件渲染
+
+```html
+<button v-if="true" @click="buttonClickHandler">确定</button>
+```
+
+### 列表渲染
+
+```html
+<ul>
+  <li v-for="item in drinks" :key="item">{{ item }}</li>
+</ul>
 ```
diff --git a/skills/web/vue-project/src/assets/main.css b/skills/web/vue-project/src/assets/main.css
index 36fb845..b20a8b9 100644
--- a/skills/web/vue-project/src/assets/main.css
+++ b/skills/web/vue-project/src/assets/main.css
@@ -1,4 +1,5 @@
 @import './base.css';
+@import './my.css';
 
 #app {
   max-width: 1280px;
diff --git a/skills/web/vue-project/src/assets/my.css b/skills/web/vue-project/src/assets/my.css
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/skills/web/vue-project/src/assets/my.css
@@ -0,0 +1 @@
+
diff --git a/skills/web/vue-project/src/views/AboutView.vue b/skills/web/vue-project/src/views/AboutView.vue
index 838d186..a8e7579 100644
--- a/skills/web/vue-project/src/views/AboutView.vue
+++ b/skills/web/vue-project/src/views/AboutView.vue
@@ -4,7 +4,27 @@
     <hr>
     <input v-model="inputData" type="text">
     <hr>
-    {{ person.name }}, {{ person.age }}
+    <!-- 操作这个元素，然后通过Set Attri -->
+    <!-- 一套独立的语法，获取元素的属性，然后来实现属性的绑定 -->
+    <!-- person.name -> element Set attri: v-bind -->
+    <!-- 为元素绑定动态属性 -->
+    <!-- v-bind -> : -->
+    <span name="静态变量" :id="person.name">{{ person.name }}, {{ person.age + 1 }}</span>
+    <hr>
+    <button v-if="true" @click="buttonClickHandler">确定</button>
+    <hr>
+    <ul>
+      <li v-for="item in drinks" :key="item"> {{ item }}</li>
+    </ul>
+    <hr>
+    <div>Picked: <span :style="{ color: picked }">{{ picked }}</span></div>
+    <div>Picked: <span :class="[picked]">{{ picked }}</span></div>
+
+    <input type="radio" id="red" value="red" v-model="picked" />
+    <label for="red">Red</label>
+
+    <input type="radio" id="blue" value="blue" v-model="picked" />
+    <label for="blue">Blue</label>
   </div>
 </template>
 
@@ -51,6 +71,14 @@ const person = reactive({
   age: 18
 })
 
+const buttonClickHandler = (v) => {
+  console.log(v)
+}
+
+const drinks = reactive(['Tea', "Coffee", "Milk"])
+
+//
+const picked = ref('red')
 
 </script>
 
@@ -62,4 +90,12 @@ const person = reactive({
     align-items: center;
   }
 } */
+
+.red {
+  color: red;
+}
+
+.blue {
+  color: blue;
+}
 </style>
diff --git a/skills/web/vue3/README.md b/skills/web/vue3/README.md
index 5c7fe59..bb388f0 100644
--- a/skills/web/vue3/README.md
+++ b/skills/web/vue3/README.md
@@ -1,6 +1,6 @@
 # Vue3
 
-https://gitee.com/infraboard/go-course/blob/master/day20/vue3.md
+https://gitee.com/infraboard/go-course/blob/master/day20/vue-base.md#%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95
 
 
 如何切换国内源: https://gitee.com/infraboard/go-course/blob/master/extra/devcloud/setup.md