完成数据监测学习

2 years ago · e9bf42cc5f
parent 5db242ae0d
commit e9bf42cc5f
7 changed files with 298 additions and 1 deletions
--- a/12_列表筛选/10.总结Vue数据检测.html
+++ b/12_列表筛选/10.总结Vue数据检测.html
@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>总结Vue数据监测</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h1>学生信息</h1>
+    <button @click="student.age++">年龄+1</button><br/>
+    <button @click="addSex">添加性别属性，默认值-男</button><br/>
+    <button @click="student.sex='女'">修改性别</button><br/>
+    <button @click="addFriend">在列表首位添加一个朋友</button><br/>
+    <button @click="updateFriendName">修改第一个朋友的名字为：张三</button><br/>
+    <button @click="addHobby">添加一个爱好</button><br/>
+    <button @click="changeHobby">修改第一个爱好为：做模型</button><br/>
+    <button @click="filterHobby">过滤掉爱好中的抽烟</button><br/>
+    <h3>学生姓名：{{student.name}}</h3>
+    <h3>学生年龄：{{student.age}}</h3>
+    <h3 v-if="student.sex">学生性别：{{student.sex}}</h3>
+    <h3>爱好</h3>
+    <ul>
+        <li v-for="(h, index) in student.hobby" :key="index">{{h}}</li>
+    </ul>
+    <h3>朋友</h3>
+    <ul>
+        <li v-for="(f,index) in student.friends" :key="index">
+            {{f.name}} - {{f.age}}
+        </li>
+    </ul>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: '#root',
+        data: {
+           student: {
+                name: 'tom',
+                age: 18,
+                hobby: ['抽烟', '喝酒', '烫头'],
+                friends: [
+                    {name: 'jerry', age: 35},
+                    {name: 'tony', age: 28}
+                ]
+            }
+        },
+        methods: {
+            addSex() {
+                Vue.set(this.student, "sex", "男")
+            },
+            addFriend() {
+                this.student.friends.unshift({name: 'honey', age: 11})
+            },
+            updateFriendName() {
+                // this.student.friends[0].name = "张三"
+                this.student.friends.splice(0,1, {name: "张三", age: 33})
+            },
+            addHobby() {
+                this.student.hobby.push('吃火锅')
+            },
+            changeHobby() {
+                // this.student.hobby.splice(0,1,'做模型')
+                this.$set(this.student.hobby, 0, '做模型')
+            },
+            filterHobby() {
+                this.student.hobby = this.student.hobby.filter((h) => {
+                    return h !== "抽烟"
+                })
+            }
+        }
+    })
+
+</script>
+</html>
--- a/12_列表筛选/4.列表排序.html
+++ b/12_列表筛选/4.列表排序.html
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>列表过滤</title>
+    <title>列表排序</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
--- a/12_列表筛选/5.更新时的一个问题.html
+++ b/12_列表筛选/5.更新时的一个问题.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>更新时的一个问题</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <!--    遍历列表-->
+    <h2>人员列表</h2>
+    <button @click="updateMei">更新马冬梅信息</button>
+    <ul>
+        <li v-for="(data, index) in listData" :key="data.id">
+            {{data.name}} - {{data.age}} - {{data.sex}}
+        </li>
+    </ul>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+
+    // 使用computed实现
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            keyword: '',
+            sortType: 0,  // 0-原顺序 1-年龄降序 2-年龄升序
+            listData: [
+                {id: 1, name: '马冬梅', age: 25, sex: '女'},
+                {id: 2, name: '周冬雨', age: 19, sex: '女'},
+                {id: 3, name: '周杰伦', age: 20, sex: '男'},
+                {id: 4, name: '温兆伦', age: 17, sex: '男'}
+            ],
+        },
+        methods: {
+            updateMei() {
+                // this.listData[0].name = '马老师'
+                // this.listData[0].age = 55
+                // this.listData[0].sex = '男'
+                // this.listData[0] = {id: 1, name: '马老师', age: 55, sex: '男'}
+                this.listData.splice(0, 1, {id: 1, name: '马老师', age: 55, sex: '男'} )
+            }
+        }
+    })
+
+</script>
+</html>
--- a/12_列表筛选/6.Vue检测数据改变的原理.html
+++ b/12_列表筛选/6.Vue检测数据改变的原理.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Vue检测数据改变的原理</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+  <div id="root">
+    <h2>学校名称：{{name}}</h2>
+    <h2>学校地址：{{address}}</h2>
+  </div>
+</body>
+<script type="text/javascript">
+  Vue.config.productionTip = false
+  const vm = new Vue({
+    el: '#root',
+    data: {
+      name: '哈哈',
+      address: '北京',
+    }
+  })
+
+</script>
+</html>
--- a/12_列表筛选/7.模拟一个数据监测.html
+++ b/12_列表筛选/7.模拟一个数据监测.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>模拟一个数据监测</title>
+  <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+  <h2>学校名称：{{name}}</h2>
+  <h2>学校地址：{{address}}</h2>
+</div>
+</body>
+<script type="text/javascript">
+  Vue.config.productionTip = false
+  const vm = new Vue({
+    el: '#root',
+    data: {
+      name: '哈哈',
+      address: '北京',
+    }
+  })
+
+</script>
+</html>
--- a/12_列表筛选/8.Vue.set的使用.html
+++ b/12_列表筛选/8.Vue.set的使用.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Vue.set的使用</title>
+  <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+  <h2>学校名称：{{name}}</h2>
+  <h2>学校地址：{{address}}</h2>
+<!--  <h2>校长：{{leader}}</h2>-->
+  <hr/>
+  <button @click="addSex">添加性别</button>
+  <h2>学生姓名：{{student.name}}</h2>
+  <h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
+  <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
+<!--  Vue.set(vm._data.student, 'sex', '男')-->
+<!--  Vue.set(vm.student, 'sex', '男')-->
+<!--  vm.$set(vm._data.student, 'sex', '男')-->
+  <h2>朋友</h2>
+  <ul>
+    <li v-for="(f,index) in student.friends" :key="index">
+      <h2>{{f.name}} - {{f.age}}</h2>
+    </li>
+  </ul>
+</div>
+</body>
+<script type="text/javascript">
+  Vue.config.productionTip = false
+  const vm = new Vue({
+    el: '#root',
+    data: {
+      name: '哈哈',
+      address: '北京',
+      student: {
+        name: 'tom',
+        age: {
+          rAge: 40,
+          sAge: 29,
+        },
+        friends:[
+          {name: 'jerry', age: 35},
+          {name: 'tony', age: 28}
+        ]
+      }
+    },
+    methods: {
+      addSex() {
+        Vue.set(this.student, "sex", "男")
+        // vm.$set(this.student, 'sex', '男')
+      }
+    }
+  })
+
+</script>
+</html>
--- a/12_列表筛选/9.Vue监测数据改变原理_数组.html
+++ b/12_列表筛选/9.Vue监测数据改变原理_数组.html
@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Vue监测数据改变原理_数组</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h2>学校名称：{{name}}</h2>
+    <h2>学校地址：{{address}}</h2>
+    <!--  <h2>校长：{{leader}}</h2>-->
+    <hr/>
+    <button @click="addSex">添加性别</button>
+    <h2>学生姓名：{{student.name}}</h2>
+    <h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
+    <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
+    <!--  Vue.set(vm._data.student, 'sex', '男')-->
+    <!--  Vue.set(vm.student, 'sex', '男')-->
+    <!--  vm.$set(vm._data.student, 'sex', '男')-->
+    <h2>爱好</h2>
+    <ul>
+        <li v-for="(h, index) in student.hobby" :key="index">{{h}}</li>
+    </ul>
+    <h2>朋友</h2>
+    <ul>
+        <li v-for="(f,index) in student.friends" :key="index">
+            <h2>{{f.name}} - {{f.age}}</h2>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: '#root',
+        data: {
+            name: '哈哈',
+            address: '北京',
+            student: {
+                name: 'tom',
+                age: {
+                    rAge: 40,
+                    sAge: 29,
+                },
+                hobby: ['抽烟', '喝酒', '烫头'],
+                // push pop shift unshift splice sort reverse
+                // vm._data.student.hobby.push('学习')
+                // vm._data.student.hobby.shift('抽烟')
+                // vm._data.student.hobby.splice(0, 1, '打台球')
+                friends: [
+                    {name: 'jerry', age: 35},
+                    {name: 'tony', age: 28}
+                ]
+            }
+        },
+        methods: {
+            addSex() {
+                Vue.set(this.student, "sex", "男")
+                // vm.$set(this.student, 'sex', '男')
+            }
+        }
+    })
+
+</script>
+</html>