面试问题
如何依次发送promise请求?
Vue2
什么vue
vue是一款用于构建用户界面的渐进式js框架
vue可以自底向上逐层的应用
简单应用:秩序一个轻量小巧的核心库
复杂应用:可以引入各式各样的Vue插件
vue特点
1.组件化模块 提高代码复用率/让代码更好维护
2.声明式编码,让编码人员无需直接操作DOM,提高开发效率
3.虚拟DOM,diff算法
vue Api
Cookbook
Awesome Vue
官方整理的比较有用的包
初识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>初识Vue</title>
<script src="vue.js"></script>
</head>
<body>
<!--
初识vue
1.想让vue工作,必须创建一个vue实例,且要传入一个配置对象
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法
3.root容器里的代码被称为vue模板
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>
hello {{name}}
</h1>
<h1>
我的年龄是:{{age}}
</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
// 创建Vue实例
new Vue({
el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
data: { // data中用于存储数据,数据供el指定的容器去使用,值暂时写成一个对象
name: 'world1111',
age: '18',
}
})
</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 src="vue.js"></script>
</head>
<body>
<!--
初识vue
1.想让vue工作,必须创建一个vue实例,且要传入一个配置对象
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法
3.root容器里的代码被称为vue模板
4.vue实例和容器是一一对应的
5.真实开发中只有一个vue实例,并且会配合组件一起使用
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
注意区分:js表达式和hs代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
(1).a
(2).a+b
(3).demo(1)
(4).x===y?'a':'b'
2.js代码(语句)
(1).if(){}
(2).for(){}
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>
hello {{name.toUpperCase()}}
</h1>
<h1>
我的年龄是:{{age}}
</h1>
</div>
<div id="root">
<h1>
hello {{name.toUpperCase()}}
</h1>
<h1>
我的年龄是:{{age}}
</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
// 创建Vue实例
new Vue({
el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
data: { // data中用于存储数据,数据供el指定的容器去使用,值暂时写成一个对象
name: 'world1111',
age: '18',
}
})
new Vue({
el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
data: { // data中用于存储数据,数据供el指定的容器去使用,值暂时写成一个对象
name: 'world1111',
age: '18',
}
})
</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 src="../vue.js"></script>
</head>
<body>
<!--
vue模板语法有2大类
1.插值语法
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
2.指令语法
功能:用于解构标签(包括:标签属性,标签体内容,绑定事件...)
举例:v-bind:href='xxx'或简写为 :href='xxx',xxx同样要写js表达式
且可以直接读取到data中的所有属性
备注:vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好, {{name}} </h3>
<hr />
<h1>指令语法</h1>
<a v-bind:href="school.url">点击跳转 {{school.name}} </a>
<a :href="school.url">点击跳转</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
name: 'jack',
school: {
name: 'xx',
url: 'http://www.baidu.com',
}
}
})
</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 src="../vue.js"></script>
</head>
<body>
<!--
Vue中有两种数据绑定的方式
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data
备注
1 双向绑定一般都应用在表单类元素上(如:input,select这类拥有value值的)
2 v-model:value可以简写成v-model,因为v-model默认收集的就是value值
-->
<!-- 准备好一个容器 -->
<div id="root">
<!-- 普通写法 -->
单项数据绑定: <input type="text" v-bind:value='name'>
双项数据绑定: <input type="text" v-model:value='name'>
<!-- 简写 -->
单项数据绑定: <input type="text" :value='name'>
双项数据绑定: <input type="text" v-model='name'>
<!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上 -->
<!-- <h2 v-model:x='name'>你好啊</h2> -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
name: '123'
}
})
</script>
</body>
</html>
el和data的两种写法
<!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 src="../vue.js"></script>
</head>
<body>
<!--
data与el的2种写法
1.el有两种写法
(1)new Vue时候配置el属性
(2) 先创建Vue实例,随后在通过vm.$mount('#root')指定el的值
2.data有2种写法
a 对象式
b 函数式
如何选择:目前那种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
3.一个重要原则
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好, {{name}} </h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
// el的两种写法
// const v = new Vue({
// // el: '#root',//第一种写法
// data: {
// name: '城市'
// }
// })
// console.log(v);
// v.$mount('#root')//第二种写法 挂载
// data的两种写法
new Vue({
el: '#root',
// data的第一种写法:对象式
// data: {
// name: '是在'
// }
// 第二种写法 函数式
// data: function () {
data() { //简写
console.log('this', this) // 此处的this是vue实例对象
return {
name: 'sss'
}
}
})
</script>
</body>
</html>
Vue中的MVVM
<!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 src="../vue.js"></script>
</head>
<body>
<!--
MVVM模型
a M:模型(model):data中的数据
b V:视图(View):模板代码
c VM:视图模型(ViewModel):Vue实例
观察发现
a data中所有的属性,最后都出现在了vm身上
b vm身上所有的属性及Vue原型上所有属性,在Vue模型中都可以直接使用
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>学校名称: {{name}} </h1>
<h1>学校地址: {{address}} </h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
const vm = new Vue({
// el: '#root',
data: {
name: 'xxxxx',
address: 'xxxx'
}
})
vm.$mount('#root')
</script>
</body>
</html>
回顾Object.defineProperty方法
<!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>Document</title>
</head>
<body>
<script type="text/javascript">
let number = 18
let person = {
name: 'zs',
sex: 'man'
}
Object.defineProperty(person, 'age', {
// value: 18,
// enumerable: true, //控制属性是否可以枚举,默认值为false
// writable: true, //控制属性是否可以被删除,默认值为false
// configurable: true, //控制属性是否可以被删除,默认值是false
// 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
// get: function () {
get() {
console.log('触发了');
return number;
},
// 当有人修改person的age属性时,set函数(setter)就会被调用,且会受到修改的具体指
set(value) {
console.log('有人修改了age属性,且值时', value);
number = value;
}
})
console.log(Object.keys(person));
</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>Document</title>
</head>
<body>
<!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写) -->
<script type="text/javascript">
let obj1 = {
x: 100
}
let obj2 = {
y: 200
}
Object.defineProperty(obj2, 'x', {
get() {
return obj1.x
},
set(value) {
obj1.x = value
}
})
</script>
</body>
</html>
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 src="../vue.js"></script>
</head>
<body>
<!--
a Vue中的数据代理
通过Vm对象来代理data对象中属性的操作(读/写)
b Vue中数据代理的好处
更加方便的操作data中的数据
c 基本原理
通过Object.defineProperty()把data对象中所有属性添加到VM上
为每一个添加到Vm上的属性,都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>学校名称: {{name}} </h2>
<h2>学校地址: {{address}} </h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
let data = {
name: 'sgg',
address: 'hfkjy'
}
const vm = new Vue({
el: '#root',
data
})
// vm._data=options.data=data
</script>
</body>
</html>
力扣每日一题
a res为啥*10?为了去比x大一位
b ~~啥意思?~运算符的本质是取反,在js中是一个针对32位的操作。
~x会先把x转成32位的整数,如果x是number类型的数据,则直接进行转换,否则先转换成32位整数,如果转换失败,则x变成NaN,~NaN会变成-1.这里的转换不是单纯地使用parseInt进行转换,而是类似于js的隐式转换,比如true等于1,false等于0,例如~true会等于-2,这说明true被转换成了1而不是NaN.
~的本质运算为(假设是8位):1=》00000001那么~1=>11111110=-2.(-2的表示为100000010=》11111101+1=11111110),我们知道x和~x相加等于-1.因为相加后等于11111111(10000001=》11111110+1=11111111),也就是-1。
最后~的其中一个用处是~~doubleNumber等于整数,也就是说~~可以用于取整。~对浮点型进行了截断。用0|x也是可以的。
简单的说就是类似于!!这种的两次取反,不同的是这边是用来取整
c 在运行中判断是否符合条件,如果符合返回0
d x除10是让x每次都小一位
e Math.pow(底数,几次方)
var reverse = function(x) {
let res=0;
while(x){
res=res*10+x%10;
if(res>Math.pow(2,31)-1||res<Math.pow(-2,31))return 0;
x=~~(x/10)
}
return res;
};
a parseInt:取整,去首位0
b split:将数字分为字符串数组
c join:将字符串数组拼串
d 判断是否为负数 如果为负 取负
e 判断是否在范围内
/**
- @param {number} x
- @return {number}
*/
var reverse = function(x) {
let res=parseInt(x.toString().split(’’).reverse().join(’’));
if(x<0){
res=-res;
}
return res>Math.pow(2,31)-1||res<Math.pow(-2,31)?0:res;
};