Vue语法模板(样式绑定,事件处理器,表单,自定义组件,组件通信)

36 阅读4分钟
总结

三套“算法宝典”

28天读完349页,这份阿里面试通关手册,助我闯进字节跳动

算法刷题LeetCode中文版(为例)

人与人存在很大的不同,我们都拥有各自的目标,在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人,但是我深刻知道自己想要的是一年比一年有进步。

最后,我想说的是,无论你现在什么年龄,位于什么城市,拥有什么背景或学历,跟你比较的人永远都是你自己,所以明年的你看看与今年的你是否有差距,不想做咸鱼的人,只能用尽全力去跳跃。祝愿,明年的你会更好!

由于篇幅有限,下篇的面试技术攻克篇只能够展示出部分的面试题,详细完整版以及答案解析,有需要的可以关注

开源分享:docs.qq.com/doc/DSmRnRG…

     

     

     

     

     

     

...

     

     

...

     

     

 

1,阻止单击事件冒泡

冒泡事件会连续触发事件

冒泡事件代码如下:

.red { width: 400px; height: 400px; background-color: red; } .orange { width: 300px; height: 300px; background-color: orange; } .blue { width: 200px; height: 200px; background-color: blue; } .black { width: 100px; height: 100px; background-color: black; }

冒泡事件

页面效果

点击最小的黑色正方形,会依次触发黑,蓝,橙,红四个弹框

当我们不需要连续触发事件时,可以通过如下代码阻止事件冒泡

                <div class="orange" @click.stop="orange">

                    <div class="blue" @click.stop="blue">

                        <div class="black" @click.stop="black">

 2,click 事件只能点击一次

 

提交答案

            <button @click=sub>提交答案

 sub(){

                    alert("已提交");

                }

以上代码效果为能重复点击提交并提交表单

阻止二次提交

            <button @click.once=sub>提交答案

案件修饰符


Vue允许为v-on在监听键盘事件时添加按键修饰符:

     

     

      全部的按键别名:

      .enter

      .tab

      .delete (捕获 "删除" 和 "退格" 键)

      .esc

      .space

      .up

      .down

      .left

      .right

      .ctrl

      .alt

      .shift

      .meta 

三,表单

====

用v-model指令在表单控件元素上创建双向数据绑定

常用控件

文本框/密码框/文本域/隐藏域

单选复选框/多选复选框

单选按钮

下拉框

表单

标题

  • vue表单

    姓名:

    密码:

    年龄:

    性别:


    爱好:

    {{h.name}}

    类别:

    ===请选择=== {{t.name}}

    备注:


    确认

四,自定义组件

========

组件(Component)是Vue最强大的功能之一

组件可以扩展HTML元素,封装可重用的代码(控件将大量的js代码封装了起来)

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树

全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。

局部组件: new Vue({el:'#d1',components:{...}})

注册后,我们可以使用以下方式来调用组件: 

props

props是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明 "prop"

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

定义组件名的方式有两种

短横线分隔命名(建议使用) 

Vue.component('my-component-name', { /* ... */ }),引用方式:

首字母大写命名

Vue.component('MyComponentName', { /* ... */ }),引用方式: 和都是可接受的   

HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,

camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

props: ['postTitle'],

需求:当引用一个mybutton,页面上要显示一个独特标记按钮

按钮会显示被点击的次数

五,组件通信

======

监听事件:$on(eventName) 

触发事件:$emit(eventName) 

Vue自定义事件是为组件间通信设计   

vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定

父Vue实例->Vue实例,通过prop传递数据

子Vue实例->父Vue实例,通过事件传递数据 

最后

除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。