From 20d842327b0c2ddd021d863837a541b0100e86d0 Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Mon, 31 May 2021 17:39:54 +0800
Subject: [PATCH] 2021.5.31

---
 ...21.5.25-\345\210\235\350\257\206Vue.js.md" |  30 +++
 ...00\344\272\233\346\214\207\344\273\244.md" | 144 ++++++++++++++
 .../2021.5.27.md"                             |  73 +++++++
 ...37\345\221\275\345\221\250\346\234\237.md" |  65 +++++++
 .../2021.5.28.md"                             |  46 +++++
 ...14\344\276\246\345\220\254\345\231\250.md" | 116 +++++++++++
 .../2021.5.30.md"                             |  86 +++++++++
 .../2021.5.31.md"                             | 181 ++++++++++++++++++
 .../shopping.html"                            | 119 ++++++++++++
 .../vue.html"                                 |  59 ++++++
 10 files changed, 919 insertions(+)
 create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.5.25-\345\210\235\350\257\206Vue.js.md"
 create mode 100644 "\351\273\204\345\255\230\346\235\260/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"
 create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.5.27.md"
 create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md"
 create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.5.28.md"
 create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.5.29-Vue\346\250\241\346\235\277\350\257\255\346\263\225\343\200\201\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md"
 create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.5.30.md"
 create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.5.31.md"
 create mode 100644 "\351\273\204\345\255\230\346\235\260/shopping.html"
 create mode 100644 "\351\273\204\345\255\230\346\235\260/vue.html"

diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.25-\345\210\235\350\257\206Vue.js.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.25-\345\210\235\350\257\206Vue.js.md"
new file mode 100644
index 0000000..644dd3c
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/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!
diff --git "a/\351\273\204\345\255\230\346\235\260/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/\351\273\204\345\255\230\346\235\260/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/\351\273\204\345\255\230\346\235\260/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标签中不区分大小写,所以你在使用驼峰命名法绑定数据的时候需要使用一个短 - 来连接大写字母
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.27.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.27.md"
new file mode 100644
index 0000000..fe2a922
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.5.27.md"
@@ -0,0 +1,73 @@
+# 2021.5.27
+
+
+## vue实例
+```
+<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",
+        data:{
+            msg:"Hello Word!"
+        }
+    })
+</script>
+```
+```
+这里我们定义的app就是一个vue实例,在实例中可以定义选项,这里就出现两个
+
+el选项:用于指定在哪个dom元素挂载vue实例
+data选项:用于存在数据库,一些实例中用到的数据都可以在里声明,它的作用域是这一整个实例
+```
+
+## v-bind 与 v-on 
+
+1.v-bind:用于数据的绑定,绑定的数据可以是各种的
+
+如：
+```
+<div id="app">
+    // 我们使用了span标签的特性使用数据绑定实现给title设置一些值,就可以使用到v-bind来实现
+    <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>
+```
+
+2.v-on:用于监听dom元素上的一些事件
+
+如点击事件,这里使用了单击实现实现了标签的显示于隐藏:
+```
+<div id="app">
+    <p v-if="show">这里显示文本</p>
+    <button @click="handleClose">点击隐藏</button>
+</div>
+
+
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    let app = new Vue({
+        el:"#app",
+        data:{
+            show:true
+        },
+        methods(){
+            this.show = !this.show
+        }
+    })
+</script>
+```
+methods选项:用于存放定义的函数与方法方便复用,methods中的this表示当前实例本身
\ No newline at end of file
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md"
new file mode 100644
index 0000000..e87bb27
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md"
@@ -0,0 +1,65 @@
+# 2021.5.28
+
+## Vue实例的生命周期
+
+生命周期可以是根实例也可以是组件
+
+```
+<div id="app">
+    <input type="button" value="修改msg" @click="msg='No'">
+    <h3 id="h3">{{ msg }}</h3>
+</div>
+
+<script>
+    let vm = new Vue({  //表示创建一个实例对象
+        el:'#app',      // 选择挂载的dom节点
+        data:{          // 要使用的数据
+            msg:'Vue的生命周期'
+        },
+        methods:{
+            show(){
+                console.log('执行了show方法') 
+            }
+        }
+        beforeCreate(){  // 遇到第一个周期函数 
+            console.log(this.msg)
+            this.show()
+            在这个时候,它只是初始化了一个空的实例,什么都没有,data与show方法也并没有初始化,只有实例默认的周期函数与默认的事件    
+        },
+        created(){   // 遇到第二个周期函数
+            console.log(this.msg)
+            this.show()
+            在这个时候,它已经初始化好了数据,你已经可以在这里做些什么了,你也可以在这里写入你想要的初始化的数据或者调用一些你想要的执行的函数,最早,使用一些方法时就可以在这里调用
+        },
+           在 created --> beforMount 之间这个过程
+             它会查找是否有el/template 如果有el那么他会去查找是否有template,如果有的话那么它会去渲染template中的模板,如果没有template那么它会去渲染el选择的dom节点,如果template与el同时存在那么会渲染template到内存中,template会覆盖el,但是el是必须的
+        beforeMount(){  // 遇到第三个周期函数
+            console.log(document.getElementById('h3').innerText)
+            在这个时候,实例已经渲染到了模板保存在内存中,但是还没有挂载到dom上,所以dom上并没有变化
+        },
+        mounted(){    // 遇到第四个周期函数 
+            console.log(document.getElementById('h3').innerText)
+            在这个时候,已经完成了实例化,已经把渲染好的模板挂载到dom上了,页面有了变化,你可以在这个时候编写你的方法或者调用方法
+        },
+            在 mounted --> beforeDestroy 有两个事件 在数据发生变化是会运行
+        beforeUpdate(){   
+            console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
+            console.log('data 中的 msg 数据是：' + this.msg)  
+            如果数据发生了改变,那么在这个时候,它已经重新渲染好了模板并且保存在了内存中,但是并未同步到页面单中,但是数据已经更新了
+        },
+        updated(){
+            console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
+            console.log('data 中的 msg 数据是：' + this.msg)
+            在这个时候,重新渲染好的模板已经跟界面同步了
+        },
+        beforeDestroy(){ // 遇到第五个周期函数
+            在这个时候,实例已经准备进入销毁状态了,但是这个时候实例中的所有东西都还可以使用
+        },
+        destriyed(){ // 遇到第六个周期函数
+            在这个时候,实例已经被销毁了,实例中的东西已经不能使用了,这就是一个实例的生命周期
+        }
+
+    })
+</script>
+```
+
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.28.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.28.md"
new file mode 100644
index 0000000..e3f1704
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.5.28.md"
@@ -0,0 +1,46 @@
+# 2021.5.28 
+
+
+
+## computed 计算机属性
+
+computed属性与methods属性其实差不多,区别就在于computed属性有缓存而methods没有缓存,而且computed属性不是响应式的,而methods属性是响应式的
+
+```
+<div id="app">
+    姓名:{{ fullName() }}
+    <br>
+    当时的时间:{{ now }}
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            firstName:'黄',
+            lastName:'某某',
+        },
+        methods:{
+            fullName:function(){
+                return this.firstName + this.lastName
+            }   
+        },
+        computed:{
+            now:function(){
+                return Date.now()
+            }
+        }
+    })
+</script>
+
+
+```
+输出:
+```
+姓名:黄某某
+当时的时间:'这里是当前时间'(时间戳)
+```
+
+### computed 与 methods 
+我们这时候改变一下值,app.firstName = '林',你会发现页面上的姓名改变了但是当前时间并没有变化,你应该会好奇,为什么姓名都改变了,可是为什么当前时间没有改变,不是我返回的是当前时间吗?这是因为computed方法并不是响应式的而methods方法是响应式的它会随着值得改变响应到页面上,而computed方法不是响应式的,所以并不会响应到页面上。但是你又好奇当前的时间不是一直在变吗,为什么它也没有变化。如果你刷新一下,你会发现当前时间它变化了,这又是为什么呢。那是因为computed方法存在着缓存机制,这个缓存会保存你页面当时响应时computed中的数据,不管你之后响应了多少次,如果computed方法中的值没有做出改变的话,它就会一直是当时响应时的数据,只有你改变了computed方法中的值它才会做出改变,这也是为什么刷新了页面它就会变的原因。这些就是computed与methods方法的区别,它们本质上其实是一样的,都是用于保存一些方法或函数,使用computed/methods取决去你需不需要缓存。
\ No newline at end of file
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.29-Vue\346\250\241\346\235\277\350\257\255\346\263\225\343\200\201\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.29-Vue\346\250\241\346\235\277\350\257\255\346\263\225\343\200\201\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md"
new file mode 100644
index 0000000..bf168f1
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.5.29-Vue\346\250\241\346\235\277\350\257\255\346\263\225\343\200\201\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md"
@@ -0,0 +1,116 @@
+# 2021.5.29
+
+
+## 模板语法
+
+1. 文本插值   “Mustache” 语法 (双大括号) 
+```
+<div id="app">
+    <h1>{{ msg }}</h1>
+</div>
+
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app = new Vue({
+        el: '#app',
+        data: {
+            msg:'某某某'
+        }
+    })
+</script>
+```
+2. 原始HTML  v-html
+使用 v-html 进行插入html,一般使用组件
+```
+<div id="app">
+    <p>{{ rawHtml }}</p>
+    <p v-html='rawHtml'></p>
+</div>
+
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app = new Vue({
+        el: '#app',
+        data: {
+            msg:'<h1>某某某</h1>'
+        }
+    })
+</script>
+
+
+输出:
+    某某某
+    <h1>某某某</h1>
+```
+3. 绑定参数与动态参数
+```
+ <div id="app">
+    <a :href="url" >这是一个带有参数的a链接</a>
+    
+    // 这里的[paramattribute]其实是用了数组的方式进行赋值,这种方式可以进行多属性的绑定来实现动态参数,paramattribute其实就行data中定义的属性
+    <a :[paramattribute]="url">这是一个带有动态参数的a链接</a>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app = new Vue({
+        el: '#app',
+        data: {
+            url: 'https://baidu.com',
+            paramattribute: '',
+            paramArr: ['href']
+        },
+        mounted(){
+                console.log(this.paramArr[0]);
+                console.log(this.$el);
+                return this.paramattribute = this.paramArr[0]
+        }
+    })
+</script>
+```
+
+## attribute property 区别
++ property是DOM中的属性,是JavaScript里的对象;
++ attribute是HTML标签上的特性,它的值只能够是字符串;
+
+其实property包含了attribute,如id、claass、title等标签属性就是attribute,在你设置这些属性的值得时候它会自动加入到dom中转换成对应的属性,所以说atrribute是property的子集。
+
+## 计算机属性
+
+计算机属性是依赖式响应进行缓存,就是说他不会随着页面的重新渲染而改变,它会一直渲染第一次页面的渲染时的值,知道当计算机属性中的值受到了改动,那么他才会出现响应从而重新渲染
+```
+<div id="app">
+    姓名:{{ fullName() }}
+    <br>
+    当时的时间:{{ now }}
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            firstName:'黄',
+            lastName:'某某',
+        },
+        methods:{
+            fullName:function(){
+                return this.firstName + this.lastName
+            }   
+        },
+        computed:{
+            now:function(){
+                return Date.now()
+            }
+        }
+    })
+</script>
+```
+1. computed 与 methods 的区别
+
+我们这时候改变一下值,app.firstName = '林',你会发现页面上的姓名改变了但是当前时间并没有变化,你应该会好奇,为什么姓名都改变了,可是为什么当前时间没有改变,不是我返回的是当前时间吗?这是因为computed方法并不是响应式的而methods方法是响应式的它会随着值得改变响应到页面上,而computed方法不是响应式的,所以并不会响应到页面上。但是你又好奇当前的时间不是一直在变吗,为什么它也没有变化。如果你刷新一下,你会发现当前时间它变化了,这又是为什么呢。那是因为computed方法存在着缓存机制,这个缓存会保存你页面当时响应时computed中的数据,不管你之后响应了多少次,如果computed方法中的值没有做出改变的话,它就会一直是当时响应时的数据,只有你改变了computed方法中的值它才会做出改变,这也是为什么刷新了页面它就会变的原因。这些就是computed与methods方法的区别,它们本质上其实是一样的,都是用于保存一些方法或函数,使用computed/methods取决去你需不需要缓存。
+
+2. computed属性 与 watch属性
+watch可以监听你想要的值,只要监听的这个值做出改变,那么就会执行这个属性并作出一些事情,但是computed属性原本就是你所需要的值做出改变那么他就会重新计算,所以计算机属性也满足这个特性,而且计算机属性还有缓存机制,更利于数据的渲染速度。
\ No newline at end of file
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.30.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.30.md"
new file mode 100644
index 0000000..3f96607
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.5.30.md"
@@ -0,0 +1,86 @@
+# 2021.5.30
+
+
+## 绑定class的几种方式
+
+1. 对象语法
+
+因为v-bind绑定数据的值是字符串的就好了,所以我们可以使用对象的设置来实现动态的切换class,如:
+```
+<div id="app">
+    <div :class="{ 'active': isActive }"></div>
+</div>
+
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            isActive:true
+        }
+    });
+</script>
+
+结果：
+    <div :class="active"></div>
+```
+判断class是否存在,根据值得真假来判断是否需要这个class
+```
+:class="{class名：变量名}"
+
+data{
+变量名：false/true
+
+}
+```
+
+2. 数组语法
+需要应用到多个class的时候可以使用,class之间用逗号隔开,如:
+```
+<div id="app">
+    <div :class="[activeCls,errorCls]"></div>
+</div>
+
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            activeCls:'active',
+            errorCls:'error'
+        }
+    });
+</script>
+
+结果：
+    <div :class="active error"></div>
+```
+
+## 绑定style的方式
+
+也是可以使用对象与数组两种方式,一般直接使用对象的方式
+
+```
+<div id="app">
+    <div :style="{ 'color':color,'fontSize':fontSize +'px'}"></div>
+</div>
+
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            color:'red',
+            fontSize:14
+        }
+    });
+</script>
+
+结果：
+    <div :style="{ color:red,fontSize:14px;}"></div>
+```
+绑定style样式跟写样式差不多:
+```
+:style="{css属性：变量名}"
+
+data{
+变量名：设置的样式值
+}
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.31.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.31.md"
new file mode 100644
index 0000000..4bed9f2
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.5.31.md"
@@ -0,0 +1,181 @@
+# 2021.5.31
+
+## 内置指令
+
++ v-cloak
+
+渲染页面时你会看到 Mustache语法一闪而过,那是因为数据在初始化,如果你不想看到这个Mustache语法的话,这时候你就可以使用v-cloak指令解决这个问题,它需要配合css样式来使用。
+
+v-cloak:
+```
+<p v-cloak>这里有一段文本</p>
+```
+css:
+```
+[v-cloak]{
+    display:once;
+}
+```
+你设置完指令后,你在重新刷新下页面,你会发现页面并不会出现Mustache语法了,而是一闪而过渲染好的页面。这就是使用v-cloak解决初始化慢的问题。
+
++ v-once
+
+它只会渲染一次页面但会渲染父节点下的所有子节点(元素/组件),并且在之后你改变值后它并不会重新响应页面,你可以把它当做一次性使用。
+```
+<div id="app">
+    <span v-once>{{ message }}</span>
+    <div v-once>
+        <span>{{ message }}</span>
+    </div>
+</div>
+
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            message:'这里有一段文本'
+        }
+    })
+</script>
+```
+你打开页面后,你在把message的值改变你会发现它并不会出现响应式的反应,这就是v-once指令的效果。
+
++ v-if v-show
+
+这两个指令的功能其实效果差不多,都是在条件为真的时候显示,条件为假时隐藏,只不过v-if才是真正的条件渲染指令,因为v-if只有在条件为真的时候它才会渲染页面,而v-show是不管条件是否真假它都已经渲染好了dom只不过它在条件为假的时候隐藏了起来,但是dom还在,而v-if在条件为假时它并不会渲染dom并且不会存在,直接就没有这个dom。
+
+v-if:
+```
+<p v-if="true/false">这里有一段文本</p>
+```
+v-show:
+```
+<p v-show="true/false">这里有一段文本</p>
+```
+
+template标签
+
+tmeplate是一个vue.js内置的的标签,当你想使用一些条件渲染或列表渲染时,你可以使用它,它并不会出现在渲染好的页面上,而只会渲染标签内的所有元素。
+```
+<template v-if="true/false">
+    <p>这里有一段文本</p>
+    <p>这里有一段文本</p>
+    <p>这里有一段文本</p>
+</template>
+```
+
+key属性
+
+key属性也是vue.js内置的属性,使用它可以让你决定一个标签是否被复用,并且key的值必须是唯一的。
+
+无key属性时:
+```
+<div id="app">
+    <template v-if="isOk">
+        <label>用户名:</label>
+        <input placeholder="输入用户名">
+    </template>
+    <template v-else>
+        <label>邮箱:</label>
+        <input placeholder="输入邮箱">
+    </template>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            isOk:true
+        }
+    })
+</script>
+```
+打开页面,但你把isOk的值改为false时,你会发现你在text文本中输入的值,并没有清空,而lable的值已经从用户名变成了邮箱,那是因为标签被复用了,因为vue在渲染元素时,出于效率的考虑,会尽可能地复用已有的元素,并不会重新渲染。
+
+有key属性时:
+```
+<div id="app">
+    <template v-if="isOk">
+        <label>用户名:</label>
+        <input placeholder="输入用户名" key:"name-input">
+    </template>
+    <template v-else>
+        <label>邮箱:</label>
+        <input placeholder="输入邮箱" key:"email-input">
+    </template>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            isOk:true
+        }
+    })
+</script>
+```
+当你添加key后在去改变isOk的值,你会发现标签并不会被复用了,text中的值被情空了。lable还是被复用是因为没有设置key。key就像是标签内的id一样。
+
++ v-for
+
+v-for可以循环数组或对象。当你需要重复做一件事情并且做很多的时候,你就会想到用for循环来重复做同一件事,vue.js中也提供了一个指令 v-for,当你想要渲染许多相同的标签的时候你就可以用到这个指令来循环他们进行渲染提高效率。
+
+```
+<div id="app">
+<ul>
+    <template v-for="book of books">
+        <li>书名:{{ book.name }} -- 作者:{{book.author}}</li>
+    </template>
+</ul>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+let app = new Vue({
+    el:'#app',
+    data:{
+        books:[
+            {
+                name:'Vue.js实战',
+                author:'梁灏'
+            },
+            {
+                name:'JavaScript语言精粹',
+                author:'Douglas Crockford'
+            },
+            {
+                name:'JavaScript高级程序设计',
+                author:'Nicholas C.Zakas'
+            }
+        ]
+    }
+})
+</script>
+```
+当你使用v-for循环对象的时候可以有三个参数:1.值 2.键名 2.索引。这个顺序是根据他们的重要来排的。
+当你循环组数的时候就只有两个参数了,因为数组只有值与索引,所以在循环数组的时候只有两个参数选择:1.值 2.索引
+```
+<div id="app">
+    <ul>
+        <template v-for="(vlues,key,index) of student">
+            <li>{{ index }} -- {{ key }} : {{ vlues }} </li>
+        </template>
+    </ul>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app = new Vue({
+        el:'#app',
+        data:{
+            student:{
+                name:'某某某',
+                sex:'男',
+                age:'18'
+            }
+        }
+    })
+</script>
+```
diff --git "a/\351\273\204\345\255\230\346\235\260/shopping.html" "b/\351\273\204\345\255\230\346\235\260/shopping.html"
new file mode 100644
index 0000000..1610330
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/shopping.html"
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>购物车列表</title>
+    <style>
+        table{
+            border: 1px solid #e9e9e9;
+            border-collapse: collapse;
+            border-spacing: 0;
+            empty-cells: show;
+        }
+        th,td{
+            padding: 8px 19px;
+            border: 1px solid #e9e9e9;
+            text-align: left;
+        }
+    
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <template v-if="list.length"></template>
+        <table>
+            <tr>
+                <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+                <td>商品名称</td>
+                <td>商品单价</td>
+                <td>购买数量</td>
+                <td>操&nbsp;&nbsp;作</td>
+            </tr>
+
+            <tr v-for="(item,index) in list">
+                <td>&nbsp {{ index + 1 }}&nbsp</td>
+                <td>{{ item.name }}</td>
+                <td>{{ item.price }}</td>
+                <td>
+                    <button :disabled='item.count===0' @click=handleReduce(index)>-</button>
+                    {{ item.count }}
+                    <button  @click=handleAdd(index)>+</button>
+                </td>
+                <td><button @click=handleRemove(index)>移除</button></td>
+                <td><input type="checkbox" @click=handleClick(index) id={{index}}>选中</td>
+            </tr>
+        </table>
+        <div> <input type="checkbox">全选</div>
+        <div>总价: {{totalPrice}} </div>
+        <template v-else>购物车为空</template>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data: {
+                list: [
+                    {
+                        id: 1,
+                        name: 'iPhone 7',
+                        price: 6188,
+                        count: 1
+                    },
+                    {
+                        id: 2,
+                        name: 'iPad Pro',
+                        price: 5888,
+                        count: 1
+                    },
+                    {
+                        id: 3,
+                        name: 'MacBook Pro',
+                        price: '21488',
+                        count: 1
+                    }
+                ]
+            },
+            methods: {
+                handleReduce: function (index) {
+                    if (this.list[index].count === 0) {
+                        this.list[index].count = 0
+                    } else {
+                        this.list[index].count--;
+                    }
+                },
+                handleAdd: function (index) {
+                    this.list[index].count++;
+                },
+                handleRemove:function(index){
+                    this.list.splice(index,1)
+                },
+                handleClick:function(index){
+                    let xz = document.getElementById('index');
+                    console.log(xz);
+                    if(xz.checked===true){
+                        totalPrice=this.list[index].price
+                    }else{
+                        
+                    }
+                    
+                }
+            },
+            computed: {
+                totalPrice: function () {
+                    let total = 0;
+                    for (let i = 0; i < this.list.length; i++) {
+                        let item = this.list[i];
+                        total += item.price * item.count;
+                    }
+                    return total
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\345\255\230\346\235\260/vue.html" "b/\351\273\204\345\255\230\346\235\260/vue.html"
new file mode 100644
index 0000000..5a552cd
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/vue.html"
@@ -0,0 +1,59 @@
+<!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">
+        <ul>
+            <template v-for="book of books">
+                <li>书名:{{ book.name }} -- 作者:{{book.author}}</li>
+            </template>
+        </ul>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app = new Vue({
+            el:'#app',
+            data:{
+                books:[
+                    {
+                        name:'Vue.js实战',
+                        author:'梁灏'
+                    },
+                    {
+                        name:'JavaScript语言精粹',
+                        author:'Douglas Crockford'
+                    },
+                    {
+                        name:'JavaScript高级程序设计',
+                        author:'Nicholas C.Zakas'
+                    }
+                ],
+                student:{
+                    name:'某某某',
+                    sex:'男',
+                    age:'18'
+                }
+            }
+        })
+
+        app.books.push({
+            name:'css揭秘',
+            author:'[希] Lea Verou'
+        })
+        // Vue.set(app.books,3,{
+        //     name:'css揭秘',
+        //     author:'[希] Lea Verou'
+        // })
+        // app.books.splice(3,1,{
+        //     name:'css揭秘',
+        //     author:'[希] Lea Verou'
+        // })
+        // app.books.splice(1);
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee