Vue的使用

最新推荐文章于 2024-10-18 15:58:53 发布
最新推荐文章于 2024-10-18 15:58:53 发布
阅读量1.5k 收藏 12
点赞数 22
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79614379/article/details/142318248
版权

文章目录

Vue的使用

Vue指令

Vue会根据不同的指令，针对标签实现不同的功能。

指令：带有 v- 前缀的特殊标签属性。例：<div v-html="str"></div>

v-html

作用：解析标签。直接使用{{}}无法解析内容里的标签，使用v-html指令可以很好的解决这个问题。

语法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div v-html="msg"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: `<a href="https://www.baidu.com">百度</a>`
      }
    })
  </script>
</body>

</html>

指令v-show与v-if

v-show：

  1. 作用：控制原始显示隐藏。
  2. 语法：v-show="表达式" 表达式值true显示，false隐藏。
  3. 底层原理：通过切换css的display: none来控制显示隐藏。
  4. 场景：频繁切换显示隐藏的场景

v-if：

  1. 作用：控制原始显示隐藏（条件渲染）。
  2. 语法：v-if="表达式" 表达式值true显示，false隐藏。
  3. 底层原理：根据条件判断，控制节点的创建和移除。
  4. 场景：要么显示，要么隐藏，不频繁切换的场景。

区别：

在这里插入图片描述
在这里插入图片描述

指令v-else和v-else-if

  1. 作用：辅助v-if进行判断渲染
  2. 语法：v-else v-else-if="表达式"
  3. 注意：需要紧挨着v-if一起使用

指令v-on

  1. 作用：注册事件（添加监听+提供处理逻辑）

  2. 语法：

    1. v-on:事件名="内联语句"

      <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button v-on:click="count++">+</button>
    <span>{{count}}</span>
    <button v-on:click="count--">-</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      },
    })
  </script>
</body>
</html>

    2. v-on:事件名="methods中的函数名"

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button v-on:click="fn">切换</button>
    <h1 v-show="flag">hello</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: true,
      },
      methods: {
        fn() {
          // 让提供的所有methods中的函数，this都指向当前实例
          this.flag = !this.flag
        }
      }
    })
  </script>
</body>
</html>

  3. 简写：@事件名="内联语句"

  4. 调用传参：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="fn(9)">牛奶9元</button>
    <button @click="fn(12)">咖啡12元</button>
    <h1>你有{{money}}元</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 250
      },
      methods: {
        fn(price) {
          this.money -= price
        }
      }
    })
  </script>
</body>
</html>

指令v-bind

  1. 作用：动态的设置html的标签属性（src、url、title）
  2. 语法：v-bind:属性名="表达式"
  3. 简写：:属性名="表达式"
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <img :src="list[index]" alt="">
    <button @click="index++" v-show="index<3">+</button>
    <button @click="index--" v-show="index>0">-</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index: 0,
        list: [
          '../图片/bear.jpg',
          '../图片/map.png',
          '../图片/太极.svg',
          '../图片/微信.svg'
        ]
      }
    })
  </script>
</body>
</html>

指令v-for

  1. 作用：基于数据循环，多次渲染整个元素（数组、对象、数字）

  2. 遍历数组语法：v-for="(item, index) in 数组"

    • item 每一项，index 下标

    • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in list">{{item}} - {{index}}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          'aaa',
          'bbb',
          'ccc'
        ]
      }
    })
  </script>
</body>
</html>
v-for中的key

语法：:key = "唯一标识"

作用：给列表项添加的唯一标识。便于Vue进行表象的正确排序复用。

v-for的默认行为会尝试原地修改元素（就地复用）

注：

  1. key的值只能是字符串或数字类型
  2. key的值必须具有唯一性
  3. 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

指令v-model

  1. 作用：给表单使用，双向数据绑定 —— 可以快速获取或设置表单元素内容。
    1. 数据变化，视图自动更新
    2. 视图变化，数据自动更新
  2. 语法：v-model = '变量'
应用于其他表单元素

常见的表单元素都可以用v-model绑定关联，快速获取或设置表单元素的值，它会根据控件类型自动选取正确的方法来更新元素。

  • 输入框：input:text——value
  • 文本框：textarea——value
  • 复选框：input:checkbox——checked
  • 单选框：input:radio——checked
  • 下拉菜单：select——value
    • option需要设置value值，关联选项
    • select的value值取决于选中的option的value值

指令v-bind

为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制。

操作css

语法：:class="对象/数组"

  1. 对象：键就是类名，值是布尔值。如果值为true，有这个类；如果值为false，则没有这个类。

    <div class="box" :class="{类名1: 布尔值, 类名2: 布尔值}"></div>

    适用场景：一个类名，来回切换

  2. 数组：数组中所有的类，都会添加到盒子上，本质就是一个class列表

    <div class="box" :class="[类名1, 类名2, 类名3]"></div>

    适用场景：批量添加或删除类

操作style

语法：:style="样式对象"

<div class="box" :style="{CSS属性名1: CSS属性, CSS属性名2: CSS属性值}"></div>

使用场景：某个具体属性的动态设置。

指令修饰符

通过 ”.“ 指明一些命令后缀，不同后缀封装了不同的处理操作 —— 简化代码。

  1. 按键修饰符

    @keyup.enter——键盘回车监听

    // 底层逻辑
fn(e) {
   if (e.key === 'Enter') {
       // 触发事件
   }
}

  2. v-model修饰符

    v-model.trim——去首尾空格

    v-model.number——转数字

  3. 事件修饰符

    @事件名.stop——阻止冒泡

    // 底层逻辑
fn(e){
    e.stopPropagation()
}

    @事件名.prevent——阻止默认行为

计算属性

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

  1. 声明再computer配置项中，一个计算属性对应一个函数。
  2. 使用起来和普通属性一样{{ 计算属性名 }}

computed计算属性与methods方法的区别

computed计算属性：

  1. 作用：封装了一段对于数据的处理，求得一个结果。
  2. 语法：
    1. 写在computed配置项中
    2. 作为属性，直接使用——this.计算属性 {{计算属性}}
  3. 缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算并再次缓存。

methods方法：

  1. 作用：给实例提供一个方法，调用以处理业务逻辑。
  2. 语法：
    1. 写在methods配置项中
    2. 作为方法，需要调用——this.方法名() {{f方法名()}} @事件名="方法名"

计算属性完整写法

计算属性默认的简写，只能读取访问，不能”修改“。

如果要”修改“，需要写计算属性的完整写法。

语法：

computed: {
    计算属性名: {
        get(){
            // 计算逻辑
            return 结果
        },
        set(修改的值){
            // 修改逻辑
    }
}

watch侦听器

作用：监视数据变化，执行一些业务逻辑或异步操作。

语法：

  • 简单写法：简单类型数据，直接监视

    data: {
    words: '苹果',
    obj: {
        words: '苹果',
    },
},
watch: {
    数据属性名(newValue, oleValue) {
        // 一些业务逻辑或异步操作
    },
    '对象.属性名'(newValue, oleValue) {
        // 一些业务逻辑或异步操作
    },
}

  • 完整写法：添加额外配置

    • deep: true对复杂类型深度监视
    • immediate: true初始化立刻执行一次handler方法
    data: {
    obj: {
        words: '苹果',
        lang: 'italy'
    }
},
watch: {
    数据属性名: {
        deep: true, // 深度监视
        handler (newValue) {
            // 逻辑代码
        }
    }
}

Vue生命周期

Vue的生命周期：一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：1. 创建 2. 挂载 3. 更新 4. 销毁

初始化渲染请求最早在创建阶段结束后发送。

dom操作最早在挂载阶段结束后开始。

生命周期函数（钩子函数）

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】—— 让开发者可以在特定阶段运行自己的代码。

在这里插入图片描述

created应用

created：响应式数据准备好，可以开始发送初始化渲染请求。

data: {
    list: []
},
created () {
    console.log('发送初始化渲染请求')
}
mounted应用

mounted：模板渲染完成，可以开始操作DOM。

data: {
    words: ''
},
mounted(){
    console.log('可以开始操作DOM')
}

页面刷新表单自动聚焦案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="words" id="">
  </div>
  <script src="./vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        words: ''
      },
      mounted() {
        document.querySelector('input').focus()
      }
    })
  </script>
</body>

</html>
青青青青草地
关注
Vue使用debugger
xyx107的博客
02-19 1万+
vue开发时会遇到需要调试代码的情况，使用debugger可以很方便的进行debug. 1.build/webpack.dev.conf.js 将devtool: '#cheap-module-eval-source-map',改为devtool: '#eval-source-map ', 2.在需要debug的地方加上“debugger” login({ commit }, dat...
vue使用markdown
Welcome to my csdn!
11-17 8833
1.使用markdown 首先下载mavon-editor npm install mavon-editor --save 然后再main.js中引入文件 // markdown import mavonEditor from 'mavon-editor'; import 'mavon-editor/dist/css/index.css'; Vue.use(mavonEditor); 在vue的template中添加以下组件 <mavon-editor v-model="context" :to
vue使用cesium
qq_41713136的博客
10-09 6977
cesium.js
vue使用jsonp
范天缘的博客
01-13 4194
第一步： 添加依赖npm install vue-jsonp --save 第二步： 在vue cli项目main.js中添加 import { VueJsonp } from 'vue-jsonp' Vue.use(VueJsonp） 第三步：直接使用 async getJsonp(){ const response = await this.$jsonp('xxx你的请求地址',{ callbackQuery:'callbackParam', //一定要加这两个参数
vue使用vConsole
qq_41227106的博客
06-23 6719
vue使用vConsole
vue 使用wangEditor
a314753967的博客
05-19 1万+
1、npm install @wangeditor/core @wangeditor/editor @wangeditor/editor-for-vue 2、封装组件 MyEditor.vue, （这里是通过props content 将展示内容传入） <template> <div> <div style="border: 1px solid #ccc; margin-top: 10px"> <!-- 工具栏 -->
vue使用CSS 变量
时光清浅处，一步一安然
08-04 6020
在我们知道什么是CSS变量之后，我们尝试把它在项目中运用起来，一些需要动态计算的值，我们就可以使用它快速的实现效果。以下为示例二，有的时候，一些属性我们可能需要根据一些条件计算得来，那么也能很好的去使用它。首先，我们要先知道什么是CSS变量，可以先看这篇。就能根据传入的值达到对应的效果呢？中书写的，那么如何不使用。......
Vue使用Emoji表情
m0_46627730的博客
12-17 5734
前言 最近做一个简单的聊天网页，既然是聊天了，自然不可避免需要用到表情包啦，其他那些好看的图片表情包我没时间去弄，所以就先弄个emoji的来玩玩。 准备表情包资源 可点击表情包网页去找自己喜欢的表情包来用 这次我用的是下面红色框住的那个表情包 使用表情包 初始化表情列表数据 const emojis = [ '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????'
vue使用vue-pdf
hzqzzz的博客
06-15 1万+
vue使用vue-pdf
vue使用正则校验
MYNAMEL的博客
06-26 1万+
使用正则校验的三种方法： 第一种： 写在方法里面进行调用。适用于比较复杂的。可重复应用 <!-- maxlength：限制输入字符串的长度 aaa:参数名 validator：后面跟的就是校验方法名 --> <a-input maxlength="50" v-decorator="['aaa', { rules: [{ validator: handleConfirmMoney,message:'请检查输入格式' }] }]" /> 校验方法：
vue使用echarts
Senora的博客
12-01 3601
在vue中使用echarts 1.先创建一个vue项目 2.在项目路径下执行以下命令 3.在main.js文件中引入echarts 4.在页面中使用
vue 使用AES 加密
qq_42108937的博客
06-15 8407
vue 使用AES 加密
vue使用百度地图（vue-baidu-map）
王等等csdn的博客
08-29 7222
vue使用百度地图，vue-baidu-map
vue使用jsMind（思维导图）
热门推荐
肖晗的博客
07-31 1万+
jsMind是一个显示/编辑思维导图的纯javascript类库，其基于html5的canvas进行设计。我们使用它可能需要在网页上单纯的使用这种图样的效果，而其他交互却是自定义的，我这边选择的是jsMind与网上的一个（右键菜单）。jsmind.menu.js中寻找到定义menu的地方，增加custom自定义属性注自定义的东西肯定需要自定义一个类型或者唯一性的key，让代码知道我点击的是哪一个，所以还需要处理点击事件。寻找对应点击事件与.在里面增加key属性。即和。...
记录一次vue使用jessibuca的视频插件
yumengtingkeai的博客
03-29 3276
jessibuca纯H5直流播放器,兼容几乎所有浏览器，可以运行在 PC、手机、微信中，无需额外安装插件。
jeecg3版本的vue，离线启动
sharesb的博客
10-16 324
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 694
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
原型链+instanceof+Vue底层原理
最新发布
m0_65985318的博客
10-18 742
在 Vue 组件中，render 函数是一个选项，它返回一个虚拟节点 (VNode)，或者是一个包含多个 VNode 的数组。
《vue leaflet学习实践笔记》
yk_ddm的博客
10-16 177
目录vue leaflet学习实践笔记 vue leaflet学习实践笔记
vue使用DPlayer
10-31
Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件。它可以帮助你在Vue.js应用程序中实现视频播放功能。你可以通过以下四个方面来了解Vue-DPlayer： 1. 安装Vue-DPlayer并简单使用。 2. 如何在Vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值