传说中 VUE 的“语法糖”到底是啥？(1)

<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 的调度以及内存的分配。

全局组件使用：

//全局组件语法糖写法

Vue.component(

‘my-component’ ,

template:`

组件内容

`)

/* 全局组件注册 */

//组件使用

//注册组件

const myComponent = Vue.extend({

template:`

VUkeh

`

})

Vue.component(‘myComponent’, myComponent)

局部组件使用：

//全局组件语法糖写法

components:{

‘my-component’:{

template:<div>组件内容</div>

}

}

/* 局部组件注册 */

//注册组件

const myComponent = Vue.extend({

template:`

VUkeh

`,

components:{

child:{

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】