Vue基础语法2&事件修饰符&按键修饰符&常用控件&自定义指令&全局&样式绑定
目录
1.样式绑定
2. 事件修饰符
3. 按键修饰符
4. 常用控件
4.1 常用控件示例
4.2 修饰符
5. 自定义指令
5.1 局部
5.2 全局
1.样式绑定
- class绑定
使用方式：v-bind:，expression的类型：字符串、数组、对象 - style绑定
v-bind:style="expression"， expression的类型：字符串、数组、对象
示例：
<--定义示例样式-->
fafa
fafa
aaa
bbb
test
var vm = new Vue({
el: "#app",
data: {
fc: 'fontClass',
ac: ['fontClass', 'colorClass'],
fontSize: 40,
color: 'green',
//样式对象，注意：样式名使用驼峰命名，如：fontSize
myStyle: {
fontSize: '50px',
color:'red',
fontWeight: 'bold'
}
}
});2. 事件修饰符
几个常用的事件修饰符：
示例：
接收消息：{{receverMsg}}
var vm = new Vue({
el: "#app",
data: {
receverMsg: null,
sendMsg: null
},
methods: {
sender: function() {
this.receverMsg = this.sendMsg;
},
doSubmit: function() {
alert('ok');
}
}
});3. 按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符。
示例：
示例：响应enter键事件
var vm = new Vue({
el: "#app",
data: function() {
return {
name: 'hello vue'
}
},
methods: {
doSubmit: function() {
alert("响应enter，" + this.name);
}
}
});4. 常用控件
4.1 常用控件示例
通过实现一个类型注册的页面，熟悉常用的控件。文本框/密码框/文本域/单选/多选/下拉列表
男
女
{{h.name}}
是否已阅读并同意协议
var vm = new Vue({
el: "#app",
data: {
uname: '',
upwd:'',
age:'',
sex: 1,
//用于通过v-for指令输出多选框列表
hobbies:[
{id: '1', name:'打游戏'},
{id: '2', name:'编程'},
{id: '3', name:'旅游'}
],
/*
* 用于通过v-model双向绑定,保存用户的选择。
* 此处为多选，需要通过数组接收，否则无法
* 正常接收复选框的值，且复选框的行为也不正常，
* 可能出现要么全部被选择，要么全部被取消的情况
*/
hobby:[],
remark: null,
//用于生成地区选择列表
city:[
{id:"1", name:"长沙"},
{id:"1", name:"株洲"},
{id:"1", name:"湘潭"}
],
//用于保存用户选择的地区
selectedCity: '',
//是否同意协议,默认值为false
agreed:false,
//提交按钮是否禁用,默认为true
disabled: true
},
//监控agreed属性,如果同意协议则将提交按钮
//设置为可用,否则提交按钮为禁用状态
watch: {
agreed: function(val) {
if(val) {
this.disabled = false;
}else{
this.disabled = true;
}
}
},
methods: {
submit: function() {
let data = {
uname: this.uname,
upwd: this.upwd,
age:this.age,
sex: this.sex,
hobby: this.hobby,
city: this.selectedCity,
remark: this.remark
}
console.log(data);
}
}
});不使用监视器的简单方式： 删除监听器，然后将提交按钮的做如下修改
4.2 修饰符
以.number为例，示例修饰符的使用，将输入的年龄属性转换为数值型
5. 自定义指令
Vue除支持内置的v-model/v-show等指令，还允许自定义指令。 vue2中，代码的复用和抽象的主要形式是组件，但在有些情况下仍然需要对普通dom元素做底层操作，这种情况下需要自定义指令。根据自定义指令的作用范围，可分为：全局、局部两种
钩子函数：
指令钩子函数会被传入以下参数：
- el：指令所绑定的元素，可以用来直接操作 DOM 。
- binding：一个对象，包含以下属性：
1） name：指令名，不包括 v- 前缀。
2） value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
3） oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
4） expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
5） arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
6） modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。 - vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
5.1 局部
通过自定义标签设置文字颜色
我是自定义指令
var vm = new Vue({
el: '#app',
data: {
red:'red'
},
//自定义指令，局部
directives:{
color: {
inserted: function(el,binding) {
console.log(el,binding);
el.style.color = binding.value;
}
}
}
});5.2 全局
我是自定义指令
//自定义标签,全局
Vue.directive('color', {
inserted: function(el,binding) {
console.log(el,binding);
el.style.color = binding.value;
}
})
var vm = new Vue({
el: '#app',
data: {
red:'red'
}
});