From 4902eea505b76932cd2d7f24286674b39c552350 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=82=B2?= <121981894@qq.com>
Date: Thu, 31 Mar 2022 14:51:39 +0800
Subject: [PATCH] =?UTF-8?q?vue=E4=BD=9C=E4=B8=9A=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../3.29vue/demo01.html"                      | 60 +++++++++++++++++
 ...344\272\216p\346\240\207\347\255\276.html" | 31 +++++++++
 ...\346\235\277\350\257\255\346\263\225.html" | 66 +++++++++++++++++++
 3 files changed, 157 insertions(+)
 create mode 100644 "\345\210\230\345\202\262/3.29vue/demo01.html"
 create mode 100644 "\345\210\230\345\202\262/3.29vue/\345\205\263\344\272\216p\346\240\207\347\255\276.html"
 create mode 100644 "\345\210\230\345\202\262/3.30vue/\346\250\241\346\235\277\350\257\255\346\263\225.html"
diff --git "a/\345\210\230\345\202\262/3.29vue/demo01.html" "b/\345\210\230\345\202\262/3.29vue/demo01.html"
new file mode 100644
index 0000000..32e0b33
--- /dev/null
+++ "b/\345\210\230\345\202\262/3.29vue/demo01.html"
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+</head>
+<body>
+    <div id="one">
+        <span v-bind:title = "message">
+            look me(鼠标悬浮到此查看信息)
+        </span>
+    </div>
+</body>
+<script>
+    let hover = new Vue({
+        el:"#one",
+        data:{
+          message:'loading... ' 
+        }
+       
+    })
+
+   /*
+     1->     v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
+             它们会在渲染的 DOM 上应用特殊的响应式行为。   
+     
+     2->     该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
+
+
+     3->     打开控制台，输入 hover.message = 'i am new here'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
+
+
+     4->     笔记：4.1：vue和dom有相似的地方，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
+                  4.2：el就是 element（元素） 的简写,就是元素选择器，可以是id class 等，就是vue的作用域, el 不能是html 和body 标签，其它的元素可以。
+                  4.3：data 直译过来就是数据,可以是json 格式，也可以是函数（必须要有返回json格式）
+                  4.4：data里面的元素可以被多次输出  
+                  4.5：data的数据元素可以多个
+                  4.6：调取我们输入的参数：在元素前+$符号如：    console.log(vm.$el);
+                  4.7：data数据调取：console.log(vm.data.message); 错误
+                       正确：1.    console.log(vm.message);
+                            2.     console.log(vm.$data.message); （层级之间调取在第二层加$）
+
+                  4.8：watch方法：vm.$watch('message',function(newValue,oldValue){
+                            console.log(newValue,oldValue)
+                        });
+                    $watch 方法可以观察每个数据的变化，函数中两个形参为 新的数据与旧数据。
+                  
+                  4.9：在 vue中method是普通意义的function域，可以定义方法来进行属性的修改，或者返回。
+
+
+
+
+
+
+
+   */
+</script>
+</html>
\ No newline at end of file
diff --git "a/\345\210\230\345\202\262/3.29vue/\345\205\263\344\272\216p\346\240\207\347\255\276.html" "b/\345\210\230\345\202\262/3.29vue/\345\205\263\344\272\216p\346\240\207\347\255\276.html"
new file mode 100644
index 0000000..7de9fe6
--- /dev/null
+++ "b/\345\210\230\345\202\262/3.29vue/\345\205\263\344\272\216p\346\240\207\347\255\276.html"
@@ -0,0 +1,31 @@
+<!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>
+    <p>
+        <p>
+            我是文本
+        </p>
+    </p>
+</body>
+<script>
+    let p_ele = document.querySelectorAll("p");
+    console.log(p_ele[1]);//在ele元素页面中，可以看出<body>中的<p>元素格式为
+    /*   
+    <p>
+        </p>
+        <p>
+            我是文本
+        </p>
+    <p></p>
+ 
+    */
+    
+    //<p>标签变成了三个，所以要取到我是文本这个标签，需要取下标为[1]
+
+</script>
+</html>
\ No newline at end of file
diff --git "a/\345\210\230\345\202\262/3.30vue/\346\250\241\346\235\277\350\257\255\346\263\225.html" "b/\345\210\230\345\202\262/3.30vue/\346\250\241\346\235\277\350\257\255\346\263\225.html"
new file mode 100644
index 0000000..64a187a
--- /dev/null
+++ "b/\345\210\230\345\202\262/3.30vue/\346\250\241\346\235\277\350\257\255\346\263\225.html"
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<body>
+    <div id="one" >
+
+        <div>{{text}}</div>                         element显示：<div>我是文本并且将替换msg中的值</div>
+
+        <div v-text="text"> "what"</div>            element显示：<div>我是文本并且将替换msg中的值</div>
+
+        <div v-bind:st="str"> abca</div>            element显示：<div str="123"> abca</div>
+      
+        <div v-bind:st="str"> {{str}} </div>        element显示：<div str="123"> 123</div>
+         
+
+    </div>
+</body>
+<script>
+     let data = {
+        text:"我是自定义文字并且将替换msg中的值",
+        str:"123"
+      
+    }
+
+    let newV = new Vue({
+        el:"#one",
+        data:data,
+    })
+
+   
+
+    /*
+
+    1->           文本插值：<span>Message: {{ msg }}</span>
+                  {{ msg }}标签会被替代为对应数据（data）上的msg的值,当绑定的数据对象上msg发生了改变，插值内容都会被更新。
+
+
+    2->            data需在声明vue之前声明
+
+
+    3->            文本类的渲染.{{}} 与 v-text 形式， v-text 形式会干掉元素里面的内容与html元素(不会改变元素结构)，元素还是原来的<div>结构
+
+
+    4->            v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
+
+                   语法：v-bind:attr="attrname",在data中传入attrname:" "(attrname的msg),该形式不会干掉元素里面的内容，
+
+                   但会改变元素的结构，新的结构为<div attr="attrname">xxx</div>
+
+
+    5->             v-if 判断，走的逻辑取决于对应的值，如果值为true,则为真,如果有两层if嵌套，那走的程序为
+                                if(){
+                                    if(){
+                                        ...
+                                    }    
+                                }
+                    要先一层if判断，若为true才能进入包含的if(),如果为false则进不了内层的if()
+
+    */
+</script>
+</html>
\ No newline at end of file
-- 
Gitee

