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的类型：字符串、数组、对象

示例：

<--定义示例样式-->
<style> 
.fontClass { 
    font-size: 40px;
}
.colorClass {
    color: red;
}
</style>
 
<!--使用-->
<p>
    <span v-bind:class="fc">fafa</span>
</p>
<p>
    <!--简写-->
    <span :class="ac">fafa</span>
</p>
 
<p>
    <!--直接使用style样式单-->
    <span style="font-size: 40px; color:blue;">aaa</span>
    <br/>
    <!-- 使用vue，样式名称为驼峰风格 。花括号，多个属性逗号分隔-->
    <span :style="{fontSize:fontSize+'px',color: color}">bbb</span>
    <br/>
    <span :style="myStyle">test</span>
</p>

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. 事件修饰符

几个常用的事件修饰符：

• 
  
• 
  
• 
  
• 
  
• 
  
  ...

示例：

<div>接收消息：{{receverMsg}}</div>
<p>
    <!--响应多次或一次点击事件-->
    <input type="text" v-model="sendMsg">
    <button @click="sender">发送(多次)</button>
    <button @click.once="sender">发送(一次)</button>
</p>
<p>
    <!-- 阻止表单提交 -->
    <form action="testAction.action" method="post" @submit.prevent="doSubmit()">
        <label>名称</label>
        <input type="text" name="name"/>
        <input type="submit" value="提交"/>
    </form>
</p>

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在监听键盘事件时添加按键修饰符。
示例：

<input v-on:keyup.13="submit">
 
<input v-on:keyup.enter="submit">

示例：响应enter键事件

<input type="text" @keyup.13="doSubmit" v-model="name">

 

var vm = new Vue({
 
    el: "#app",
 
    data: function() {
        return {
            name: 'hello vue'
        }
    },
 
    methods: {
        doSubmit: function() {
            alert("响应enter，" + this.name);
        }
    }
});

4. 常用控件

4.1 常用控件示例

通过实现一个类型注册的页面，熟悉常用的控件。文本框/密码框/文本域/单选/多选/下拉列表

<div id="app">
    <div>
        <label>账号：</label>
        <input type="text" v-model="uname">
    </div>
    <div>
        <label>密码：</label>
        <input type="password" v-model="upwd">
    </div>
    <div>
        <label>年龄：</label>
        <input type="text" v-model="age" >
    </div>
    <div>
        <label>性别：</label>
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="2">女
    </div>
    <div>
        <label>爱好：</label>
        <div style="display: inline;" v-for="h in hobbies">
            <input  type="checkbox" :value="h.id" v-model="hobby"/>{{h.name}}
        </div>
    </div>
    <div>
        <label>地区</label>
        <select v-model="selectedCity">
            <option value="">-- 请选择 --</option>
            <option v-for="c in city" :value="c.id">{{c.name}}</option>
        </select>
    </div>
    <div>
        <label>备注：</label>
        <textarea v-model="remark"></textarea>
    </div>
    <div>
        <input type="checkbox" v-model="flag">是否已阅读并同意协议
    </div>
    <div>
        <button @click="submit" :disabled="disabled">提交</button>
    </div>
</div>

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);
        }
    }
 
});

不使用监视器的简单方式： 删除监听器，然后将提交按钮的做如下修改

<button @click="submit" :disabled="!agreed">提交</button>

4.2 修饰符

以.number为例，示例修饰符的使用，将输入的年龄属性转换为数值型

<div>
    <label>年龄：</label>
    <input type="text" v-model.number="age" >
</div>

 

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 局部

通过自定义标签设置文字颜色

<div id="app">
    <!--red绑定到data里面的变量-->
    <p v-color="red">我是自定义指令</p> 
</div>

 

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 全局

<div id="app">
    <!--red绑定到data里面的变量-->
    <p v-color="red">我是自定义指令</p> 
</div>

//自定义标签,全局
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'
    }
});