diff --git "a/\346\236\227\345\215\216\351\223\255/Shopping.html" "b/\346\236\227\345\215\216\351\223\255/Shopping.html"
new file mode 100644
index 0000000000000000000000000000000000000000..98c1ec57660dc069ddd207f851d142a031a81c80
--- /dev/null
+++ "b/\346\236\227\345\215\216\351\223\255/Shopping.html"
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>购物车</title>
+    <link rel="stylesheet" href="css/text.css" type="text/css">
+</head>
+<body>
+    <div id="app" v-cloak>
+        <template v-if="list.length">
+            <table>
+                <thead>
+                    <tr>
+                        <th>
+                            <input id="checkAll" type="checkbox" class="checkAll" @click="checkAllOrNot($event)">
+                        </th>
+                        <th>
+                            商品名称
+                        </th>
+                        <th>
+                            商品单价
+                        </th>
+                        <th>
+                            商品数量
+                        </th>
+                        <th>
+                            操作
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(item,index) in list">
+                        <td>
+                            <input type="checkbox" class="checkItem" @click="checkItem($event,index)">
+                        </td>                       
+                        <td>
+                            {{index+1}}                            
+                        </td>
+                        <td>
+                            {{item.name}}                            
+                        </td>
+                        <td>
+                            {{item.price}}                            
+                        </td>
+                        <td>
+                            <button
+                                @click="handleReduce(index)"
+                                :disabled="item.count === 1">-</button>
+                            {{item.count}}
+                            <button @click="handleAdd(index)">+</button>
+                        </td>
+                        <td>
+                            <button @click="handleRemove(index)">移除</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div>
+                总价:￥{{totalPrice}}
+            </div>
+        </template>
+        <div v-else>
+            很干净的购物车吼吼！
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="index.js">
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\215\216\351\223\255/css/style.css" "b/\346\236\227\345\215\216\351\223\255/css/style.css"
new file mode 100644
index 0000000000000000000000000000000000000000..dbb329abb09f2961bc231419b8bf107d404252dc
--- /dev/null
+++ "b/\346\236\227\345\215\216\351\223\255/css/style.css"
@@ -0,0 +1,28 @@
+[v-cloak] {
+    display: none; 
+   }
+     
+   #app {
+    width: 500px;
+    margin: 0 auto;
+   }
+     
+   table {
+    width: 100%;
+    border: 1px solid #444;
+    border-collapse: collapse;
+   }
+     
+   th, td {
+    padding: 8px 16px;
+    border: 1px solid #444;
+    text-align: left;
+   }
+     
+   th {
+    background: #89abd3;
+    color: rgb(214, 224, 235);
+    font-weight: 600;
+    white-space: nowrap;
+   }
+   
\ No newline at end of file
diff --git "a/\346\236\227\345\215\216\351\223\255/index.js" "b/\346\236\227\345\215\216\351\223\255/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..ea23209057980d626b46b54aceaeb4d4df7a2093
--- /dev/null
+++ "b/\346\236\227\345\215\216\351\223\255/index.js"
@@ -0,0 +1,110 @@
+var app = new Vue({
+    el:'#app',
+    data:{
+        list:[
+            {
+                id:1,
+                name:'谢汶霖',
+                price:'20',
+                count:1
+            },
+            {
+                id:2,
+                name:'谢学长',
+                price:'50',
+                count:1
+            },
+            {
+                id:3,
+                name:'谢学姐',
+                price:'20000',
+                count:1
+            },
+        ],
+        List:[]
+    },
+    //默认全选
+    mounted: function () {
+        this.checkAll();
+        this.checkAllElement(document.querySelector(".checkAll"));
+    },
+    computed:{
+        totalPrice:function(){
+            var total = 0 ;
+            for(var i = 0 ; i <this.List.length;i++){
+                var item = this.List[i];
+                total += item.price*item.count;
+            }
+            return total.toLocaleString();
+        }
+    },
+    methods:{
+        //减少购买数量
+        handleReduce:function(index){
+            if(this.list[index].count === 1 )return;
+            this.list[index].count--;
+        },
+        //增加购买数量
+        handleAdd:function(index){
+            this.list[index].count++;
+        },
+        //移除商品
+        handleRemove:function(index){
+            console.log("handleRemove-index:"+index);
+            this.list.splice(index,1);
+            var id = index +1;
+            var $List = this.List;
+            for (var i = 0; i < $List.length; i++) {
+                var item = $List[i];
+                if (item.id == id) {
+                $List.splice(i, 1);
+                }
+            }
+        },
+        //全选框
+        checkAllOrNot: function (event) {
+            if (event.target.checked) {
+            this.checkAll();
+            console.log("checkList：" + this.checkList);
+            } else {
+            console.log("全不选");
+            this.checkInItems('noCheckAll');
+            //清空
+            this.List.splice(0);
+            }
+        },
+        checkAll: function () {
+            console.log("全选");
+            this.checkInItems('checkAll');
+            this.List = this.list.concat();//复制商品列表
+        },
+        checkInItems: function (type) {
+            var items = document.querySelectorAll('.checkItem');
+            for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+            if (type === 'checkAll') {
+            item.checked = true;
+            } else {
+            item.checked = false;
+            }}
+        },
+        checkItem: function (event, index) {
+            console.log("checkItem");
+            var element = event.target;
+            var $allCheck = document.querySelector(".checkAll");
+            if (element.checked) {//勾选，加入已选择列表
+            this.List.push(this.list[index]);
+            this.checkAllElement($allCheck);
+            } else {//不勾选，从已选择列表中去除
+            this.List.splice(index, 1);
+            $allCheck.checked = false;
+            }
+        },
+        checkAllElement: function (element) {
+            //如果所有的商品都已被勾选，则勾选全选框
+            if (this.List.length == this.list.length) {
+            element.checked = true;
+            }
+        }
+    }
+});
\ No newline at end of file
diff --git "a/\346\236\227\345\215\216\351\223\255/vue/css/text.css" "b/\346\236\227\345\215\216\351\223\255/vue/css/text.css"
new file mode 100644
index 0000000000000000000000000000000000000000..4b05398ae9e278ec939acac6ae74ca8149a53bc6
--- /dev/null
+++ "b/\346\236\227\345\215\216\351\223\255/vue/css/text.css"
@@ -0,0 +1,26 @@
+.bcolor{
+    height: 600px;
+    width: 800px;
+    background-image: url('../imgs/QQ图片20200618173539.gif');    
+    background-color: aquamarine;
+    font-size:large;
+    font-family: sans-serif;
+    background-repeat: no-repeat; 
+    background-size: 100% 100%;
+}
+/* .Active{
+    height: 100px;
+    width: 100px;
+    background-color: cornflowerblue;
+
+} */
+/* .act{
+    height: 500px;
+    width: 500px;
+    background-image: url('../imgs/QQ图片20200618173539.gif');    
+    background-color: aquamarine;
+} */
+.forecolor{
+    color: deeppink;
+}
+
diff --git "a/\346\236\227\345\215\216\351\223\255/vue/imgs/QQ\345\233\276\347\211\20720200618173120.png" "b/\346\236\227\345\215\216\351\223\255/vue/imgs/QQ\345\233\276\347\211\20720200618173120.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7cc23006747a0270b79433ec90bbbe415dc06315
Binary files /dev/null and "b/\346\236\227\345\215\216\351\223\255/vue/imgs/QQ\345\233\276\347\211\20720200618173120.png" differ
diff --git "a/\346\236\227\345\215\216\351\223\255/vue/imgs/QQ\345\233\276\347\211\20720200618173539.gif" "b/\346\236\227\345\215\216\351\223\255/vue/imgs/QQ\345\233\276\347\211\20720200618173539.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..f4521e7511484e9b85f55bf029af2e0222e35810
Binary files /dev/null and "b/\346\236\227\345\215\216\351\223\255/vue/imgs/QQ\345\233\276\347\211\20720200618173539.gif" differ
diff --git "a/\346\236\227\345\215\216\351\223\255/vue/index.html" "b/\346\236\227\345\215\216\351\223\255/vue/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..85bcd0a85df9ec388a1d5ee5403499ae56a07f59
--- /dev/null
+++ "b/\346\236\227\345\215\216\351\223\255/vue/index.html"
@@ -0,0 +1,73 @@
+<!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>
+            <!-- <li v-for="s in students">
+                {{s.name}}
+            </li> -->
+            <!-- <div v-if="cess">
+                你看得到    
+            </div> -->
+            <div id = "app">
+                {{otherMsg()}}
+            </div>
+            <div v-html = "ht">
+                
+            </div>
+                <img :src="imgSrc" alt="" height="400px" width="600px" ><br>
+                <a :href="url">刷新</a><br>
+                <button @click="handleClick">不要按</button>
+        </ul>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        var app = new Vue({
+            el:'#app',
+            data:{
+                msg:"谢汶霖",
+                ht:"<h1>就是个憨憨</h1>",
+                imgSrc:"./imgs/QQ图片20200618173539.gif",
+                url:"./index.html"
+            },
+            computed:{
+                newMsg:function(){
+                    return this.msg+"茂名白给大狙"
+                }
+            },
+            filters:{
+                formatString:function(val){
+                    return val + "， wdnmd"
+                }
+            },
+            methods:{
+                handleClick:function(){
+                    console.log("臭傻逼点啥");
+                },
+                otherMsg:function(){
+                    return this.msg+"233333"
+                }
+            },
+            mounted:function(){
+                console.log('他来了他来了'+new Date().toDateString)
+            }
+            // data:{
+            //     students:[
+            //         {name:'123'},
+            //         {name:'abc'},
+            //         {name:'谢汶霖'},
+            //         {name:'林华铭'},
+            //         {name:'铭敏明'},
+            //     ],
+            //     message:'这个页面创建于'+new Date().toLocaleString(),
+            //     cess:true
+            // }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\215\216\351\223\255/vue/index2.html" "b/\346\236\227\345\215\216\351\223\255/vue/index2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..74fa4f073496681a4e657282e2737f092cf14c46
--- /dev/null
+++ "b/\346\236\227\345\215\216\351\223\255/vue/index2.html"
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/text.css" type="text/css">
+</head>
+<body>
+    <div id="app">
+        <!-- 列表渲染指令 -->
+        <ul>
+            <!-- of用于遍历 -->
+            <li v-for="(f,index2) of friutSort">
+                {{index2+1}}-{{f.name}}-{{f.price}}
+            </li>
+        </ul>
+        <ul>
+            <li v-for="(u,key,index2) in user">
+                {{index2}}-{{key}}-{{u}}
+            </li>
+        </ul>
+        <p v-if="age===18">111111</p>
+        <p v-else-if="58">22222</p>
+        <p v-else>3333333</p>
+        <template v-if="age===18">aaa</template>
+        <template v-else-if="58">bbb</template>
+        <template v-else>ccc</template>
+        <div :class="{'bcolor':hasColor , 'forecolor':hasNum}">
+            <h1>abc</h1>
+        </div>
+        <div :class="[bgcolorCls,colorCls]">
+            <h1>cba</h1>
+        </div>
+        <div :class="clsProp">
+            <h1>321</h1>
+        </div>
+        <div class="color num">
+            <h1>屑屑屑</h1>
+            <h1>汶霖</h1>
+            <a :href="url">刷新</a>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        var app = new Vue({
+            el:'#app',
+            data:{
+                msg:"谢汶霖",
+                ht:"<h1>就是个憨憨</h1>",
+                imgSrc:"./imgs/QQ图片20200618173539.gif",
+                url:"./index2.html", 
+                hasColor:true,
+                hasNum:false,
+                colorCls:'forecolor',
+                age:18,
+                friuts:[
+                    {name:'苹果',price:5},
+                    {name:'香蕉',price:10},
+                    {name:'西瓜',price:15},
+                    {name:'哈密瓜',price:20},
+                ],
+                user:{
+                username:'admin2000',
+                password:'123456',
+                telphone:'5616416161'
+                }
+            },
+            computed:{
+                newMsg:function(){
+                    return this.msg+"茂名白给大狙"
+                },
+                bgcolorCls:function(){
+                    return this.hasColor?'bcolor':''
+                },
+                clsProp:function(){
+                    return{
+                        bcolor:this.hasColor,
+                        forecolor:this.hasNum
+                    }
+                },
+                friutSort:function(){
+                return this.friuts.sort(function(a,b){
+                    return a.price-b.price
+                })
+            }
+            },
+            filters:{
+                formatString:function(val){
+                    return val + "， wdnmd"
+                }
+            },
+            methods:{
+                handleClick:function(){
+                    console.log("臭傻逼点啥");
+                },
+                otherMsg:function(){
+                    return this.msg+"233333"
+                }
+            },
+            mounted:function(){
+                console.log('他来了他来了'+new Date().toDateString)
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\215\216\351\223\255/vue/\346\225\260\347\273\204\346\233\264\346\226\260.html" "b/\346\236\227\345\215\216\351\223\255/vue/\346\225\260\347\273\204\346\233\264\346\226\260.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c8ca1f1ad5842e8d00df373a4527e1802f3fb5a2
--- /dev/null
+++ "b/\346\236\227\345\215\216\351\223\255/vue/\346\225\260\347\273\204\346\233\264\346\226\260.html"
@@ -0,0 +1,45 @@
+<!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 in books">
+                <li>
+                    书名：{{book.name}}
+                </li>
+                <li>
+                    作者：{{book.author}}
+                </li>
+            </template>
+        </ul>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        var app = new Vue({
+            el:'#app',
+            data:{
+                books:[{
+                    name:'《Vue.js实战》',
+                    author:'梁灏'
+                },
+                {
+                    name:'《Java》',
+                    author:'Douglas Crockford'
+                }, 
+                {
+                    name:'《Java》',
+                    author:'Nicholas C.Zakas'
+                }
+                ]
+            }
+        });
+        app.books = app.books.filter(function(item){
+            return item.name.match(/Java/);
+        })
+    </script>
+</body>
diff --git "a/\346\236\227\345\215\216\351\223\255/vue/\350\277\207\346\273\244\344\270\216\346\216\222\345\272\217.html" "b/\346\236\227\345\215\216\351\223\255/vue/\350\277\207\346\273\244\344\270\216\346\216\222\345\272\217.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8789cc6b2a878ce17b334968dea8d49ef59bb9f5
--- /dev/null
+++ "b/\346\236\227\345\215\216\351\223\255/vue/\350\277\207\346\273\244\344\270\216\346\216\222\345\272\217.html"
@@ -0,0 +1,50 @@
+<!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 in lhmbooks">
+                <li>
+                    书名：{{book.name}}
+                </li>
+                <li>
+                    作者：{{book.author}}
+                </li>
+            </template>
+        </ul>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        var app = new Vue({
+            el:'#app',
+            data:{
+                books:[{
+                    name:'《Vue.js实战》',
+                    author:'梁灏'
+                },
+                {
+                    name:'《Java》',
+                    author:'Douglas Crockford'
+                }, 
+                {
+                    name:'《Java》',
+                    author:'Nicholas C.Zakas'
+                }
+                ]
+            },
+            computed:{
+                lhmbooks:function(){
+                    return this.books.sort(function(a,b){
+                        return a.name.length <b.name.length;
+                    });
+                }
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
