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

我不是女神ヾ 2024-04-01 08:40 90阅读 0赞

[14天阅读挑战赛][14]  
*努力是为了不平庸~*

**目录**

1.样式绑定

2. 事件修饰符

3. 按键修饰符

4. 常用控件

4.1 常用控件示例

4.2 修饰符

5. 自定义指令

钩子函数：

5.1 局部

5.2 全局

6. vue组件（重点）

7. 自定义事件

7.1 子 -> 父

7.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>
        
        <span style="font-size: 40px; color:blue;">aaa</span>
        <br/>
        
        <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>
    
    <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>

## 3. 按键修饰符 ##

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

#### 示例： ####

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

<table> 
 <thead> 
  <tr> 
   <th>按键别名</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.enter</td> 
   <td>回车确认键</td> 
  </tr> 
  <tr> 
   <td>.tab</td> 
   <td>TAB键</td> 
  </tr> 
  <tr> 
   <td>.delete</td> 
   <td>捕获 "删除" 和 "退格" 键</td> 
  </tr> 
  <tr> 
   <td>.esc</td> 
   <td>键盘左上角的Esc键，取消键</td> 
  </tr> 
  <tr> 
   <td>.space</td> 
   <td>空格键</td> 
  </tr> 
  <tr> 
   <td>.up</td> 
   <td>上</td> 
  </tr> 
  <tr> 
   <td>.down</td> 
   <td>下</td> 
  </tr> 
  <tr> 
   <td>.left</td> 
   <td>左</td> 
  </tr> 
  <tr> 
   <td>.right</td> 
   <td>右</td> 
  </tr> 
  <tr> 
   <td>.ctrl</td> 
   <td>ctrl键</td> 
  </tr> 
  <tr> 
   <td>.shift</td> 
   <td>shift键</td> 
  </tr> 
 </tbody> 
</table>

#### 示例：响应enter键事件 ####

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>

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

###  4.2 修饰符 ###

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.lazy</td> 
   <td>默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步</td> 
  </tr> 
  <tr> 
   <td>.number</td> 
   <td>将用户的输入值转为 Number 类型</td> 
  </tr> 
  <tr> 
   <td>.trim</td> 
   <td>自动过滤用户输入的首尾空格</td> 
  </tr> 
 </tbody> 
</table>

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

## 5. 自定义指令 ##

> Vue除支持内置的v-model/v-show等指令，还允许自定义指令。 vue2中，代码的复用和抽象的主要形式是组件，但在**有些情况下仍然需要对普通dom元素做底层操作，这种情况下需要自定义指令**。根据自定义指令的作用范围，可分为：全局、局部两种

#### **钩子函数：** ####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bind</td> 
   <td>只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置</td> 
  </tr> 
  <tr> 
   <td>inserted</td> 
   <td>被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)</td> 
  </tr> 
  <tr> 
   <td>update</td> 
   <td>所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)</td> 
  </tr> 
  <tr> 
   <td>componentUpdated</td> 
   <td>指令所在组件的 VNode&nbsp;及其子 VNode&nbsp;全部更新后调用</td> 
  </tr> 
  <tr> 
   <td>unbind</td> 
   <td>只调用一次，指令与元素解绑时调用</td> 
  </tr> 
 </tbody> 
</table>

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

>  *  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">
        
        <p v-color="red">我是自定义指令</p> 
    </div>

###  5.2 全局 ###

<div id="app">
        
        <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'
        }
    });

## 6. vue组件（重点） ##

###  6.1 组件介绍 ###

>  *  组件(Component)是Vue最强大的功能之一，
>  *  组件可以扩展HTML元素，封装可重用的代码
>  *  组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
>  *  组件可以分为全局组件和局部组件

**组件命名规则：**

>  *  短横线命名，如: my-component，vue推荐使用这种方式的命名规则
>  *  首字母大写命名规则，如：MyComponent

**props：**

>  *  props是父组件用来传递数据的一个自定义属性。
>  *  父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

###  6.2 局部组件 ###

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

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(组件名, 配置选项)

//全局组件
    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()
        }
    });

## 7. 自定义事件 ##

**Vue自定义事件是为组件间通信设计， vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定**

>  *  父Vue实例->子Vue实例，通过prop传递数据
>  *  子Vue实例->父Vue实例，通过事件传递数据

###  7.1 子 -> 父 ###

触发事件：$emit(eventName, 参数...)  
注意：**事件名必须用短横线命名方式。**

###  7.2 父 -> 子 ###

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

### 以上就是今天的分享，感谢大家的观赏！！！ ###

[14]: https://marketing.csdn.net/p/bb9f9e25975dba9f9b87f5272afded16