前端模拟提升福利练习题
文章目录
vue
mvvm
View层：
视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层：
数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：
视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
1.创建简单vue
原生js的做法（编程范式：命令式编程）
1.创建div元素，设置id属性
2.定义一个变量message
3.将message放在div中显示
4.修改数据
5.将修改的数据再次替换到div中
vue做法（声明式编程）将数据交给vue管理
<div id="app">
{{ message }}
</div>
let app = new Vue({//let（变量）/const（常量）
el: '#app',//用于挂载要管理的数据
data: {//定义数据
message: 'Hello Vue!'
}
})
options(对象)中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
{}中包含了data属性：该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的，比如像上面这样。
也可能是来自网络，从服务器加载的。
【注】响应式：当数据发生改变，界面会自动发生改变
v-for
后面给数组追加元素(push())的时候, 新的元素也可以在界面中渲染出来
打开开发者模式的console
响应式：当我们数组中的数据发生改变时，界面会自动改变。
2.插值操作
mustache（双大括号）
是在内容里面写
mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式
<h2>{{firstName + lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
v-once
表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
v-html
按照HTML格式进行解析，并且显示对应的内容
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染
v-text
和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型，会覆盖原本的内容
v-pre
用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
v-cloak（斗篷）
在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
在vue解析之前, div中有一个属性v-cloak
在vue解析之后, div中没有一个属性v-cloak
3.绑定属性 v-bind
v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
<img v-bind:src="imgURL" alt="">
<!--语法糖的写法-->
<a :href="aHref">百度一下</a>
v-bind绑定class
对象语法(绑定方式)
对象语法的含义是:class后面跟的是一个对象。
对象语法有下面这些用法：
用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
数组语法(绑定方式)
数组语法的含义是:class后面跟的是一个数组。
数组语法有下面这些用法：
用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
v-bind绑定style
对象语法
:style="{color: currentColor, fontSize: fontSize + ‘px’}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性
<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
<!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
<!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->
<!--finalSize当成一个变量使用-->//下面data里面有声明
<!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型
多个值以，分割即可
4.计算属性
计算属性一般是没有set方法, 只读属性.
计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
computed: {
fullName: {
set: function(newValue) {
// console.log('-----', newValue);
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName
}
},
}
---------------------------------
//一般没有set属性
totalPrice:function(){
let total = 0;
for(let i in this.books){
total += this.books[i].price;
}
return total;
}
5.es5和es6
ES5中的var是没有块级作用域的(if/for)
ES6中的let是由块级作用的(if/for)
ES5之前因为if和for都没有块级作用域的概念, 所以在很多时候, 我们都必须借助于function的作用域来解决应用外面变量的问题.(闭包)
ES6中,加入了let, let它是有if和for的块级作用域.
1.注意一: 一旦给const修饰的标识符被赋值之后, 不能修改
const name = ‘why’;
name = ‘abc’;
2.注意二: 在使用const定义标识符,必须进行赋值
const name;
3.注意三: 常量的含义是指向的对象不能修改, 但是可以改变对象内部的属性.
ES6中，对对象字面量进行了很多增强。
属性初始化简写和方法的简写：
6.事件监听
监听用户发生的时间，比如点击、拖拽、键盘事件等等
v-on指令------------绑定事件监听器
v-on:click可以写成@click
v-on参数
当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
v-on修饰符
Vue提供了修饰符来帮助我们方便的处理一些事件：.
.stop - 调用 event.stopPropagation()。（阻止事件冒泡）
<button @click.stop="btnClick">按钮</button>
.prevent - 调用 event.preventDefault()。（阻止默认行为）
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。.
.once - 只触发一次回调。
7.条件判断----v-if、v-else-if、v-else
v-if的原理：
v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。
<h2 v-if="score>=90">优秀</h2>//当条件不满足执行下面的
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key 并且我们需要保证key的不同
v-show
v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
当需要在显示与隐藏之间切片很频繁时，使用v-show（dom之中没有删除）
当只有一次切换时，通过使用v-if
8.循环遍历
遍历数组
语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。
<!--1.在遍历的过程中,没有使用索引值(下标值)-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!--2.在遍历的过程中, 获取索引值-->
<ul>
<li v-for="(item, index) in names">
{{index+1}}.{{item}}
</li>
</ul>
遍历对象
<!--1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!--2.获取key和value 格式: (value, key) -->
<ul>
<li v-for="(value, key) in info">{{value}}-{{key}}</li>
</ul>
<!--3.获取key和value和index 格式: (value, key, index) -->
<ul>
<li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
检测数组更新（响应式）
因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
//1.push方法
this.letters.push('aaa')
this.letters.push('aaaa', 'bbbb', 'cccc')
// 2.pop(): 删除数组中的最后一个元素
this.letters.pop();
// 3.shift(): 删除数组中的第一个元素
this.letters.shift();
// 4.unshift(): 在数组最前面添加元素
this.letters.unshift()
this.letters.unshift('aaa', 'bbb', 'ccc')
// 5.splice作用: 删除元素/插入元素/替换元素
// 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
// 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
// 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
// splice(start)
// splice(start):
this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
// this.letters.splice(1, 0, 'x', 'y', 'z')
// 5.sort()排序
this.letters.sort()
// 6.reverse()反转
this.letters.reverse()
// 注意: 通过索引值修改数组中的元素
this.letters[0] = 'bbbbbb';
this.letters.splice(0, 1, 'bbbbbb')
// set(要修改的对象, 索引值, 修改后的值)
Vue.set(this.letters, 0, 'bbbbbb')
}
组件的key属性
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。
key的作用主要是为了高效的更新虚拟DOM。
9.表单绑定v-model
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
v-model其实是一个语法糖，它的背后本质上是包含两个操作：
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
也就是说下面的代码：等同于下面的代码：
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
v-model：radio
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>您选择的性别是: {{sex}}</h2>
v-model：checkbox
复选框分为两种情况：单个勾选框和多个勾选框
单个勾选框：
v-model即为布尔值。
此时input的value并不影响v-model的值。
多个复选框：
当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。
<div id="app">
<!-- 1.checkbox单选框-->
<!--<label for="agree">-->
<!--<input type="checkbox" id="agree" v-model="isAgree">同意协议-->
<!--</label>-->
<!--<h2>您选择的是: {{isAgree}}</h2>-->
<!--<button :disabled="!isAgree">下一步</button> -->
<!--2.checkbox多选框-->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的爱好是: {{hobbies}}</h2>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
--------------------------
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isAgree: false, // 单选框
hobbies: [], // 多选框,
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}
})
v-model：select
和checkbox一样，select也分单选和多选两种情况。
单选：只能选中一个值。
v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中
多选：可以选中多个值。
v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中
<div id="app">
<!--1.选择一个-->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruit}}</h2>
<!--2.选择多个-->
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruits}}</h2>
</div>
------------------------
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
fruit: '香蕉',
fruits: []
}
})
lazy修饰符：
默认情况下，v-model默认是在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新：
number修饰符：
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型：
trim修饰符：
如果输入的内容首尾有很多空格，通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格
<div id="app">
<!--1.修饰符: lazy-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!--2.修饰符: number-->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2>
<!--3.修饰符: trim-->
<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}</h2>
</div>
智一面|前端模拟提升福利练习题