Vue
关注
分享
扫一扫
记录学习实践Vue中的点点滴滴
小鬼buster
这个作者很懒，什么都没留下…
展开
-
vue3文件上传
可随意，通过获取组件toWake()方法即可。原创 2024-05-06 17:08:45 · 875 阅读 · 0 评论 -
vue中预览docx、xlsx、pptx、pdf
我这里多了个showPreview用来处理ppt的预览，因为他原生的ppt预览是增加一个弹窗，我需要当前页面展示，样式不符合要求，我就修改了,\node_modules\ranui\dist\components\preview\index.js 里对应第一个文件。前言：其实本来是要做全类型文件预览的，但是一直找不到合适的doc,xlx,ppt预览插件。要是有可以使用的，可以评论推荐给我。好像是pdf在预览时样式很奇怪：所以pdf我是通过ifream进行预览。我使用的node版本：v18.19.1。原创 2024-04-11 17:47:07 · 5601 阅读 · 1 评论 -
vue3使用计算属性代替过滤器，实现对显示文字字数的限制
template<template> <div> <span :title="item.name">{{sliceStr('无论多少字只显示5个字',5)}}</span> </div></template>scriptimport {computed} from "vue"export default { setup(props,context){ cons.原创 2021-07-28 14:26:40 · 874 阅读 · 0 评论 -
使用vscode图形化界面创vue3.0项目
先安装vue-cli，cmd打开终端vue --version输入检测版本指令,检测vue版本@vue/cli 4.5.6。如果你的版本低于这个，可以再使用npm install -g @vue/cli进行安装安装过程中如果你之前安装了较早版本的cli可能会出现安装不上的可能就可以使用npm uninstall -g @vue/cli 或 yarn global remove @vue/cli先卸载较早版本如果过程中还出现其他错误，可是尝试更新最新版的node...原创 2021-07-02 09:35:31 · 1915 阅读 · 0 评论 -
vue监听键盘输入，实现多个＜input＞接替输入
要实现一个类似手机上逐个输入验证码的组件，要求是输入一个数字自动跳转到下一个input，并且在重新输入时可以直接替换之前的数字，不用先删除，且逐个重新输入<html> <div v-for="(k,i) in list" :key="k.i"> <input type="text" class="split-input" v-model="k.value" @input="@input(item,i)" maxlength="2" ><span&g.原创 2021-08-20 10:54:26 · 522 阅读 · 0 评论 -
vue多级组件传值
const app = Vue.createApp({ data(){ return {house:'爷爷1'} }, provide:{ newHouse:'爷爷2' }, template: ` <div>此处显示爷爷1</div> <child :house="house" /> `})然后儿子组件不用作任何更改，直接在孙子组件里...原创 2021-07-20 10:11:21 · 805 阅读 · 0 评论 -
vue动态组件
component 元素可用来挂载不同的组件；使用 is 来动态挂载组件，注意要使用 v-bind，也就是 :is 。<button @click="blank==aa?blank='aa':blank='bb'"></button><component :is="blank"></component>组件一：const aa = {template:'<div>组件一</div>'}组件二：const bb = {te.原创 2021-07-20 09:31:46 · 92 阅读 · 0 评论 -
vue-find()
Find用来遍历查找数组元素，当找到符合条件的元素时，直接返回。所以Find元素只会返回符合条件的第一个元素。navigationList:['大学1','大学2','大学3','大学4','大学5']let newArr=[]newArr =this.navigationList.find(item=>item=='大学2')console.log(newArr)...原创 2021-03-19 11:26:08 · 2635 阅读 · 0 评论 -
pug在vue中的序列写法
ul - var n = 0 while n < 4 li= n++ ul - for (var x = 0; x < 3; x++) li itemol - var list = [1,2,3,4,5,6] each item in list li= itemhtml写法<ul> <li>0</li> <li>1</li> <li>2</li&g.原创 2020-10-31 11:05:55 · 166 阅读 · 0 评论 -
let 和 const 命令
Let命令ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。let在for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i);}// abc// abc// abc上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在原创 2020-10-15 11:17:36 · 163 阅读 · 0 评论 -
v-html属性
v-html：如果后端返回包含了标签的内容，可以转化为html页面的形式展示。原创 2020-10-10 08:30:59 · 643 阅读 · 1 评论 -
webstorm-vue运行相关指令
# 安装依赖$ npm install# 进入项目$ cd your-project-name# 开发版本打包并运行$ npm run dev# 线上环境整个项目打包 生成 dist 可以直接部署到服务器上的文件夹& npm run build# 引入jquery& npm install jquery --save...原创 2020-09-03 10:28:31 · 158 阅读 · 0 评论 -
Vue学习流程
如何定义一个基本的Vue代码结构 插值表达式 v-cloak v-html v-bind v-on原创 2020-07-30 10:36:37 · 198 阅读 · 0 评论 -
v-on学习
v-onVue中提供了v-on事件绑定机制<input type="button" value="按钮" ：title="mytitle + '123' " v-on：click="show">var vm= new Vue({ el:'#app', data:{ msg:'123', mytitle:'自定义标题' }, methods:{//这个methods中定义了当前Vue实例所有可用的方法 show：function(){ aler.原创 2020-07-21 09:13:31 · 137 阅读 · 0 评论 -
v-bind学习
v-bind用来提供绑定属性的指令，会把后面的内容当做js表达式来解析<input type="button" value="按钮" v-bind：title="mytitle + '123' ">可以被简写为：<input type="button" value="按钮" ：title="mytitle + '123' ">...原创 2020-07-21 08:53:26 · 107 阅读 · 0 评论 -
v-cloak、v-text、v-html相关理解
v-cloakv-cloak用来解决插值表达式闪烁的问题在data中渲染标签值时，遭遇慢网速环境，网页会在请求未完成时显示出插值表达式<p v-cloak>{{msg}}</p><style> {v-vloak}{ display:none; }<style>使用v-cloak会在请求结束后再显示需要表达的值 。v-textv-text默认v-text没有闪烁问题会覆盖元素中原本的内容，插值表达式只会替换自己的占原创 2020-07-21 08:46:08 · 121 阅读 · 0 评论 -
Vue——方法概述
components: { App }意思为引入组件，组件可以写在别的文件中，也可以写在本文件中，需要赋值给变量template: ‘<App/>’意思为替换挂载的元素为引入的组件，具体为何或如何写成一个标签参考vue官方文档-组件基础methodsmethods属性是定义方法的主要区域，在此属性中，可以定义各种自定义函数名的方法以及参数watchwatch用来监测Vue实例上的数据变动。scopedvue组件中，在style标签中有一个属性，叫做scoped原创 2020-07-04 13:03:16 · 189 阅读 · 0 评论 -
Vue生命周期
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed原创 2020-07-04 09:02:59 · 86 阅读 · 0 评论 -
vue生命周期详细理解
beforeCreate创建前状态数据观测和初始化事件还未开始；这个阶段的时候data和method都是拿不到的（通常在实例以外调用）；created创建完毕状态完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来；这个可以调用实例的数据和实例的方法（带异步数据请求的方法可以放在这里）；beforeMount挂载前状态在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载.原创 2020-07-13 15:46:19 · 226 阅读 · 0 评论 -
vue数据对象
data ：用于定义属性，实例中有三个属性分别为：site、url、alexa。methods ：用于定义的函数，可以通过 return 来返回函数值。{{ }}:数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。Html使用 v-html 指令用于输出 html 代码。属性HTML 属性中的值应使用 v-bind 指令。 <div v-bind:class="{'class1': use}"> v-bind:class 指令原创 2020-07-15 16:58:06 · 238 阅读 · 0 评论 -
vue.js目录结构
build：项目构建相关代码config：配置目录，包括端口号等。node_modules:npm加载的项目依赖模块。src：主要的开发目录其中包含的目录有：assets：放置一些图片。components：目录里面放了一个组件文件，可以不用。App.vue:项目入口文件，我们也可以直接组件写这里，而不使用components目录。main.js:项目的核心文件。static：静态资源目录，如图片、字体等。.xxxx文件：这是一些配置文件。inde原创 2020-07-15 16:11:45 · 164 阅读 · 0 评论 -
vue中的then方法
.then((data)=>{ })里的data是指接口成功返回的数据,包含请求头,请求体,等信息;这里的then()方法有两个参数,第一个是成功时的回调方法,默认给这个方法传递了成功的数据,另一个是失败的方法,以及失败的数据,第二个可选,<script>new Promise((resolve, reject) =>{ setTimeout(() =>{ //成功的时候调用resolve resolve('成功data')原创 2020-07-10 17:00:00 · 46186 阅读 · 0 评论 -
vue中swiper轮播图理解
<swiper :options="swiperOption"> <swiper-slide v-for="(item,index) in swperList" :key="index">//这里因为接收到的数据是键值对形式的//就使用swperList这个数组存储接收到的数据 <img class="" :src="item.img"/> </swiper-slide>//左右两个按钮 <div class="swiper-butto.原创 2020-07-10 17:12:27 · 714 阅读 · 0 评论 -
vue 设置 div 的背景图片
在 div 中绑定样式：<div class="login-container" v-bind:style="{backgroundImage:'url(' + bg + ')', backgroundRepeat:'no-repeat', backgroundSize:'100% 100%'}"></div>然后，在data中声明图片所在路径...原创 2020-07-13 11:07:15 · 3353 阅读 · 0 评论 -
前端学习之Vue - todoList（学习之后练个手）
这是我完成的样子先上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <script type="text/javascript" src="https:/原创 2020-06-24 11:15:11 · 206 阅读 · 0 评论