Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件

努力是为了不平庸~

1.样式绑定

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

几个常用的事件修饰符：

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

示例：

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

示例：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 利用下面的写法有同样的效果 -->
<input v-on:keyup.enter="submit">

示例