Vue——方法与事件、 样式绑定、数据绑定、面试题、笔试题
目录
一、方法与事件
1.方法的写法
2.事件绑定
3.事件修饰符(面试)
4.事件中的this与数据操作(面试)
二、 样式绑定
(1) 对class 属性进行绑定
(2)对style 进行绑定
三、数据绑定(面试)
四、面试题、笔试题
1、Vue的核心思想（特点）
2、切换效果的实现：
一、方法与事件
1.方法的写法
**在methods中写方法,供事件或者别的方法内部调用**
方法的写法:由于是做了es6语法处理的 所以学过的所有方式的写法都行
function fn4 () {console.log("fn4")}
var fn5=()=>{console.log("fn5")}
var fn6=function(){console.log("fn6")}
new Vue({
el:"#app",
data:{},
methods:{
fn1(){console.log("fn1")}, //ES6的方法
fn2:function(){console.log("fn2")}, //ES5的写法
fn3:()=>{console.log("fn3")}, //ES6的箭头函数
fn4,
fn5,
fn6
}
})2.事件绑定
v-on: 和 @ 都是绑定事件的指令
指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加（Vue框架帮我们操作DOM，不到万不得已，不建议我们自己操作DOM）
<button v-on:click="fn1()">点击事件1</button>
<button v-on:click="fn1">点击事件2</button>
//第一行和第二行都一样，都不会自己先运行，要先点击后才能运行
<button @click="fn2">点击事件3</button>
$event是将事件传进去
<div id="app">
<button v-on:click="fn3">按钮</button>
<button v-on:click="fn3(100,$event)">按钮</button>
<button @click="fn3" @mouseenter="fn4">点击事件3</button>
<button @click="fn5">按钮</button>
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello"
},
methods: {
fn: function () { },
fn2: () => { console.log(this) }, //这个是箭头函数，所以是全局
fn3(e, e2) {
console.log(this) // this是这个Vue对象
this.msg = "666"
},
fn4() {
console.log("鼠标移入")
},
fn5() {
this.fn51();
this.fn52();
},
fn51() { },
fn52() { }
}
})
</script>3.事件修饰符(面试)
- .stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为
- .prevent 阻止默认事件
- .capture 添加事件侦听器时让事件在捕获阶段触发
- .self 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素。自己是目标元素才触发
- .once 事件只触发一次,触发完之后,事件就解绑
- 多修饰符一起使用:连点
<div class="box" @click="divBoxHandler">
<input type="button" @click.stop="btnHandler" value="戳他">
</div>
<a v-on:click.prevent.once="doThat">阻止点击跳转，但是只会阻止第一次</a>点box3，就打印333，222
点box2，打印：222
点box1，打印：111
<style>
.box1 {
width: 200px;
height: 200px;
background-color: gold;
}
.box2 {
width: 100px;
height: 100px;
background-color: #fff;
margin:10px;
}
.box3 {
width: 50px;
height: 50px;
background-color: red;
margin:10px;
}
</style>
<div id="app">
<div class="box1" @click="box1clicked">
<div class="box2" @click.stop="box2clicked">
<div class="box3" @click="box3clicked"></div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
box1clicked(){console.log(111)},
box2clicked(){console.log(222)},
box3clicked(){console.log(333)},
}
})
</script>4.事件中的this与数据操作(面试)
1. 方法中的this代表vm对象
a.方法和ES5的函数中的this是vm对象
b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法
2. 操作数据: this.xx="新值"
//这里的修改会执行两步操作:
//a.修改内存data容器中的数据
//b.刷新UI==>重新设置innerHTML
二、 样式绑定
(1) 对class 属性进行绑定
使用场景：当页面中有很多样式改变的时候就使用class绑定
<!--对象语法,v-bind:class 指令也可以与普通的 class 属性共存-->
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<div v-bind:class="classObject"></div>
对应js 中的data:
data: {
isActive: true,
hasError: false,
classObject: {
active: true,
'text-danger': false
}
}
<!--数组语法,这样写将始终添加 errorClass，但是只有在 isActive 是真值时才添加 activeClass-->
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>夜间模式和白天模式的切换
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
<style type="text/css">
.mainbox{
width: 200px;
height: 200px;
}
.baitian{
background-color: darkgray;
color: black !important;
}
.heiye{
background-color:black;
color: darkgray !important;
}
</style>
</head>
<body>
<div id="app">
<button @click="change1">{{title}}</button>
<!-- <div :class="{heiye:n,mainbox:true}">123</div> -->
<div :class="mode">6666666</div>
<div :class="['mainbox',mode]">
<p>此处省略n个标签</p>
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
title:"夜间模式",
flag:true,
mode:"baitian",
// n:true
},
methods:{
change1(){
this.flag=!this.flag
if(this.flag){
this.title="白天模式"
this.mode="baitian"
}
else{
this.title="夜间模式"
this.mode="heiye"
}
}
}
})
</script>
</body>(2)对style 进行绑定
使用场景：当页面中有某一些样式改变的时候就使用stye绑定
<!--对象语法-->
方法一：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
方法二：
<div v-bind:style="styleObject"></div>
对应js 中的data:
data: {
activeColor: 'red',
fontSize: 30,
red1:"red",
styleObject: {
color: 'red',
fontSize: '13px'
}
}
方法三：
<!--数组语法,可以将多个样式对象应用到同一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles,{color:red1}]"></div>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="btnclicked">show/hidde</button>
<!-- 方法一 -->
<div :style="{display:n,color:'red'}">
{{msg}}
</div>
<!-- 方法二 -->
<div :style="obj">
{{msg}}
</div>
<!-- 方法三 -->
<div :style="[box1,box2,{color:color,background:'gold'}]">
{{msg}}
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:"hello",
flag:true,
n:"block",
color:"grey",
obj:{
color:'green',
fontSize:"30px"
},
box1:{
fontSize:"30px"
},
box2:{
width:"200px",
height:"200px"
}
},
methods:{
btnclicked(){
this.flag=!this.flag
if(this.flag){
//显示
this.n="block"
}
else{
//隐藏
this.n="none"
}
}
}
})
</script>
</body>三、数据绑定(面试)
响应式数据:只能由代码改变UI或者只能由UI改变代码
双向数据绑定:代码改变UI,UI也能改变代码
双向数据绑定的实现: 2种方式
1.自己实现,vue可以自己实现(没必要) 微信开发可以自己实现(只能自己实现)
利用input事件,用户交互的时候,获取用户输入的值,然后把值绑定到data容器中
2.系统指令:v-model
//vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
//利用 Object.defineProperty 自己实现双向数据绑定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>四、面试题、笔试题
1、Vue的核心思想（特点）
1）、数据驱动页面（响应式数据）
2）、组件化开发
2、切换效果的实现：
1、做切换效果的技术——样式绑定
2、组件或子模块的切换——动态组件,v-if/v-show
3、路由切换——router
（分为三类，也就是四个技术）