From 634a32644086f297c3aa01f568ff779670f3193c Mon Sep 17 00:00:00 2001
From: liu <3207586618@qq.com>
Date: Wed, 26 May 2021 17:34:52 +0800
Subject: [PATCH] =?UTF-8?q?Vue=E7=AC=AC=E4=BA=8C=E8=AF=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...e\347\254\254\344\270\200\350\257\276).md" | 106 ++++++++++++++++++
 ...0\346\210\267\350\276\223\345\205\245).md" |  70 ++++++++++++
 2 files changed, 176 insertions(+)
 create mode 100644 "\345\210\230\345\215\216\346\243\256/Vue-note-2021-5-25(Vue\347\254\254\344\270\200\350\257\276).md"
 create mode 100644 "\345\210\230\345\215\216\346\243\256/Vue-note-2021-5-26(\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245).md"
diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-5-25(Vue\347\254\254\344\270\200\350\257\276).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-5-25(Vue\347\254\254\344\270\200\350\257\276).md"
new file mode 100644
index 0000000..96c1acf
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-5-25(Vue\347\254\254\344\270\200\350\257\276).md"
@@ -0,0 +1,106 @@
+### 今天天气阴天，气温三十多度吧。
+
+## Vue 第一课，（Vue2.0 版本）
+
++ Vue 是一种渐进式框架，也是三大框架之一的一种。另外两种框架分别是  react  框架 facebook 开发的、anguar2 谷歌开发的。当然这种框架不同于三大框架的，Vue 设计自认为是以底向上逐层应用的。Vue的核心库只关注视图层。
+
++ 需要注意的是 mvvm 也是采用双向数据绑定的，然后就是那三大框架都是基于 mvvm 底层开发的。
+
+1. Vue的优缺点：
+
++ 体积小。
+
++ 更高的运行效率。基于虚拟 DOM。
+
++ 双向数据绑定：让我们不用再去操作 DOM 对象，把时间和精力放到业务逻辑上面来，以提高工作工作效率。
+
++ 易上手操作。
+
+2. 操作 Vue.js 的第一个就是要引入 Vue 才能运行第一个程序。
+
++ 声明式渲染
+
+```
+<div id ="app">
+  {{ message}}
+</div>
+
+
+var app = new Vue({
+    el:'#app',
+    data:{
+        message:'Hello Vue'
+    }
+})
+
+
+输出的内容是： Hello Vue 
+
+```
+
++ 当绑定一个元素 attribute 的时候 当鼠标停留这那段文字的时候会显示出来，
+
+```
+<div id ="app-2">
+<span v-bind:title="message">
+
+鼠标悬停几秒查看此处动态绑定的提示信息！
+</span>
+</div>
+
+----
+
+var app2 =new Vue({
+    el:'#app-2';
+    data:{
+        message:'页面加载于' + new Data().toLocaleString()
+    }
+})
+
+```
+
++ 通常我们看到的 比如 v-bind attribute 也就是被称为指令。指令带有前缀 v- 就是表示的是 Vue提供的特殊 attribute。我们也可以在浏览器上 打开控制台，输入app2.message = '需要更改的内容' 就会再次更新 标签的attribute 。
+
+
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+
+    <div id="app">
+        <span v-bind:title="msg">
+           王维的诗
+        </span>
+
+        <span title="6666666">
+            <p>555555</p>
+        </span>
+
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+<script>
+    let app=new Vue({
+        el:'#app',
+        data(){
+            return{
+                msg:'独在异乡为异客，每逢佳节倍思亲'
+            }
+        }
+    })
+
+    console.log(app);
+</script>
+
+
+</body>
+</html>
+
+```
\ No newline at end of file
diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-5-26(\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-5-26(\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245).md"
new file mode 100644
index 0000000..2269bea
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-5-26(\346\235\241\344\273\266\344\270\216\345\276\252\347\216\257\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245).md"
@@ -0,0 +1,70 @@
+
+### 今天讲了条件与循环、处理用户输入和组件化应用构建等等
+
++ 这里需要注意的地方有 有两个可以编写成为文档的工具 分别是 GitBook、和 BookStack来生成文档。
+
++ 还有就是那个项目竞赛可以用到的两个模板有 Layui 和 adminlte 这两个工具来辅助完成。
+
+1. 条件与循环
+
+```
+在条件与循环中就有一个特殊的符号 v-for 指令。就可以绑定数组的数据来渲染某一个项目的列表。
+
+<div id="app-4">
+
+<ol>
+<li v-for="todo" in todos>
+{{todo.text}}
+</li>
+</ol>
+</div>
+
+------------------
+
+var app4=new Vue({
+    el:'#app-4',
+    data:{
+        todos:[
+            {text:'某某 Java'},
+            {text:'某某 Vue'},
+            {text:'牛逼'}
+        ]
+    }
+})
+
+```
+
++ 条件和循环
+
+```
+<div id="app-3">
+        <ol>
+            <li v-for="todo in todos">     // 在这里需要注意的是不需要使用 var 或者 let 来用。
+                {{todo.text}}
+
+            </li>
+        </ol>
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+   <script>
+
+
+   var app3=new Vue({
+       el:'#app-3',
+       data(){
+           return{
+               todos:[
+                   {text:'一号种子'},
+                   {text:'二号种子'},
+                   {text:'三号种子'}
+
+               ]
+           }
+       }
+   })
+
+```
\ No newline at end of file
-- 
Gitee

