From 7e95ab81e52c2ef9dff46cb90a61baac7e20aacc Mon Sep 17 00:00:00 2001
From: lhx <781131860@qq.com>
Date: Wed, 26 May 2021 17:33:43 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E6=AC=A1Vue=E8=AF=BE?=
 =?UTF-8?q?=E7=9A=84=E7=AC=94=E8=AE=B0=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../note2021-5-25-01.md"                      |  73 ++++++++
 .../note2021-5-26-01.md"                      | 160 ++++++++++++++++++
 2 files changed, 233 insertions(+)
 create mode 100644 "\346\236\227\351\270\277\351\221\253/note2021-5-25-01.md"
 create mode 100644 "\346\236\227\351\270\277\351\221\253/note2021-5-26-01.md"
diff --git "a/\346\236\227\351\270\277\351\221\253/note2021-5-25-01.md" "b/\346\236\227\351\270\277\351\221\253/note2021-5-25-01.md"
new file mode 100644
index 0000000..454d911
--- /dev/null
+++ "b/\346\236\227\351\270\277\351\221\253/note2021-5-25-01.md"
@@ -0,0 +1,73 @@
+# Vue.js 第一次课
+
+介绍： Vue是一套用于构建用户界面的渐进式架构，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
+
+安装：你可以下载也可以直接引用<script> 
+例： 
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+还有你可以用NPM装一下：npm install vue
+
+下面是今天学到的一些实例：
+
+    <body>
+        <div id="app">
+            {{name}}
+        </div>
+        <div id="app2">
+            <span v-bind:title="username">
+                大家好我是施校长！
+            </span>
+        </div>
+        <div id="app3">
+            <p v-if="seen">我ayou</p>
+        </div>
+
+        <div id="app4">
+            <ol>
+                <li v-for="todo in todos">
+                    {{ todo.text }}
+                </li>
+            </ol>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+        <script>
+            var app = new Vue({
+                el: '#app',
+                data: {
+                    name: '小强'//显示内容
+                }
+            })
+
+            var app2 = new Vue({
+                el: '#app2',
+                data: {
+                    username: '这个是哈？你说的是指的这个吗？' + new Date().toLocaleString()//绑定一些提示信息，后面那个date是显示时间
+                }
+            })
+            //用ture or false 来让文字显示
+            var app3 = new Vue({
+                el: '#app3',
+                data: {
+                    seen: true
+                }
+
+
+            })
+            //数组
+            var app4 = new Vue({
+                el: '#app4',
+                data: {
+                    todos: [
+                        { text: 'C# ' },
+                        { text: ' Vue' },
+                        { text: 'java' },
+                        { text: 'sql' },
+                        { text: 'html' },
+                        { text: 'winform' },
+                        { text: 'js' }
+                    ]
+                }
+            })
+        </script>
+    </body>
\ No newline at end of file
diff --git "a/\346\236\227\351\270\277\351\221\253/note2021-5-26-01.md" "b/\346\236\227\351\270\277\351\221\253/note2021-5-26-01.md"
new file mode 100644
index 0000000..40d22cd
--- /dev/null
+++ "b/\346\236\227\351\270\277\351\221\253/note2021-5-26-01.md"
@@ -0,0 +1,160 @@
+# Vue的第二次课
+
+1.条件与循环
+
+控制切换一个元素是否显示也相当简单:
+
+
+    <div id="app">
+        <span v-if="seen" title="我是胡永嘉！">
+            你说的是啥？？
+        </span>
+        <span v-else title="裂开！">
+            我不懂啊
+        </span>
+
+    </div>
+
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data() {
+                return {
+                    seen: true
+                }
+
+            }
+        })
+    </script>
+
+2.v-for 指令可以绑定数组的数据来渲染一个项目列表：
+
+    <div id="app">
+        <ul>
+            <li v-for="item in toDos">
+                {{item.taskName}}
+            </li>
+        </ul>
+    </div>
+
+     <script>
+        var app = new Vue({
+            el: '#app',
+            data() {
+                return {
+                    toDos: [
+                        {
+                            taskName: '起床'
+                        },
+                        {
+                            taskName: '睁开眼睛'
+                        },
+                        {
+                            taskName: '打开手机'
+                        },
+                        {
+                            taskName: '看NBA'
+                        },
+                        {
+                            taskName: '继续睡觉...'
+                        },
+                    ]
+                }
+
+            }
+        })
+    </script>
+
+3.处理用户输入
+
+为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
+
+    <div id="app">
+            <form>
+                <table>
+                    <tr><label for="">用户名：</label></tr>
+                    <tr><input type="text" v-model="formdata.username"></tr>
+                </table>
+                <table>
+                    <tr><label for="">密码：</label></tr>
+                    <tr><input type="text" v-model="formdata.password"></tr>
+                </table>
+            </form>
+            <label for="">{{str}}</label>
+    </div>
+
+    <script>
+                var app = new Vue({
+                    el: '#app',
+                    data() {
+                        return {
+
+                            formdata: {
+                                username: '',
+                                password: ''
+                            }
+                        }
+
+
+                    }
+                    ,
+                    computed: {
+                        str: function () {
+                            return `用户名：${this.formdata.username}  密码是：${this.formdata.password}`
+                        }
+                    }
+                })
+    </script>
+
+
+
+4.组件化应用构建
+
+    <div id="app">
+            <table>
+                <todo-item v-for="item in toDos" v-bind:x=item>
+
+                </todo-item>
+            </table>
+        </div>
+
+    <script>
+            Vue.component('todo-item', {
+                props: ['x'],
+                template: `
+                <tr>
+                <td>{{x.id}}</td>
+                <td>{{x.aa}}</td>
+                </tr>
+                `
+            })
+            var app = new Vue({
+                el: '#app',
+                data() {
+                    return {
+
+                        toDos: [
+                            {
+                                id: 1,
+                                aa: '起床'
+                            },
+                            {
+                                id: 2,
+                                aa: '吃饭'
+                            },
+                            {
+                                id: 3,
+                                aa: '睡觉'
+                            },
+                            {
+                                id: 4,
+                                aa: '打豆豆'
+                            }
+                        ]
+                    }
+
+
+                }
+
+            })
+        </script>
\ No newline at end of file
-- 
Gitee

