ES6
-
列举常用的ES6特性:
-
箭头函数需要注意哪些地方?
-
let、const、var
-
拓展:var方式定义的变量有什么样的bug?
-
Set数据结构
-
拓展:数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求?
-
有哪些参数传值的方法?
-
你使用过哪些方法,来提高微信小程序的应用速度?
-
小程序和原生App哪个好?
-
简述微信小程序原理?
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题?
//语法糖写法
<input type="text" v-model="name" >
//还原为以下实例
<input type="text"
v-bind:value="name"
v-on:input="name=$event.target.value">
输入的时候会触发 input 事件,input 事件会把当前值赋值给 value ,这就是 v-model 为什么可以实现双向绑定的原因。
2、v-bind 的语法糖
v-bind 用来添加动态属性的,常见的 src、href、class、style、title 等属性都可以通过 v-bind 添加动态属性值。
v-bind 的语法糖就是去掉 v-bind 替换成冒号 (😃
// 语法糖写法
<div :title="title">
<img :src="url" alt="">
<a :href="link">没有语法糖</a>
</div>
// 没有语法糖
<div v-bind:title="title">
<img v-bind:src="url" alt="">
<a v-bind:href="link">没有语法糖</a>
</div>
3、v-on 的语法糖
v-on 绑定事件监听器的,v-on 的语法糖,就是简写成@ 。
情况1:如果方法不传参时,可以不加小括号。
<button @click="btn">语法糖</button>
<button v-on:click="btn">无语法糖</button>
//需要注意的是,如果方法本身有一个参数,会默认将原生的事件event参数传递进来
methods:{
btn( event ){
console.log( 'event' , event )
}
}
情况2:如果需要传递参数时,又同时需要 event 参数。
<button @click="btn( '点击事件' , $event )">语法糖</button>
//需要注意的是,$event 事件拿到浏览器事件对象
methods:{
btn( type, event ){
console.log( 'type' , type ) //点击事件
console.log( 'event' , event )
}
}
4、修饰符
修饰符是以半角句号 . 指明的特殊后缀。v-on 后面的修饰符,也是语法糖。
示例:链接添加点击事件,点击之后不希望跳转。
//语法糖
<a href="http://www.baidu.com" @click.prevent="go">百度</a>
//普通写法
<a href="http://www.baidu.com" v-on:click="go">百度</a>
methods:{
go(e){
e.preventDefault();
console.log('阻止链接跳转')
}
}
prevent 修饰符是阻止默认事件。还有 submit 同样也适用。
<form @submit.prevent="onSubmit"></form>
下列是常见的修饰符,与上边 .prevent 使用相同。
.stop 用来阻止事件冒泡。
.once 事件只触发一次。
.self 事件只在自身触发,不能从内部触发。
.enter | .tab | .delete | .esc … 键盘修饰符
.ctr | .alt | .shift | .meta 系统修饰符
5、动态css
使用 v-bind 可以通过 style 或 class, 可以添加动态样式。
//点击 你好,实现文字红黑之间切换
<h1 @click=" changeColor = !changeColor " :style="{color:changeColor?'red':'black'}">
你好
</h1>
data:{
changeColor:false
}
ES6
-
列举常用的ES6特性:
-
箭头函数需要注意哪些地方?
-
let、const、var
-
拓展:var方式定义的变量有什么样的bug?
-
Set数据结构
-
拓展:数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求?
-
有哪些参数传值的方法?
-
你使用过哪些方法,来提高微信小程序的应用速度?
-
小程序和原生App哪个好?
-
简述微信小程序原理?
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题?