}
冒泡事件
页面效果
点击最小的黑色正方形,会依次触发黑,蓝,橙,红四个弹框
当我们不需要连续触发事件时,可以通过如下代码阻止事件冒泡
<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,页面上要显示一个独特标记按钮