Vue之样式绑定&事件,按键修饰符&常用控件

样式绑定

class绑定

使用方式:v-bind:,expression的类型:字符串、数组、对象

style绑定

v-bind:style="expression", expression的类型:字符串、数组、对象

bash 复制代码
示例:
<--定义示例样式-->
<style> 
.fontClass { 
    font-size: 40px;
}
.colorClass {
    color: red;
}
</style>
bash 复制代码
<!--使用-->
<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>
bash 复制代码
var vm = new Vue({
    el: "#app",

    data: {
        fc: 'fontClass',
        ac: ['fontClass', 'colorClass'],

        fontSize: 40,
        color: 'green',

        //样式对象,注意:样式名使用驼峰命名,如:fontSize
        myStyle: {
            fontSize: '50px',
            color:'red',
            fontWeight: 'bold'
        }
    }
});

事件修饰符

几个常用的事件修饰符:

示例:

bash 复制代码
<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');
        }
    }

});

按键修饰符

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

示例:

bash 复制代码
<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);
        }
    }
});
  1. 常用控件
    4.1 常用控件示例
    通过实现一个类型注册的页面,熟悉常用的控件。文本框/密码框/文本域/单选/多选/下拉列表
bash 复制代码
<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">提交

4.2 修饰符

修饰符 作用

.lazy 默认情况下, v-model在input事件中同步输入框的值与数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步

.number 将用户的输入值转为 Number 类型

.trim 自动过滤用户输入的首尾空格

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

bash 复制代码
<div>
    <label>年龄:</label>
    <input type="text" v-model.number="age" >
</div>
  1. 自定义指令
    Vue除支持内置的v-model/v-show等指令,还允许自定义指令。 vue2中,代码的复用和抽象的主要形式是组件,但在有些情况下仍然需要对普通dom元素做底层操作,这种情况下需要自定义指令。根据自定义指令的作用范围,可分为:全局、局部两种

钩子函数:

名称 作用

bind 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

inserted 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)

update 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)

componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用

unbind 只调用一次,指令与元素解绑时调用

指令钩子函数会被传入以下参数:

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

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

bash 复制代码
<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 全局

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

//自定义标签,全局

bash 复制代码
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'
    }
});
  1. vue组件(重点)
    6.1 组件介绍
    组件(Component)是Vue最强大的功能之一,
    组件可以扩展HTML元素,封装可重用的代码
    组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树
    组件可以分为全局组件和局部组件
    组件命名规则

短横线命名,如: my-component,vue推荐使用这种方式的命名规则

首字母大写命名规则,如:MyComponent

props

props是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明 "prop"

6.2 局部组件

定义语法:new Vue({el:'#d1',components:{组件名:{配置选项}}})

bash 复制代码
<div id="app">
     <div>
         <!--title是用来传值的自定义属性,在自定义组件的props中定义 -->
         <button-counter title="测试"/>
     </div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //局部自定义组件
    components: {
    
        //组件名: {配置项}
        'button-counter':  {
            
            //用来传值的自定义属性
            props:['title'],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '<button @click="doClick">{{title}}:局部组件,点击计数器:{{count}}</button>',

            //注意:在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },
            
            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明
                    //的vue实例.
                    this.count++;
                }
            }
        }
    }
});

注:为什么在自定义组件中必须使用函数方式来什么data?

每个自定义组件使用函数方式来声明data,这样每个实例可以维护一份被返回对象的独立的拷贝,在定义自定义组件时,一定要注意这一点。

6.3 全局组件

将上面的局部组件修改为全局组件。

全局组件定义语法:Vue.component(组件名, 配置选项)

bash 复制代码
<div id="app">
    <div>
        <button-counter title="测试"/>
    </div>
</div>

//全局组件

bash 复制代码
Vue.component('button-counter', {

    //用来传值的自定义属性
    props:['title'],
    
    //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
    template: '<button @click="doClick">{{title}}: 全局组件,点击计数器:{{count}}</button>',

    //注意:在自定义的组件中需要使用函数来定义data
    data: function() {
        return {
            count: 0
        }
    },
    
    //定义响应事件函数
    methods: {
        doClick: function() {
            //注意此处this的作用返回是自定义组件,而不是上面声明
            //的vue实例.
            this.count++;
        }
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    }
});
  1. 自定义事件
    Vue自定义事件是为组件间通信设计, vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定

父Vue实例->子Vue实例,通过prop传递数据

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

7.1 子 -> 父

触发事件:$emit(eventName, 参数...)

注意:事件名必须用短横线命名方式。

bash 复制代码
<div id="app">
     <!--子组件到父组件-->
     <div>
         <button-counter v-on:click-test="clickTest"/>
     </div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log("test: "+ msg);
        }
    },

    //局部自定义组件
    components: {

        //组件名: {配置项}
        'button-counter':  {

            //用来传值的自定义属性
            props:['title'],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '<button @click="doClick">{{title}}:局部组件,计数:{{count}}</button>',

            //注意:在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },

            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.$emit("click-test","hello vue");
                }
            }
        }
    }
});

7.2 父 -> 子

注意:props定义属性时采用的是驼峰命名法,而在html中使用时需要对应的变为短横线命名法!!

bash 复制代码
<div id="app">
     <!--子组件到父组件-->
     <div>
             <!-- 注意此处将定义props时的驼峰命名法,变为了短横线命名法 !!! -->
             <button-counter title-desc="测试" />
     </div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log("test: "+ msg);
        }
    },

    //局部自定义组件
    components: {

        //组件名: {配置项}
        'button-counter':  {

            //用来传值的自定义属性
            //注意此处使用驼峰命名法 !!!
            props:['titleDesc'],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '<button @click="doClick">{{titleDesc}}:局部组件,计数:{{count}}</button>',

            //注意:在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },

            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.count ++;
                    console.log(this.titleDesc);
                }
            }
        }
    }
});
相关推荐
码蜂窝编程官方13 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
gqkmiss13 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃18 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰22 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye29 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm31 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子