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

最后

喜欢的话别忘了关注、点赞哦~

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

},

methods:{

red(){

alert(“red”);

},orange(){

alert(“orange”);

},blue(){

alert(“blue”);

},black(){

alert(“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实例，通过事件传递数据

• {{ts}}

  vue组件