vue基础复习（二）

最新推荐文章于 2025-02-28 16:09:37 发布

原创最新推荐文章于 2025-02-28 16:09:37 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章介绍了MVVM模式的核心——双向绑定，以及Model、View和ViewModel的作用。接着讨论了JavaScript中的定时器SetInterval和SetTimeout的区别，以及==和===的比较规则。还概述了JavaScript的数据类型，包括基本类型和引用类型。此外，提到了字符串方法如indexOf、substr和replace，并对比了foreach和map方法的不同。最后，文章讲解了侦听器和计算属性在Vue.js中的应用。

1.什么是mvvm模型

MVVM，就是Model-View-ViewModel模式。它实现了View的变动，自动反映在viewmodel，反之亦然。
对于双向绑定的理解，就是用户更新了View，Model的数据也自动更新了，这种情况就是双向绑定。细说点，就是单向绑定的基础上给可输入元素input、textarea等添加了change（input）事件，（change事件触发，view的状态就被更新了）来动态修改model.

注：数据的双向绑定是由 VM 提供的

Model：模型层，负责处理业务逻辑以及和服务器进行交互。
View：视图层，负责将数据模型转化为 UI 显示出来，可以简单的理解为 HTML 页面。
ViewModel：试图模型层，用来连接 Model 和 View ，是 Model 和 View 之间的桥梁。每当V层获取或者保存数据的时候，都要由VM层做中间的处理，从而交给M层（View-model: 比较抽象,为连接层,为引发数据驱动的一些事件和方法）。
注：1，在data中所有的属性最后都体现在vm中
2，vm上所有的属性以及vue上，在vue模板中都可以直接使用

总结：

MVVM 模式简化了界面和业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用了双向绑定技术，使得 Model 在变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

2.定时器：

Setinterval:时间间隔一到立刻执行！

Settimeout:时间间隔一到代码执行一次！

3.==与===的区别：

===：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false

==：称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；

4.

break：立即结束当前语句，并跳出语句，进行下个语句

Continue：停止当前语句，并从头开始执行该语句

Return：停止函数

5.JavaScript 目前包含八种数据类型，其中可以分成两大类。

基本数据类型（原始值）：

Number（数值，包含NaN）

String（字符串）

Boolean（布尔值）

Undefined（未定义/未初始化）

Null（空对象）

Symbol（独一无二的值，ES6 新增）

BigInt （大整数，能够表示超过 Number 类型大小限制的整数，ES 2020新增）

引用数据类型（引用值）：

Object（对象。Array/数组和 function/函数也属于对象的一种）

6.字符串方法

①　var str = "Hello world";                             
var result = str.indexOf('Hello');
console.log("结果："+result);//0

注意点：

indexOf()方法对大小写敏感

如果要检索的字符串值没有出现，则该方法返回 -1。

它的合法取值是 0 到 str.length - 1

②　var str = "Hello world"
var result = str.substr(1,4);
console.log("结果："+result);//ello

注意点：第一个参数是截取开始位置的索引，第二个参数是截取的长度

③　let str = "Hello";
let s = str.replace("l", "o");
console.log(s); //Heolo

注意点：第一个参数是要更换的参数，第二个参数是修改后的参数

④　let str = "Hello";
let s = str.split("e");
console.log(str); //Hello
console.log(s); //[ 'H', 'llo' ]

将字符串分隔成数组

toLowerCase()转化为小写
toUpperCae()转化为大写
JSON.stringify()是js对象转换为JSON字符串

JSON字符串转换为js对象JSON.parse()

7.foreach和map的方法区别：

前者会修改原来的值，但是没有返回值

后者得到的是一个新数组，是map方法修改数组后返回后的数组

8.侦听器与计算属性

watch:{

immediate:true,//默认值时false，初始值让handler调用！

//当ishot被修改时，就会调用handler

要侦听的对象:{

handler(newvalue,oldvalue){

console.log('修改后的数据',newvalue,oldvalue);

}

}

}

<div id="root">
      <h3>今天心情很{{info}}</h3>
      <!-- 第一种写法 -->
      <button @click="change">修改按钮</button>
      <!-- 第二种写法直接可以在这里写语法 -->
      <!-- <button @click="ishot=!ishot">修改按钮</button> -->
    </div>
    <script>
     const vm =   new Vue({
        el:'#root',
        data: {
        ishot:true,
        },
        computed:{
            info(){
                return this.ishot ? '开心':'不安'
            }
        },
        methods: {
            change(){
                this.ishot = !this.ishot
            }
        },
   
   
        //    监听属性
    // 当不确定要监听的的数据是哪一个，可以使用此方法！
        watch:{
            immediate:true,//默认值时false，初始值让handler调用！
            //当ishot被修改时，就会调用handler
            info:{
                handler(newvalue,oldvalue){
                    console.log('info被修改了',newvalue,oldvalue);
                }
            }
        }
        })
   
        //  当一开始就确定监听的对象，可以使用对象vm
        // vm.$watch('ishot',{
        //     immediate:true,//默认值时false，初始值让handler调用！
        //     //当ishot被修改时，就会调用handler
        //         handler(newvalue,oldvalue){
        //             console.log('ishot被修改了',newvalue,oldvalue);
        //         }
            
        // })
     
    </script>

<body>
<!--     
    计算属性：
1,定义：要用的属性不存在，要通过已有属性计算得来。
2,原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3,get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods?实现相比，内部有缓存机制（复用），效率更高，调试方便
5.备注：
1,计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依懒的数据发生 -->

    <div id="root">
 性: <input type="text" v-model="firstname" placeholder="请输入你的内容"><br/><br/>
 名：<input type="text" v-model="lastname" placeholder="请输入你的内容"><br/><br/>
 <!-- 此处需使用插值语法 -->
 全名:<h1>{{fullname}}</h1><br/><br/>
    </div>
    
</body>

<script>
   const vm =  new Vue({
        el:'#root',
        data:{
            firstname:'老',
            lastname:'铁'
        },
       computed:{
        // 完整写法
    //        fullname:{
    //        get(){
    //         // 当有人读取fullname的内容时，get函数就会被调用，其返回值就是fullname的值
    //         console.log('get已经被调用了');
    //         // 这里表明this指向的是vm
    //         console.log(this);
    //         return this.firstname +'-' +this.lastname
    //        },
    //     //    当fullname修改时，set函数就会被调用
    //        set(value){
    //         console.log('set',value);
    //         // 将姓与名转化为数组的形式修改fullname的值
    //         const arr = value.split('-');
    //         this.firstname =arr[0];
    //         this.lastname = arr[1];
    //        }
    //    }

    // 简写
    fullname(){
        console.log('该函数相当于get被调用');
        return this.firstname + '-' + this.lastname
    }
       }
        
    })
    </script>