[成都|内门弟子]JS-韦骁|2023年05月12日的日报-技能树.IT修真院

发表于： 2023-05-12 20:44:34

0 265

vue知识点：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>列表排序</title>
  <script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- 遍历数组 -->
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
      <li v-for="p in filPersons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
        <input type="text">
      </li>
    </ul>

  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: '#root',
      data: {
        keyWord:'',
        sortType:0,//0是原顺序，1降序，2升序
        persons: [
          { id: 001, name: '马冬梅', age: 29,sex:'女' },
          { id: 002, name: '周冬雨', age: 25,sex:'女' },
          { id: 003, name: '周杰伦', age: 18,sex:'男' },
          { id: 004, name: '温兆伦', age: 31,sex:'男' }
        ]
      },
      computed:{
        filPersons(){
            const arr =  this.persons.filter((p)=>{
                return p.name.indexOf(this.keyWord) !== -1
            })
            //判断一下是否需要排序
            if(this.sortType){
                arr.sort((p1,p2)=>{
                    return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
                })
            }
            return arr
        }
      }
    })


  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>更新时的一个问题</title>
  <script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>

<body>
  <div id="root">

    <h2>人员列表</h2>
    <button @click="updateMei">点击改变信息</button>
    <ul>
      <li v-for="p in persons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
      </li>
    </ul>

  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: '#root',
      data: {
        persons: [
          { id: 001, name: '马冬梅', age: 29,sex:'女' },
          { id: 002, name: '周冬雨', age: 25,sex:'女' },
          { id: 003, name: '周杰伦', age: 18,sex:'男' },
          { id: 004, name: '温兆伦', age: 31,sex:'男' }
        ]
      },
      methods: {
        updateMei(){
            // this.persons[0].name = '马老师' //奏效
            // this.persons[0].age = 58 //奏效
            // this.persons[0].sex = '男' //奏效
            // this.persons[0] = { id: 001, name: '马老师', age: 58,sex:'男' } //不奏效
            this.persons.splice(0,1,{ id: 001, name: '马老师', age: 58,sex:'男' })
        }
      },
    })


  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue检测数据改变的原理_对象</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
  </head>
  <body>
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
    <script>
      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}
              ]
            }
        },
      });
</script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模拟一个数据监测</title>
  </head>
  <body>
    <div id="root"></div>
    <script>

        let data = {
            name:'修真院',
            address:'成都'
        }

        //创建一个监视的实力对象 ，用于监视data中属性的变化
        const obs = new Observer(data)
        console.log(obs);

        //准备一个vm实例对象
        let vm = {}
        vm._data = data = obs

        function Observer(obj) {
            //汇总对象中所有的属性形成一个数组
            const keys = Object.keys(obj)
            //遍历
            keys.forEach((k)=>{
                //Object.defineProperty() 方法会直接在一个对象上定义一个新属性，
                //或者修改一个对象的现有属性，并返回此对象。
                Object.defineProperty(this,k,{
                    get(){
                        return obj[k]
                    },
                    set(val){
                        console.log(`${k}被改了，我要去解析模板，生成虚拟DOM....我要开始忙了`);
                        obj[k] = val
                    }
                })
            })
            
        }
</script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.set的使用</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
  </head>
  <body>
    <div id="root">
        <h1>学校信息</h1>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </hr>
        <h1>学生信息</h1>
        <button @click="addSex">添加性别</button>
        <h2>姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}} 对外：{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="f in student.friends" :key="index">
                {{f.name}} -- {{f.age}}
            </li>
        </ul>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
            name:'修真院',
            address:'成都',
            student:{
              name:'tom',
            //   sex:'男',
              age:{
                rAge:40,
                sAge:29,
              },
              friends:[
                {name:'jerry',age:35},
                {name:'tony',age:36},
              ]
            }
        },
        methods: {
            addSex(){
                Vue.set(this.student,'sex','男')
            }
        },
      });
</script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue监测数据改变的原理_数组</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
  </head>
  <body>
    <div id="root">
        <h1>学校信息</h1>
        <h2>学校名称：{{school.name}}</h2>
        <h2>学校地址：{{school.address}}</h2>
    </hr>
        <h1>学生信息</h1>
        <button @click="addSex">添加性别</button>
        <h2>姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}} 对外：{{student.age.sAge}}</h2>
        <h2>爱好</h2>
        <ul>
            <li v-for="h in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h2>朋友们</h2>
        <ul>
            <li v-for="f in student.friends" :key="index">
                {{f.name}} -- {{f.age}}
            </li>
        </ul>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
            school:{
                name:'修真院',
                address:'成都'
            },
            student:{
              name:'tom',
            //   sex:'男',
              age:{
                rAge:40,
                sAge:29,
              },
              hobby:['听音乐','打游戏'],
              friends:[
                {name:'jerry',age:35},
                {name:'tony',age:36},
              ]
            }
        },
        methods: {
            addSex(){
                Vue.set(this.student,'sex','男')
            }
        },
      });
</script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>总结Vue数据检测</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
  </head>
  <body>
    <div id="root">

<!-- 
        Vue监视数据的原理:
            1。vue会监视data中所有层次的数据
            2。如何监测对象中的数据?
        通过setter实现监视，且要在new Vue时就传入要监测的数据。
            (1).对象中后追加的属性，Vue默认不做响应式处理
            (2).如需给后添加的属性做响应式，请使用如下
            API:Vue.set(target，propertyName/index， value) 或
            vm.$set(target, propertyName/index，value)
        3。如何监测数组中的数据?通过包裹数组更新元素的方法实现，本质就是做了两件事:
            (1).调用原生对应的方法对数组进行更新。
            (2).重新解析模板，进而更新页面。
        4。在Vue修改数组中的某个元素一定要用如下方法:
            1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
            2.Vue.set() 或 vm.$set()

        特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！    
 -->


        <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="updateFrisFriendName">修改第一个朋友的名字为：张三</button><br/>
        <button @click="addHobby">添加一个爱好</button><br/>
        <button @click="updateHobby">修改第一个爱好为开车</button><br/>

        <h2>姓名：{{student.name}}</h2>
        <h2>年龄：{{student.age}}</h2>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>

        <h2>爱好</h2>
        <ul>
            <li v-for="h in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h2>朋友们</h2>
        <ul>
            <li v-for="f in student.friends" :key="index">
                {{f.name}} -- {{f.age}}
            </li>
        </ul>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
            student:{
              name:'tom',
            //   sex:'男',
              age:"18",
              hobby:['听音乐','打游戏'],
              friends:[
                {name:'jerry',age:35},
                {name:'tony',age:36},
              ]
            }
        },
        methods: {
            addSex(){
                Vue.set(this.student,'sex','男')
            },
            addFriend(){
                this.student.friends.unshift({name:'jack',age:50})
            },
            updateFrisFriendName(){
                this.student.friends[0].name = '张三'
                // this.student.friends[0].age = '40'  
            },
            addHobby(){
                this.student.hobby.push('唱歌')
            },
            updateHobby(){
                this.student.hobby.splice(0,1,'开车')
                // Vue.set(this.student.hobby,0,'开车')
            }
        },
      });
</script>
  </body>
</html>

返回列表

【任务2】 [成都|内门弟子]JS-韦骁 | 2023年05月12日 的日报

评论

分享到

【任务2】 [成都|内门弟子]JS-韦骁 | 2023年05月12日的日报