Vue——export default {}中的属性、方法与事件、 样式绑定、数据绑定、面试题、笔试题
其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件,虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素。自己是目标元素才触发。b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法。利用input事件,用户交互的时候,获取用户输入的
目录
export default {}中的属性：
props：[]
methods:{}
watch:{}
computed:{}
filters:{}
directives:{}
components:{}
comments:true (是否要注释)
name:"devtool" 打包的时候根据name打包
一、方法与事件
vue框架帮我们操作dom 不到万不得已 不建议我们自己操作dom
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")},
fn2:function(){console.log("fn2")},
fn3:()=>{console.log("fn3")},
fn4,
fn5,
fn6
}
})2.事件绑定
//v-on: 和 @ 都是绑定事件的指令
//指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加
<button v-on:click="fn1()">点击事件1</button>
<button @click="fn2">点击事件2</button>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>4.事件中的this与数据操作(面试)
1. 方法中的this代表vm对象
a.方法和ES5的函数中的this是vm对象
b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法
2. 操作数据: this.xx="新值"
//这里的修改会执行两步操作:
//a.修改内存data容器中的数据
//b.刷新UI==>重新设置innerHTML
<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">
.box1 {
width: 200px;
height: 200px;
background-color: gold;
}
.box2 {
width: 100px;
height: 100px;
background-color: chartreuse;
margin: 10px;
}
.box3 {
width: 50px;
height: 50px;
background-color: darkcyan;
margin: 10px;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="fn3">change</button>
<button v-on:click="fn3(100,200,$event)">change2</button>
<button @click="fn3" @mouseenter="fn4">change3</button>
<button @click="fn5">change4</button>
<p>{{msg}}</p>
<div class="box1" @click.capture="box1clicked">
1
<div class="box2" @click.self.stop="box2clicked">
2
<div class="box3" @click="box3clicked">3点我</div>
</div>
</div>
<a @click.prevent="fn3" href="http://www.baidu.com">阻止默认事件</a>
<button @click.once="box1clicked">倒计时..开始抢</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg: "hello"
},
methods: {
box1clicked() {
console.log("1进入新闻页面")
},
box2clicked() {
console.log("2进入个人中心页面")
},
box3clicked() {
console.log("3悬浮弹窗显示 vip级别")
},
fn: function () { },
fn2: () => {
console.log(this)
},
fn3(e, e2, e3) {
this.msg = "6666"
},
fn4() {
console.log("移入了")
},
fn5() {
this.fn51();
this.fn52();
},
fn51() {
},
fn52() {
}
}
})
</script>
</body>
二、样式绑定
(1) 对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 进行绑定
style的样式绑定 ==> 当页面中有某一些样式需要动态改变时
<!--对象语法-->
<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> <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>
<script type="text/javascript">
</script>三、面试题 笔试题
1、Vue的核心思想（特点）
1)数据驱动页面
数据驱动-动态数据-响应式数据- data数据源对象中的数据 会被劫持到vm对象中 页面中的模板会通过特定标识 去取出vm对象的数据 然后渲染页面 如果这个数据变了 它会实时的刷新页面
2)组件化开发
2、切换效果的实现：
1.做切换效果的技术--样式绑定
2.组件或者模块的切换-动态组件,v-if/v-show
3.路由切换-router
3、Vue2.0兼容IE哪个版本以上吗
不支持IE8及以下，部分兼容IE9，完全兼容10以上，以为Vue的响应式原理是基于ES5的Object.defineProperty(),而这个方法不支持IE8及以下
4、Vue自顶向上的增量开发，一共有哪五层？
自底向上的增量开发(5层) ： 声明式渲染(vue.js) 、 组件化系统 、数据仓库（大规模状态系统） 、开发环境（cli ）、路由
vue==>vue全家桶(vue.js 网络:vue-axios axios/featch vue-router vuex element-ui )
鸿蒙生态一站式服务平台。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)