方法和事件绑定
1、方法：
方法的写法： 在methods中写方法,供事件或者别的方法内部调用
<body>
<div id="show">
<div @click="fn2">{{msg}}</div>
</div>
<script>
let vm=new Vue({
el:"#show",
data:{
msg:"hello world",
},
methods: {
fn:function(){
console.log(666)
},
fn1:()=>{
console.log(777);
},
fn2(){
this.fn1()
}
},
})
</script>
</body>
点击hello world 打印777
2、事件绑定
- v-on：和 @ 都是绑定事件的指令
- 指令后面跟事件类型，值就是methods中的方法，可以加小括号也可以不加
3、事件修饰符：
<!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>
<script src='https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
</head>
<style>
.box1{
width: 200px;
height: 200px;
background-color: aqua;
}
.box2{
width: 100px;
height: 100px;
margin: 20px;
background-color: rgb(0, 255, 21);
}
.box3{
width: 50px;
height: 50px;
margin: 20px;
background-color: rgb(255, 0, 183);
}
</style>
<body>
<div id="show">
<div @click="box1" class="box1">box1
<div @click.stop.once="box2" class="box2">box2
<div @click="box3" class="box3">box3</div>
</div>
</div>
</div>
<script>
let vm=new Vue({
el:"#show",
data:{
msg:"hello world"
},
methods: {
box1(){
console.log("我是第一个盒子");
} ,
box2(){
console.log("我是第二个盒子");
},
box3(){
console.log("我是第三个盒子");
}
},
})
</script>
</body>
</html>
- 点击第三个盒子，观察打印结果
- 点击第三个盒子，观察打印结果
- 点击第一个盒子，观察打印结果
- 这里是给第二个盒子加了.stop，点击第二个盒子
- 这里可以看到第二个盒子点击被打印了八次
- 这里加了一个.once阻止它多次点击，可以连点哦
事件中的this与数据面试
1、方法中的this代表vm对象
2、方法和ES5的函数中的this是vm对象
3、ES6的箭头函数中的this就不是vm，因此事件函数采用ES6的对象的方法的写法
4、操作数据：this.xx="新值"，这里的修改会执行两步操作：
a.修改了内存data容器中的数据
b.刷新UI，重新设置innerHTML
| 事件 | 释义 |
|---|---|
| .stop | 阻止冒泡，阻止从当前元素经过的所有冒泡行为 |
| .prevent | 阻止默认事件 |
| .capture | 添加事件侦听器时让事件在捕获阶段触发 |
| .once | 事件只触发一次,触发完之后,事件就解绑 |
| .self | 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素 |
样式绑定
1、class，第一种方式：通过数组方式，v-bind:class设置一个数组
这是还没点击时的状态
现在点击hello world 图片消失，文字底色变为蓝色，控制台打印777
再次点击，图片出现，文字底色变为原来的颜色，控制台打印666
<style>
.hello {
background-color: aqua;
width: 300px;
height: 300px;
color: red;
font-size: 20px;
text-align: center;
}
.green{
border-color: green;
}
.blue{
background-color: blue;
}
</style>
<body>
<div id="show">
<button @click="myclick">{{msg}}</button>
<img :src="url" alt="" />
<div :class="['hello',mode]">
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>
</div>
<script>
let vm = new Vue({
el: "#show",
data: {
msg: "hello world",
mode: "isshow",
url: "https://img1.baidu.com/it/u=1329179979,3123798890&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500",
flag: true,
},
methods: {
myclick() {
this.flag = !this.flag;
if (this.flag) {
this.mode = "green";
console.log(666);
this.url =
"https://img1.baidu.com/it/u=1329179979,3123798890&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500";
} else {
console.log(777);
this.mode = "blue";
this.url = "";
}
},
},
});
</script>
</body>
2、class，第二种:样式和数据的绑定，通过对象方式{ }
v-bind:class设置一个对象。当isAct为true的时候，div上会增加一个class属性，属性名称为act。
如果isAct为false，则没有class属性。
3、style通过对象{}绑定
给div的style添加了一个对象，通过methods里的方法来改变对象的值，实现了文字hello world颜色的红黑切换
<body>
<div id="show">
<div :style="styleobj" v-on:click="myclick">hello world</div>
</div>
<script>
let vm=new Vue({
el:"#show",
data:{
styleobj:{
color:"red"
}
},
methods: {
myclick(){
this.styleobj.color=this.styleobj.color=="red"?"black":"red"
}
},
})
</script>
</body>
4、style通过数组的方式进行绑定
<div id="show">
<div :style="[styleobj,{fontSize:'30px'}]" v-on:click="myclick">hello world</div>
</div>
<script>
let vm=new Vue({
el:"#show",
data:{
styleobj:{
color:"red"
}
},
methods: {
myclick(){
this.styleobj.color=this.styleobj.color=="red"?"black":"red"
}
},
})
</script>
条件渲染
将flag设置为true
将flag设置为false
<body>
<div id="show">
<div v-if="flag">666</div>
<div v-show="flag">777</div>
</div>
<script>
let bm=new Vue({
el:"#show",
data:{
flag:false
}
})
</script>
</body>
1、v-if -移除元素来切换模块 具有更高的渲染消耗 因为常常用在不常切换的业务
2、v-show -css的隐藏元素(display:none)切换模块 -具有更高的内存消耗 经常切换的业务
循环渲染
<div id="show">
<div v-for="(el,index) in arr">
<p>{{el}}---test</p>
<p v-text="el"></p>
<p>---{{index}}</p>
</div>
<div v-for="el in arr2">
<b>{{el.name}}</b>
<p>{{el.age}}</p>
</div>
<div v-for="el in arr3">
<b>{{el.name}}</b>
<div v-for="el2 in el.citys">{{el2}}</div>
</div>
</div>
<script>
let vm=new Vue({
el: "#show",
data: {
arr: ["四川", "上海", "河北"],
arr2: [
{ age: 60, name: "小明" },
{ age: 20, name: "小蓝" },
{ age: 40, name: "小红" },
],
arr3:[{name:"sichaun",citys:["成都","自贡","攀枝花","绵阳"]},
{name:"shanghai",citys:["黄浦","长宁"]},
{name:"hebei",citys:["石家庄","唐山","秦皇岛"]},
]
},
});
</script>
v-if 与 v-for冲突
将v-for 和v-if放一起不显示
加一个template
1、vue2.0 中v-if v-for 写到一个元素 v-for的优先级更高
2、解决方案:1.写成嵌套关系 2."冰"元素:template
3、vue3.0 不能写到一起 不然报错
面试题
1.for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for
渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染
这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染
2.解决方案把for弄到最外层(面试)
如果if和for套在一层,数据容器发生变化时,if会重新判断一遍
嵌套的写法 数据容器变化时 if只判断新增的数据
这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率
这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中
解决方案:wx采用的是block元素 vue呢? template 其实就是dom操作中的fragment
现在先观察浏览器页面
我现在点击加载更多
可以发现我们的选择项变了
这时我们可以加一个"key",发现bug修复好了
key的意义(面试)
data中for循环的容器数据个数发生变化时,会跟for中的vm节点个数作比较
如果数据多了,会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM
然后就去刷新数据到界面: 按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来)
解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值
简答:因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用
这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来
面试题整理
1.渐进增强 优雅降级?
优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级 浏览器 只 保证最基本的功能。关键的区别 是他们所侧重的内容，以及这种不同造成 的工作流程的差异 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高 级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2.目前前端比较流行的框架有哪些?设计思想和使用场景?
1、Vue
Vue框架是用于构建用户界面的渐进式框架。它是可以自底向上逐层应用。Vue 的核心库只关注视图层，上手简单而且还便于与第三方库进行整合。
2、React
React使创建交互式UI变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React能有效地更新并正确地渲染组件。
3、Angular
4、uniapp
5、Flutter
像知到更详细可以查看这篇博客里面还有官网地址link
3.vue.js 渐进式框架(分层的设计模式)是什么意思？五层设计
采用分层设计的方式各自每一块具有独立的功能
五层具体指：核心技术库、组件系统、数据状态管理、路由管理、开发环境
4.vue.js 的核心是什么？
数据驱动和组件化开发
5.库和框架的区别?
1、框架：一套完整的解决方案，对整个项目的侵入性较大，如果项目要更换框架，则需要重新架构整个项目，列如：node.js中的express，Java后端中的springboot
2、库（插件）：提供某一个小的功能，对项目的入侵性较小，如果某个库无法满足某些需求，可以很容易的切换到其他库来实现要求。列如：从jQuery切换到Zepto，从EJS切换到art-template
6.笔试题:最后一道大题:你对vue框架的理解?
vue 是一套用于构建用户界面的 自底向上增量开发的 渐进式的 基于MVVM的 框架。
核心是关注视图层，解决数据绑定的问题。
核心思想
数据驱动：视图内容根据数据的改变而改变
组件化：增加代码复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚，低耦合。
个人理解
由于vue是基于MVVM思想的双向绑定，让我们可以减少对dom元素的频繁操作，直接在数据层和视图层建立一种联系，方便使用。并且它通过组件化的方式，增加了代码的可复用性，可维护性，提高了开发效率。
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
