VUE 入门基础(7)
八,事件处理器
监听事件 可以用v-on 指令监听DOM 事件来触发一些javaScript
<div id="example-1">
<button v-on:click="counter += 1">增加1</button>
<p>这个按钮被点击了{{ counter }} 次</p>
</div>
var example1 = new Vue({
el: "#example-1"
data: {
counter: 0
}
})
方法事件处理器 v-on 可以接收一个定义的方法来调用
<div id="example-2">
<butto v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el:'#example-2',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
alert('Hello' + this.name + '!')
}
}
})
example2.greet()
内联事件处理方法 可以内联JavaScript语句
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
alert(message)
}
})
有时候也需要内联语句处理器中访问原生DOM事件 可以用特殊变了$event 把它传入方法:
<button v-on:click="warn('For cannot be submitted ye.',$event)" >Submit</button>
methods: {
warn: function(message, event) {
if(event) event.preventDefault()
alert(message)
}
}
事件修饰符 为v-on 提供了 事件修饰符 通过由(.)表示的的指令后缀来调用修饰符。
.stop .prevent .capture .self .once
// 防止事件冒泡
<a v-on:click.stop="doThis"></a>
// 提交事件不在重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
// 只有修饰符
<form v-on:submit.prevent></form>
// 添加事件监听器时使用事件捕获模式
<div v-on:click.capture="doTthis"></div>
// 只当事件在该元素本身(而不是子元素)触发时触发回调
<div v-on:click.self="doThat"></div>
按键修饰符 在监听键盘事件时,vue允许 v-on 在监听键盘事件时添加按键修饰符
// 只有在keyCode 是 13 是调用 vm.submit()
<input v-on:keyup.13="submit">
// 记住所有的 keyCode 比较困难, 所以Vue 为最常见的按键提供了别名:
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">
全部的按键名 .enter .tab .delete .esc .space .up .down .left .right 可以通过全局 config.keyCodes 对象自定义按键修饰符别名:
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
按键修饰符 可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应。
.ctrl .alt .shift .meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
九,表单控件绑定 基础用法 用v-model 指令在表单控件元素上创建双向数据绑定。
<input v-model="message" placeholder="edit me">
<p>Message is:{{ message}}</p>
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<textarea v-model="message" placeholder="add multtiple lines"> </textarea>
复选框 单个勾选框,逻辑值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked}}</label>
多个勾选框,绑定到同一个数组
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="john" v-model="checkedNames">
<label for="jack">john</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<span>Checked names: {{checkedNames}}</span>
new Vue({
el:'...',
data: {
checkedNames: [ ]
}
})
单选按钮
<input type="radio" id="one" value="One" v-model="picked">
<lable for="one">One</lable>
<input type="radio" id="two" value="Two" v-model="picked">
<lable for="one">One</lable>
<span>Picked: {{ picked }}</span>
选择列表 单选列表:
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
多选列表(绑定到一个数组):
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
动态选项,用v-for 渲染
<select v-model="selected">
<option v-for="opction in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>selected: {{ sekected}}</span>
new Vue({
el:'...',
data: {
selected: 'A',
options: [
{text:'One',value: 'A'},
{text:'Two',value: 'B'},
{text:'Three',value: 'C'}
]
}
})
绑定 value 对于单选按钮,勾选框及选择列表, v-model 绑定的value 通常是静态字符串。
// 当选中时 picked 为字符串 a
<input type="radio" v-model="picked" value="a">
// toggle 为 true 或 false
<input type="checkbox" v-model="toggle">
// 当选中时 selected 为字符串女abc
<select v-mode="selected">
<option value="abc">ABC</option>
</select>
复选框
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="a">
// 当选中时
vm.toggle === vm.a
vm.toggle === vm.b
等选按钮
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pcik === vm.a
选择列表设置
<select v-model="selected">
// 内联对象字面量
<option v-bind:value="{number: 123}">123</option>
</select>
// 当选中时
typeof vm.selected // object
vm.selected.number //123
修饰符 .lazy 在默认情况下, v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: // 在“change” 而不是在 "input" 时间中更新 <input v-model.lazy="msg"> .number 如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
<input v-model.number="age" type="number"> 因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 .trim 如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入: <input v-model.trim=msg>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言在不同样本量下的Littles MCAR检验
- Stata中的治疗效果:RA:回归调整、 IPW:逆概率加权、 IPWRA、 AIPW
- R语言基于协方差的SEM结构方程模型中的拟合指数
- Python贝叶斯回归分析住房负担能力数据集
- 基于R统计软件的三次样条和平滑样条模型数据拟合及预测
- R语言析因设计分析:线性模型中的对比
- R语言逻辑回归、方差分析 、伪R平方分析
- R语言逐步多元回归模型分析长鼻鱼密度影响因素
- R语言对回归模型进行协方差分析
- R语言多项式样条回归、非线性回归数据分析
- R语言中进行Spearman等级相关分析
- R语言相关分析和稳健线性回归分析
- R语言文本挖掘使用tf-idf描述NASA元数据的文字和关键字
- R语言对NASA元数据进行文本挖掘的主题建模分析
- 随机搜索变量选择SSVS估计贝叶斯向量自回归(BVAR)模型