Accueil Explorer Aide
Connexion
lovecoding
/
web0331
10
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

移动端

bailing il y a 1 jour
Parent
4d32ced988
commit
6f757a05f3
5 fichiers modifiés avec 343 ajouts et 0 suppressions
Vue séparée Afficher les stats Diff
  1. 68 0
      8.vue/初阶/12.列表过滤.html
  2. 74 0
      8.vue/初阶/13.列表过滤.html
  3. 79 0
      8.vue/初阶/14.列表排序.html
  4. 84 0
      8.vue/初阶/15.数据监听.html
  5. 38 0
      8.vue/初阶/16.$nextTick.html

+ 68 - 0
8.vue/初阶/12.列表过滤.html
Voir le fichier 

@@ -0,0 +1,68 @@
 
+<!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">
 
+        关键字搜索：<input type="text" placeholder="请输入关键字" v-model="keyWords">
 
+        <br>
 
+        <div v-for="(item,index) in list" :key="index">
 
+            {{index + 1}}.我叫{{item.name}}--今年{{item.age}}了--我是{{item.sex}}孩
 
+        </div>
 
+    </div>
 
+    <script src="./vue.js"> </script>
 
+    <script>
 
+        var vm = new Vue({
 
+            el: "#app",
 
+            data: {
 
+                keyWords:"",
 
+                arr: [
 
+                    {
 
+                        name: "Lucy",
 
+                        age: 11,
 
+                        sex: "女",
 
+                    },
 
+                    {
 
+                        name: "LiLi",
 
+                        age: 31,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "八戒",
 
+                        age: 21,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "八卦",
 
+                        age: 23,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "孙悟空",
 
+                        age: 27,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "唐僧",
 
+                        age: 33,
 
+                        sex: "女",
 
+                    },
 
+                ],
 
+            },
 
+            computed:{
 
+                list(){
 
+                    return this.arr.filter((item) =>{
 
+                        return item.sex.indexOf(this.keyWords) !== -1;
 
+                    })
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 74 - 0
8.vue/初阶/13.列表过滤.html
Voir le fichier 

@@ -0,0 +1,74 @@
 
+<!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">
 
+        关键字搜索：<input type="text" placeholder="请输入关键字" v-model="keyWords">
 
+        <br>
 
+        <div v-for="(item,index) in list" :key="index">
 
+            {{index + 1}}.我叫{{item.name}}--今年{{item.age}}了--我是{{item.sex}}孩
 
+        </div>
 
+    </div>
 
+    <script src="./vue.js"> </script>
 
+    <script>
 
+        var vm = new Vue({
 
+            el: "#app",
 
+            data: {
 
+                list:[],
 
+                keyWords:"",
 
+                arr: [
 
+                    {
 
+                        name: "Lucy",
 
+                        age: 11,
 
+                        sex: "女",
 
+                    },
 
+                    {
 
+                        name: "LiLi",
 
+                        age: 31,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "八戒",
 
+                        age: 21,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "八卦",
 
+                        age: 23,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "孙悟空",
 
+                        age: 27,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "唐僧",
 
+                        age: 33,
 
+                        sex: "女",
 
+                    },
 
+                ],
 
+            },
 
+            watch:{
 
+                keyWords:{
 
+                    deep: true,
 
+                    immediate: true,
 
+                    handler(val) {
 
+                        console.log(val)
 
+                        this.list = this.arr.filter((item) => {
 
+                            return item.name.indexOf(val) !== -1
 
+                        })
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 79 - 0
8.vue/初阶/14.列表排序.html
Voir le fichier 

@@ -0,0 +1,79 @@
 
+<!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">
 
+        关键字搜索：<input type="text" placeholder="请输入关键字" v-model="keyWords">
 
+        <br>
 
+        <div v-for="(item,index) in list" :key="index">
 
+            {{index + 1}}.我叫{{item.name}}--今年{{item.age}}了--我是{{item.sex}}孩
 
+        </div>
 
+        <button @click="sortType=1">升序</button>
 
+        <button @click="sortType=2">降序</button>
 
+        <button @click="sortType=0">默认</button>
 
+    </div>
 
+    <script src="./vue.js"> </script>
 
+    <script>
 
+        var vm = new Vue({
 
+            el: "#app",
 
+            data: {
 
+                sortType:0,
 
+                keyWords:"",
 
+                newlist:[],
 
+                arr: [
 
+                    {
 
+                        name: "Lucy",
 
+                        age: 11,
 
+                        sex: "女",
 
+                    },
 
+                    {
 
+                        name: "LiLi",
 
+                        age: 31,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "八戒",
 
+                        age: 21,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "八卦",
 
+                        age: 23,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "孙悟空",
 
+                        age: 27,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "唐僧",
 
+                        age: 33,
 
+                        sex: "女",
 
+                    },
 
+                ],
 
+            },
 
+            computed:{
 
+                list(){
 
+                    this.newlist = this.arr.filter((item) =>{
 
+                        return item.name.indexOf(this.keyWords) !== -1;
 
+                    })
 
+                    if(this.sortType) {
 
+                        this.newlist.sort((a,b) => {
 
+                            return this.sortType == 1 ? a.age - b.age : b.age - a.age;
 
+                        })
 
+                    }
 
+                    return this.newlist;
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 84 - 0
8.vue/初阶/15.数据监听.html
Voir le fichier 

@@ -0,0 +1,84 @@
 
+<!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">
 
+
 
+        <div v-for="(item,index) in arr" :key="index">
 
+            {{index + 1}}.我叫{{item.name}}--今年{{item.age}}了--我是{{item.sex}}孩
 
+        </div>
 
+        <button @click="changeDate">修改数据</button>
 
+    </div>
 
+    <script src="./vue.js"> </script>
 
+    <script>
 
+        var vm = new Vue({
 
+            el: "#app",
 
+            data:{
 
+                arr: [
 
+                    {
 
+                        name: "Lucy",
 
+                        age: 11,
 
+                        sex: "女",
 
+                    },
 
+                    {
 
+                        name: "LiLi",
 
+                        age: 31,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "八戒",
 
+                        age: 21,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "八卦",
 
+                        age: 23,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "孙悟空",
 
+                        age: 27,
 
+                        sex: "男",
 
+                    },
 
+                    {
 
+                        name: "唐僧",
 
+                        age: 33,
 
+                        sex: "女",
 
+                    },
 
+                ],
 
+            },
 
+            methods:{
 
+                changeDate() {
 
+                    // let obj = {
 
+                    //     name:'哪吒',
 
+                    //     age: 7,
 
+                    //     sex: "男"
 
+                    // }
 
+                    // this.arr[2] = obj;
 
+                    // 数据改变 视图未变
 
+                    // Vue.set(this.arr,2,{
 
+                    //     name:'哪吒',
 
+                    //     age: 7,
 
+                    //     sex: "男"
 
+                    // })
 
+                    this.$set(this.arr,2,{
 
+                        name:'哪吒',
 
+                        age: 7,
 
+                        sex: "男"
 
+                    })
 
+                    console.log(this.arr)
 
+                    // Vue.set(target,index/name,newObj)
 
+                    // this.$set(target,index/name,newObj)
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 38 - 0
8.vue/初阶/16.$nextTick.html
Voir le fichier 

@@ -0,0 +1,38 @@
 
+<!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">
 
+        <div id="main">{{flower}}</div>
 
+        <button @click="changeDate">修改数据</button>
 
+    </div>
 
+    <script src="./vue.js"> </script>
 
+    <script>
 
+        var vm = new Vue({
 
+            el: "#app",
 
+            data:{
 
+                flower:"丁香花"
 
+            },
 
+            methods:{
 
+                changeDate() {
 
+                    // 视图改变 数据未变
 
+                    // 修改渲染后数据未更新
 
+                   
+                    Vue.nextTick(()=>{ 
+                        this.flower = '莲花';
 
+                        console.log(document.getElementById("main").innerHTML,'1');
 
+                    })
 
+                    console.log(document.getElementById("main").innerHTML,'2');
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>