vue中的语法糖_vue语法糖

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 替换成冒号 (😃

// 语法糖写法

没有语法糖

// 没有语法糖

没有语法糖

3、v-on 的语法糖


v-on 绑定事件监听器的，v-on 的语法糖，就是简写成@ 。


情况1：如果方法不传参时，可以不加小括号。

<button @click=“btn”>语法糖

无语法糖

//需要注意的是，如果方法本身有一个参数，会默认将原生的事件event参数传递进来
methods:{
btn( event ){
console.log( ‘event’ , event )
}
}

情况2：如果需要传递参数时，又同时需要 event 参数。

<button @click=“btn( ‘点击事件’ , $event )”>语法糖

//需要注意的是，$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”>百度

//普通写法
百度
methods:{
go(e){
e.preventDefault();
console.log(‘阻止链接跳转’)
}
}

prevent 修饰符是阻止默认事件。还有 submit 同样也适用。

下列是常见的修饰符，与上边 .prevent 使用相同。


.stop 用来阻止事件冒泡。  
 .once 事件只触发一次。  
 .self 事件只在自身触发，不能从内部触发。  
 .enter | .tab | .delete | .esc … 键盘修饰符  
 .ctr | .alt | .shift | .meta 系统修饰符  
 5、动态css


使用 v-bind 可以通过 style 或 class， 可以添加动态样式。

//点击 你好，实现文字红黑之间切换

data:{
changeColor:false
}

6、注册组件语法糖


所谓的注册组件语法糖是指省去组件构造器的定义，直接将组件构造器对象传入注册组件函数里，这样会减少 CPU 的调度以及内存的分配。


全局组件使用：


#### 专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

* HTML+CSS
* JavaScript
* 前端框架
* 前端性能优化
* 前端监控
* 模块化+项目构建
* 代码管理
* 信息安全
* 网络协议
* 浏览器
* 算法与数据结构
* 团队管理
* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。



**其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等**

**由于文章篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)