From 4818a043daf2539d1ceaa29627282646a7ffba40 Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Wed, 26 May 2021 22:40:15 +0800
Subject: [PATCH 1/2] 2021.5.25

---
 "2021.5.25-\345\210\235\350\257\206Vue.js.md" | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 "2021.5.25-\345\210\235\350\257\206Vue.js.md"

diff --git "a/2021.5.25-\345\210\235\350\257\206Vue.js.md" "b/2021.5.25-\345\210\235\350\257\206Vue.js.md"
new file mode 100644
index 0000000..644dd3c
--- /dev/null
+++ "b/2021.5.25-\345\210\235\350\257\206Vue.js.md"
@@ -0,0 +1,30 @@
+# 2021.5.25 
+
+## 初识Vue.js 
+
+在Vue.js的官网介绍中,我看到说Vue.js是一个构建用户界面的渐进式框架;然后我就好奇去查找了一下什么是渐进式框架,大概意思就是说你使用vue框架的时候你可以只是用我的一部分,而不是跟其他框架一样如果使用了我的一部分,那么你就得使用我全部的东西,这就是渐进式框架,这也是vue与其他框架的区别。
+
+
+## 我的第一个Vue应用
+
+```
+// 先建立一个html文件,然后引入vue的包,你也可以下载下来本地引入
+
+<div id="app">
+    <h1>{{ msg }}</h1>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+// 让我们使用vue显示一个 'Hello Word!'
+
+<script>
+    let app = new Vue({
+        el:"#app",
+        data:{
+            msg:"Hello Word!"
+        }
+    })
+</script>
+```
+让我们运行一下
+
+Hell Word!
-- 
Gitee


From 1449902803ff69de33878b70f6a715affcea5069 Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Wed, 26 May 2021 22:40:32 +0800
Subject: [PATCH 2/2] 2021.5.26

---
 ...00\344\272\233\346\214\207\344\273\244.md" | 144 ++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 "2021.5.26-\345\205\263\344\272\216Vue\347\232\204\344\270\200\344\272\233\346\214\207\344\273\244.md"

diff --git "a/2021.5.26-\345\205\263\344\272\216Vue\347\232\204\344\270\200\344\272\233\346\214\207\344\273\244.md" "b/2021.5.26-\345\205\263\344\272\216Vue\347\232\204\344\270\200\344\272\233\346\214\207\344\273\244.md"
new file mode 100644
index 0000000..275ff58
--- /dev/null
+++ "b/2021.5.26-\345\205\263\344\272\216Vue\347\232\204\344\270\200\344\272\233\346\214\207\344\273\244.md"
@@ -0,0 +1,144 @@
+# 2021.5.26
+
+## 指令 
+
+#### 1. 声明式渲染 '{{}}' (基础的渲染,跟我们在node.js中的模板引擎用的没啥区别) 
+```
+<div id="app">
+    <h1>{{ msg }}</h1>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    let app = new Vue({
+        el:"#app",   // el是元素的缩写,获取到当前的节点
+        data:{       // 数据的返回,注意的是,数据返回的时候必须是一个对象,但在组件中data必须要是一个方法
+            msg:"Hello Word!"
+        }
+    })
+</script>
+
+输出: Hello World! 
+```
+
+#### 2. v-for
+```
+<div id="app">
+    <ul>
+        <li v-for="item in list">{{item.text}}<li>
+    </ul>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    let app = new Vue({
+        el:"#app",   
+        data:{       
+            list:[
+                {id:0,text:'菠萝'},
+                {id:1,text:'桃子'},
+                {id:2,text:'荔枝'}
+            ]
+        }
+    })
+</script>
+
+输出: 菠萝 桃子 荔枝
+```
+#### 3. v-if 
+```
+<div id="app">
+    <p v-if="seen">这里显示东西!</p>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    let app = new Vue({
+        el:"#app",   
+        data:{       
+            seen:true/false
+        }
+    })
+</script>
+
+
+输出:设置属性值为 true/false 设置显示或者不显示
+```
+
+#### 4. v-model 双向绑定 响应式
+```
+<div id="app">
+        <input type="text" v-model="name">
+        <h1>{{ name }}</h1>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    let app = new Vue({
+        el:"#app",   
+        data:{       
+            name:"xxxx"
+        }
+    })
+</script>
+
+输出: xxx
+
+当你在输入框中输入什么下面的h1标签显示的就是什么,这就是双向绑定
+```
+#### 
+
+#### 5. v-bind 数据绑定
+```
+<div id="app">
+    <span v-bind:title="msg">鼠标停留几秒看看</span>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    let app = new Vue({
+        el:"#app",   
+        data:{       
+            msg:'被你发现了'
+        }
+    })
+</script>
+```
+
+
+## 组件
+
+组件可以让你创建一个新的标签,然后渲染好一些数据,他可以被反复的复用,非常的方便。让我们来建一个新的标签吧。
+
+```
+<div id="app">
+       <table>
+           <item-list v-for="item in list" :list=item></item-list>
+       </table>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+
+    // 创建一个组件 使用 component 关键字创建
+    Vue.component('item-list',{
+        props:['list'],    // 自定义的属性 
+        template:`          // 自定义html
+        <tr>
+            <td>{{list.id}}</td>
+            <td>{{list.text}}</td>
+        </tr>
+        `
+    })
+    let app = new Vue({
+        el:'#app',
+        data(){
+            return {
+            list:[
+                {id:0,text:'菠萝'},
+                {id:1,text:'桃子'},
+                {id:2,text:'荔枝'}    
+            ]
+        }
+        }
+    })
+</script>
+
+```
+注: props属性值的命名方式: 1.全部小写 2.驼峰命名法 因为在html标签中不区分大小写,所以你在使用驼峰命名法绑定数据的时候需要使用一个短 - 来连接大写字母
-- 
Gitee