vue使用之指令和修饰符

最新推荐文章于 2024-07-10 08:30:00 发布

我是一阵风xu

最新推荐文章于 2024-07-10 08:30:00 发布

阅读量720

点赞数

分类专栏： Vue 文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/qq_43537721/article/details/107237579

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue使用之指令和修饰符

vue使用之指令和修饰符

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（视图自动同步）

注意：

在vue中，不推荐直接手动操作DOM！！！
在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">
    <!-- 3. 在vue中使用数据 -->
    <h1>{{msg}}</h1>
    <span>{{msg}}</span>
    <span>{{car.name}}</span>
  </div>
  <!-- 1. 引入vue文件 -->
  <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">
  <!-- 插值表达式不能在属性中使用，只能在标签的内容中 -->
  <!-- 如果想在标签的属性中使用data中的数据，需要使用v-bind指令 -->
  <!-- v-bind:使用的频率是非常高的，vue中允许简写 : -->
  <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">
    <!-- 双向 -->
    <!-- 1. 视图发生了改变，让数据跟着变 -->
    <!-- 2. 数据发生了改变，视图跟着变 -->
    <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">
    <!-- v-text指令读取data中的数据，并且修改当前元素的innerText（textContent）属性 -->
    <div v-text="msg"></div>
    <div>大家好，我是{{msg}}</div>

    <!-- v-html指令，修改当前元素的innerHTML属性， 标签可以生效 -->
    <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指令

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

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<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>
    <!-- 控制元素的显示或者隐藏， 如果值是一个true，表示显示，如果是false，表示隐藏 -->
    <!-- v-show:通过css样式，display:block和display:none来控制 -->
    <p v-show="isShow">v-show</p>

    <h3>通过v-if显示隐藏</h3>
    <!-- v-if通过创建和删除元素来实现 -->
    <!-- 控制元素的显示或者隐藏，如果值为true，显示  false：隐藏 -->
    <p v-if="isShow">v-if</p>
    <!-- v-if和v-show的使用情况 -->
    <!-- 1. 如果一个元素需要频繁的显示或者隐藏，应该用 v-show -->
    <!-- 2. 如果一个元素要么显示，要么隐藏，应该用v-if -->
  </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">
    <!-- v-pre指令：  vue碰到了有v-pre指令的元素，会直接跳过，不会进行解析 -->
    <!-- v-pre: 如果我们确定这一段内容就是不需要解析的， 一篇文档 -->
    <p v-pre>哈哈哈哈哈哈，{{msg}}</p>

    <!-- v-once指令： 只会解析第一次，后续如果数据发生了改变，不会再次的解析 -->
    <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 在监听键盘事件时添加按键修饰符：

基本使用

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

.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"
表达式的类型：字符串、数组、对象（重点）
语法：

<!-- 1 -->
<!-- 重点 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>