Vue|Vue语法模板（样式绑定，事件处理器，表单，自定义组件，组件通信） javascript|前端|vue语法模板|vue

目录
一.样式绑定
1，将字体变为红色
2，调节字体大小
二，事件处理器
事件修饰符
1，阻止单击事件冒泡
2，click 事件只能点击一次
案件修饰符
三，表单
四，自定义组件
五，组件通信
一.样式绑定 class绑定
v-bind:class="expression"
expression的类型：字符串、数组、对象
style绑定
v-bind:style="expression"
expression的类型：字符串、数组、对象
1，将字体变为红色
原始写法

{{msg}}

绑定写法

{{msg}}

colorred:'color:red; '

注意：变量定义不能使用中划线，参照案例样式绑定命名错误color-red
2，调节字体大小

.f200 {
font-size: 200px;
}

{{msg}}

f200: 'f200'

文章图片

二，事件处理器事件监听可以使用v-on 指令
事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop
.prevent
.capture
.self
.once

...

...

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; } 冒泡事件

页面效果

文章图片

点击最小的黑色正方形，会依次触发黑，蓝，橙，红四个弹框
当我们不需要连续触发事件时，可以通过如下代码阻止事件冒泡

.stop="red">
.stop="orange">
.stop="blue">
.stop="black">

2，click 事件只能点击一次

提交答案

sub(){
alert("已提交");
}

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

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

全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

三，表单用v-model指令在表单控件元素上创建双向数据绑定
常用控件
文本框/密码框/文本域/隐藏域

单选复选框/多选复选框
单选按钮
下拉框

表单 - 锐客网标题【Vue|Vue语法模板（样式绑定，事件处理器，表单，自定义组件，组件通信）】vue表单姓名：密码：年龄：性别：男女爱好：{{h.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，页面上要显示一个独特标记按钮

- 锐客网

按钮会显示被点击的次数
Vue|Vue语法模板（样式绑定，事件处理器，表单，自定义组件，组件通信）

文章图片

五，组件通信监听事件：$on(eventName)
触发事件：$emit(eventName)
Vue自定义事件是为组件间通信设计
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

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

- 锐客网 {{ts}} vue组件

template是自定义组件在页面上显示的内容
在button里绑定一个点击事件，当n增加到能被3整除时触发事件xx-click，在body定义的自定义按钮中绑定该事件
由于body界面本身与new vue（）发生数据交互，所以xx-click事件的方法写到new vue里，于是该组件本身与new vue形成组件通信

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