刚开始入手Vue.js, 在获取select选中Option的Text的时候,首先想到的就是DOM操作,但是感觉这样很不Vue.后来打开调试器,调试了一下,发现:
在实际开发中，比如我们用到了视频，后台只是给我们返回一个地址，我们这边要如何把视频的第一帧显示出来呢 <template><div style="margin-top:50px"><!-- <video :src="videoSrc" id="videoPlay" height="414" width="720" style="margin-top:50px" controls="controls">您的浏览器不支持 video 视屏播放。</video> --><video :src="videoSrc" controls style="width:1000px;"></video><div><img :src="imgSrc"></div><div><butt...
<el-table-columnlabel="用户类型"width="180"><template slot-scope="scope"><el-select v-model="scope.row.roleID"placeholder="请选择" @change="changeRole($event,scope)"><el-optionv-for="item in roles":key="item.value":label="item.label":value="item.value"></el-option></el-select></template> </el-table-column>我想在触发下拉框change事件时获取到scope里的值，因为el-select的change事件默认有个回调参数，就是...
播放器播放时间的dom结构: <div class="progress-wrapper"><span class="time time-l"></span><div class="progress-bar-wrapper"></div><span class="time time-r"></span></div>data里需要有个变量表示当前时间 currentTime? data() {return {songReady: false,currentTime: 0,};}, 有了变量之后如何修改呢？当歌曲播放的时候，audio标签会派发一个事件timeupdate,这个事件的回调函数起名为updateTime。 然后在method里定义这个...
1、script：import { onMounted, getCurrentInstance, ref } from vue2、setup：const { proxy } = getCurrentInstance();3、页面加载打印：onMounted(()=>{console.log(proxy);console.log(proxy.$router.options.routes); });
前言 Vue项目开发过程中，有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。梳理出如下请求方法： 父组件访问子组件：$children 或者 $refs子组件访问父组件：$parent子组件访问根组件（通过 new Vue 创建的根 Vue 实例）：$root 父组件访问子组件 使用 $children 在父组件中使用 this.$children 拿到的是一个数组类型，它包含所有子组件实例。 <div id="app"><cpn></cpn><cpn></cpn><button @...
一、v-model 表单输入绑定使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。<template> <div> <input class="login-input" type="text" v-model="username" placeholder="请输入账号"> <input class="login-input" type="password" v-model="password" placeholder="请输入密码"> <div class="login-button" @click="login" type="submit">登陆</div> </div> </temp...
方法一： 在插值表达式中用$store.state.count来获取 方法二： 在computed中定义一个方法，并return出state对象中的属性及其状态 方法三： 利用vuex的mapState方法来获取vuex的state对象中属性
VUE.JS是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，实现了MVVM(Model-View-ViewModel的)。 在使用VUE3中不可避免需要调用后台API获取JSON数据供前台使用，而且还需要跨域访问，如何实现呢？本文开门见山，直接给出解决方案。 也是三步曲： 第一步：首先在配置vue.config.js文件中添加如何代码 module.exports = { /*与NG...
在实际开发中，我们经常需要获取表单中输入的内容，比如注册，登录等等 vue 中可以使用$refs获取表单内容，也可以使用v-model双向绑定数据来获取 一、使用$refs获取表单内容 <template><div> <input type="text" ref="name"> <button @click="getInputValue">获取表单内容</button></div> </template> <script>export default {data(){return{}},methods:{getInputValue(){var n=this.$refs.name.value;console.log(n)}}} </script...
前言：在我们实际开发中，前端和后端是同时进行开发的，我们不可能在开发的初期就要求后端立即写好接口，所以这个时候我们使用mockjs来模拟接口获取数据，这也是现在流行的开发模式，前后端分离 1.安装依赖 npm i -D mockjsnpm i -D json5在vscode扩展中安装JSON5 syntax 2.新建mock文件夹且在文件夹新建index.js和userInfo.json5 index.js内容 const fs = require('fs') const path = require('path') const JSON5 = require('js...
// 注意 package.json 文件无需 export，直接 import import config from '../package.json'// 获取版本号 let version = config.version; // 获取插件vue-router 的版本号 let baseVersion = config.dependencies['vue-router']; 知识扩展 一、package.json 中 ~ 和 ^ 的区别 "devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.3","@vue/cli-service": "~4.5.0","babel-eslint": "^10.2.3"...
vue项目如何全局获取jenkiens参数 问题场景：问题描述：原因分析：解决方案： 问题场景： 提示：这里简述项目相关背景： 例如：项目场景：在vue项目接入sentry监控系统的时候，想让release版本号随着需求迭代版本命名，那这时候就需要获取jenkins构建时选取的分支名（分支名都是按照版本迭代命名的，例如：release-1.6.0）问题描述： 在用shell语言–branch=${Branch}传递参数时， 项目里面只在webpack.prod.conf.js可以获取值，其...