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>