vue使用之指令和修饰符

拼搏现实的明天。 2023-02-24 15:28 16阅读 0赞

### vue使用之指令和修饰符 ###

*  vue使用之指令和修饰符
 *   *  1 vue介绍和使用
     *   *  1.1 库和框架的区别
         *  1.2 MVVM的概念
         *  1.3 vue基础使用
     *  2 vue指令
     *   *  2.1 v-bind指令
         *  2.2 v-model指令
         *  2.3 v-text与v-html指令
         *  2.4 v-on指令
         *  2.5 v-for指令
         *  2.6 v-if 和 v-show指令
         *  2.7 v-pre与v-once指令
     *  3 vue修饰符
     *   *  3.1 事件修饰符
         *  3.2 按键修饰符
         *  3.3 样式处理-class和style

# vue使用之指令和修饰符 #

## 1 vue介绍和使用 ##

vue是一套用于构建用户界面的**渐进式框架**。

### 1.1 库和框架的区别 ###

（1）库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能。

*  代表：jQuery
 *  使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。

（2）框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码。

*  框架规定了自己的编程方式，是一套完整的解决方案
 *  使用框架的时候，由框架控制一切，我们只需要按照规则写代码

**区别：**

*  使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法
 *  使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。

### 1.2 MVVM的概念 ###

1.MVC是一种软件架构模式，也有人叫做设计模式 服务端渲染。

*  M: Model 数据模型（专门用来操作数据，数据库的CRUD）
 *  V：View 视图（对于前端来说，就是页面）
 *  C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）

2.MVVM，一种更好的UI模式解决方案

*  M：model数据模型
 *  V：view视图
 *  VM：ViewModel 视图模型
 *  MVVM通过`数据双向绑定`让数据自动地双向同步
    
     *  V（修改视图） -> M（数据自动同步）
     *  M（修改数据） -> V（视图自动同步）

**注意：**

1.  在vue中，不推荐直接手动操作DOM！！！
2.  在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

### 1.3 vue基础使用 ###

安装：`npm install vue`  
使用代码如下：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      <div id="app">
        
        <h1>{ { msg}}</h1>
        <span>{ { msg}}</span>
        <span>{ { car.name}}</span>
      </div>
      
      <script src="./node_modules/vue/dist/vue.js"></script>
    
      <script>
        //当我们引入了vue.js文件的时候， 暴漏了一个全局的构造函数 Vue
        //2. 创建一个vue实例， 需要指定el 和 data 
        const vm = new Vue({ 
          el: '#app', // el：指定了vue的管理边界，指定那一块内容是vue来管理
          data: {   // data：用于指定vue中使用的数据
            msg: 'helle vue',
            car: { 
              name: '法拉利',
              price: 500
            }
          }
        })
      </script>
    </body>
    </html>

## 2 vue指令 ##

指令 (Directives) 是带有 v- 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性；指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为

### 2.1 v-bind指令 ###

插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令。

<div id="app">
      
      
      
      <h1 :title="msg">我是一个大标题</h1>
      <img :src="imgUrl" alt="">
    </div>
    
    <body>
      <script src="vue.js"></script>
      <script> const vm = new Vue({ el: '#app', data: { msg: 'hello vue', imgUrl: '01.gif' } }) </script>
    </body>

### 2.2 v-model指令 ###

在表单元素上创建双向数据绑定：

*  双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
    
     *  数据的改变会引起DOM的改变
     *  DOM的改变也会引起数据的变化

<div id="app">
        
        
        
        <input type="text" v-model="msg">
        <p>{
       {msg}}</p>
      </div>
    
      <script src="vue.js"></script>
      <script> var vm = new Vue({ el: '#app', data: { msg: 'hello vue' } }) </script>

### 2.3 v-text与v-html指令 ###

<body>
      <div id="app">
        
        <div v-text="msg"></div>
        <div>大家好，我是{
       {msg}}</div>
    
        
        <div v-html="text">111</div>
      </div>
    
      <script src="vue.js"></script>
      <script> var vm = new Vue({ el: '#app', data: { msg: '<h3>hello vue</h3>', text: '<a href="http://web.itcast.cn?document.cookie">点我，看片</a>' } }) </script>
    </body>

### 2.4 v-on指令 ###

绑定事件：

<a v-on:click="doSomething"></a>
    
    <a @click="doSomething"></a>

有关事件修饰符的部分参考本文第三部分。

### 2.5 v-for指令 ###

作用：基于源数据多次渲染元素或模板块

<div v-for="item in items">
      {
       { item.text }}
    </div>
    
    
    <p v-for="(item, index) in list">{
       {item}} -- {
       {index}}</p>
    
    <p v-for="(item, key, index) in obj">{
       {item}} -- {
       {key}}</p>
    <p v-for="item in 10">{
       {item}}</p>

**key属性：**  
使用 v-for 的时候提供 key 属性，能够提升列表渲染的性能；使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

### 2.6 v-if 和 v-show指令 ###

<body>
      <div id="app">
    
        <h3>通过v-show显示隐藏</h3>
        
        
        <p v-show="isShow">v-show</p>
    
        <h3>通过v-if显示隐藏</h3>
        
        
        <p v-if="isShow">v-if</p>
        
        
        
      </div>
    
      <script src="vue.js"></script>
      <script> var vm = new Vue({ el: '#app', data: { msg: 'hello vue', isShow: true } }) </script>
    </body>

### 2.7 v-pre与v-once指令 ###

<div id="app">
        
        
        <p v-pre>哈哈哈哈哈哈，{
       {msg}}</p>
    
        
        <p v-once>哈哈哈哈哈哈，{
       {msg}}</p>
    
        <p>哈哈哈哈哈哈，{
       {msg}}</p>
      </div>

## 3 vue修饰符 ##

### 3.1 事件修饰符 ###

*  `.stop` 阻止冒泡，调用 event.stopPropagation()
 *  `.prevent` 阻止默认行为，调用 event.preventDefault()
 *  `.capture` 添加事件侦听器时使用事件`捕获`模式
 *  `.self` 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
 *  `.once` 事件只触发一次

### 3.2 按键修饰符 ###

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符：

*  基本使用

.enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right

*  支持直接写keyCode

// 缺点：不知道对应的键盘码，可阅读不高
    <input type="text" @keydown.113="fn" v-model="msg">

### 3.3 样式处理-class和style ###

*  使用方式：`v-bind:class="expression"` or `:class="expression"`
 *  表达式的类型：字符串、数组、对象（重点）
 *  语法：

<div v-bind:class="{ active: true }"></div> ===>
    <div class="active"></div>
    
    
    <div :class="['active', 'text-danger']"></div> ===>
    <div class="active text-danger"></div>
    
    
    <div v-bind:class="[{ active: true }, errorClass]"></div> ===>
    <div class="active text-danger"></div>
    
    
    --- style ---
    
    <div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
    
    
    <div v-bind:style="[baseStyles, overridingStyles]"></div>