vue
riverrun_z
这个作者很懒,什么都没留下…
展开
-
怎么了解一个公共组件
pagination是elementUi的组件,之后去elementUi的组件找size-change这个方法就可以了。在这个公共组件ctrl+f搜索引用这个组件的方法。ctrl+p搜索这个公共组件aetl。再去搜索有这个东西的方法在哪里。原创 2022-09-08 12:13:35 · 220 阅读 · 0 评论 -
怎么把vue组件显示到页面
path是url上规定好的,component是第二步中import后面的Users。创建xx.vue文件后,先写上基本的架构。原创 2022-08-31 22:28:54 · 845 阅读 · 0 评论 -
[vue]路由传参的三种方式
路由传参原创 2022-06-15 09:34:33 · 1188 阅读 · 0 评论 -
MintUI的应用
MintUI在路由组件中的应用原创 2022-06-01 19:01:19 · 282 阅读 · 0 评论 -
怎么安装vue脚手架
前提:node版本在12-16需要中国镜像全局安装命令npm i -g @vue/cli查看vue版本vue --version原创 2022-05-30 12:00:15 · 71 阅读 · 0 评论 -
后台管理登陆
npm install 安装所有需要的依赖包./app.js根目录:http://127.0.0.1:8888/api/private/v1/接口 login查看工作区是否干净git status创建分支git checkout -b login查看当前分支git branch原创 2022-05-30 10:54:19 · 117 阅读 · 0 评论 -
vue中路由组件之间共享数据
步骤【store>index.js】在组件共享数据仓库储存自定义属性state: { imgBase:"http://www.codeboy.com:9999/" },【views>Index.vue】到路由组件写辅助函数import { mapState } from 'vuex'//import axios from 'axios'export default { // 辅助函数引入组件共享数据,由于是自动触发请求组件共享数据所以用computed原创 2022-05-28 21:11:05 · 380 阅读 · 1 评论 -
vue搜索框路由传参的方法
步骤路由【index.js】先设置单页技术,注意传参path是这样写的: “/products/:kw”,并配合props:true一起写 { path: '/products/:kw', props:true, name: 'products', component: () => import('../views/Products.vue'), },在要传参的复用组件【MyHeader.vue】写data保存一个kw的值```javascrip原创 2022-05-28 20:49:35 · 345 阅读 · 0 评论 -
Vuex中辅助函数的用法
App.vue<template> <div> <div>uname:{{ uname }}</div> <div>age:{{ age }}</div> <div>like:{{ like }}</div> <!-- 手动触发methods --> <button @click="change(777)">{{ $store.state.ag原创 2022-05-26 16:49:35 · 314 阅读 · 0 评论 -
vue的store组件数据共享属性
<template> <div> <div>num:{{ $store.state.num }}</div> <div>uname:{{ $store.state.uname }}</div> <div>isLogin:{{ $store.state.isLogin }}</div> <hr /> <!-- 这里实际是num(),由于是computed原创 2022-05-26 15:08:54 · 443 阅读 · 0 评论 -
全局状态管理(Vuex)的应用:组件之间怎么共享数据
App.vue<template> <div> <!-- 什么是Vuex:全局状态管理,意思就是组件间的数据共享--> <!-- store文件夹就是用来放组件间共享的数据的 --> <ten-com /> <elevent-com /> <button @click="addnum">num+1</button> <hr /> <!原创 2022-05-26 12:03:24 · 255 阅读 · 0 评论 -
vue中css和scss的外部引入的三种方法以及图片的引入
App.vue<template> <div> <img src="./assets/logo.png" alt="" /> <nine-com /> <eight-com /> <div class="danger">DANGER</div> <div> <p>rain</p> <p>sky</p&g原创 2022-05-26 10:38:26 · 2624 阅读 · 0 评论 -
【无标题】
App.vue<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/zhu">zhu</router-link> <router-link to="/sky">sky</rou原创 2022-05-25 17:53:03 · 55 阅读 · 0 评论 -
vue的单页引用技术,路由组件的引入以及传参和监听
路由组件douyu.vue<template> <div> <div> <!-- 切换到其他type的时候页面要刷新才能显示:因为 getData()在mounted中,它是显示的时候才会触发getDate,而你点击去页面的时候,已经显示了页面,只是换了参数,所以要刷新了才会触发getDate() 解决:用watch监听器axios接收到的参数 --> <router-link to="/">首页&原创 2022-05-25 17:22:33 · 277 阅读 · 0 评论 -
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/zhu“
错误原因:避免重复导航到当前路径<template> <div> <input type="text" placeholder="搜索" @keyup.enter="goSky" /> <router-view /> </div></template><script>export default { methods: { goSky() { // 第一次跳转成功,.原创 2022-05-25 14:34:41 · 1140 阅读 · 0 评论 -
vue的路由组件编程式跳转
<template> <div> <!-- 写路由系统的占位符 --> <router-view /> <!-- 路由组件的标签跳转 --> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <!-- 编程式跳转 -->原创 2022-05-25 14:03:49 · 282 阅读 · 0 评论 -
vue的路由组件的引入以及路由组件懒加载和router-link
App.vue<template> <div> <!-- 什么是路由系统:就是创建多页网站 原生开发是整个页面切换 现代开发方式是局部切换,全称为single page aplication单页应用--> <!-- 需求:根据路径切换页面显示的组件 view文件夹是用来放路由器的组件的--> <div id="box"> <!-- 什么是router-view就是路由的占位原创 2022-05-25 10:45:58 · 609 阅读 · 0 评论 -
vue的axios模块全局引入和axios中post传参的应用
<template> <div> <input type="text" placeholder="请输入您的用户名" v-model="uname" /> <br /> <input @keyup.enter="login" type="password" placeholder="请输入您的密码" v-model="upwd" /> <br />原创 2022-05-25 09:47:22 · 166 阅读 · 0 评论 -
Web前端命令集结
前提:安装了node.js和npmnode -vnpm -vvue create ap原创 2022-05-24 19:13:06 · 215 阅读 · 0 评论 -
vue的axios应用3并增加音频的应用事件
<template> <div> <!-- ref把变量和元素绑在一起,然后储存到$refs --> <audio ref="au"></audio> <template v-if="data"> <!-- playBan这里 单击时播放ar下面的banAudio这个音频 双击时播放selectAudio音频--> <div @click原创 2022-05-24 17:47:10 · 94 阅读 · 0 评论 -
vue的axios全局引入的应用
全部代码<template> <div> <!-- 9.如果请求到的data为true 则让它显示到页面--> <template v-if="data"> <!-- 10.先整体一个item的div,以此为基础遍历data的数据--> <div class="item" v-for="ar in data.subjects" :key="ar.id"> <!-- 11原创 2022-05-24 16:26:53 · 122 阅读 · 0 评论 -
vue的生命周期的应用
<template> <div> <!-- 点击事件触发axios请求getDate --> <!-- 利用生命周期组件一生下来就让让它显示到页面,这样不用点击 --> <!-- 也就是利用生命周期mmounted第一次显示到页面 --> <button @click="getDate">获取数据</button> <!-- 遍历数组 --> <!-- 这原创 2022-05-24 14:57:51 · 108 阅读 · 0 评论 -
[面试必考]组件的生命周期
组件部分<template> <div> <h1>Hello World!</h1> <!-- 点击时更新 --> <button @click="num++">{{ num }}</button> </div></template><script>/*面试必考题:生命周期有哪些阶段组件的生命周期有什么用:希望组件在显示时,自动发送请求就可以原创 2022-05-24 14:47:51 · 65 阅读 · 0 评论 -
vue过滤器filters的应用
<template> <div> <!-- 过滤器 处理服务器返还的数据 比如服务器返回0,页面显示应为女--> <p>{{ 0 | sex }}</p> <p>{{ 1 | sex }}</p> <p>{{ 2 | sex }}</p> <p>{{ 120000 | wan }}</p> <p>{{ 9原创 2022-05-24 13:05:50 · 56 阅读 · 0 评论 -
vue的axios应用2
<template> <div> <!-- 点击事件触发axios请求getDate --> <button @click="getDate">获取数据</button> <!-- 遍历数组 --> <!-- 这里的ar是随便起的 --> <!-- 注意要先包裹template 避免重复写v-if="data"来显示请求到的数据--> <template原创 2022-05-24 12:01:14 · 51 阅读 · 0 评论 -
vue的axios应用
获取数据<template> <div> <button @click="getDate">获取数据</button> <!-- template是虚拟容器 一个包围的作用 对css布局无影响 --> <template v-if="data"> <!-- 遍历data.data.archives中的数组 --> <div v-for="ar in data.dat原创 2022-05-24 10:02:46 · 55 阅读 · 0 评论 -
怎么使用axios
安装npm i axios vue-axios<template> <div> <button @click="a">获取数据</button> <!-- if判断null为false 此时刚开始p标签不加载 这样就不会不会出现刚打开时报错的情况,之所以报错是因为data为null值 这种机制也是懒加载 优点:1.加快页面首次显示2.节省首次页面显示时的dom数据--> <template v原创 2022-05-23 18:11:44 · 215 阅读 · 0 评论 -
怎么用vue中的默认插槽slot传参
组件部分<template> <div> <div class="six-com"> <div> <!-- slot是一个占位符 也叫默认插槽 使用时换成组件使用标签的内容 --> <slot /> </div> <div> <!-- 命名插槽原创 2022-05-23 16:44:44 · 4354 阅读 · 0 评论 -
vue中的data为什么是函数类型
组件部分<template> <div> <div class="five-com"> <button @click="num++">{{ num }}</button> </div> </div></template><script>export default { /*面试题:为什么data是函数类型?因为组件被复用的时候,每次调用原创 2022-05-23 16:03:09 · 76 阅读 · 0 评论 -
vue的组件怎么传参
组件部分<template> <div> <div class="three-com"> 我是{{who}},我在{{where}} </div> </div></template><script> export default { /*什么是props :相当于函数中的形参 注意形参要是字符串形式原创 2022-05-23 15:27:33 · 85 阅读 · 0 评论 -
怎么用vue写组件
components<template> <div> <div class="two-com"> 123 </div> </div></template><script> export default { }</script><style lang="scss" scoped>.原创 2022-05-23 14:43:03 · 401 阅读 · 0 评论 -
vue的指令的生命周期以及$refs的应用
<template> <div> <!-- 指令的生命周期 --> <input type="text"><br> <input type="text" v-focus ><br> <input type="text"><br> </div></template><script>原创 2022-05-23 11:21:41 · 288 阅读 · 0 评论 -
怎么用vue自定义指令
<template> <div> <!-- 高级操作:自定义指令:要求使用者熟练使用dom --> <!-- vue提供了很多指令 使用者也可以自己定义 --> <ul> <li v-color="'red'">skyline</li> <!-- v-green是自定义指令 --> &l原创 2022-05-23 10:29:06 · 79 阅读 · 0 评论 -
用vue写待办事件
<template> <div> <!-- 点击确定添加到数组元素 --> <!-- v-model双向绑定 --> <!-- 当按键抬起的时候触碰点击事件 语法keyup.enter--> <input @keyup.enter="some.push(kw);kw=''" type="text" placeholder="请输入待办事项" v-model="kw">原创 2022-05-23 09:38:43 · 304 阅读 · 0 评论 -
用vue实现购物车增删改
<template> <div> <table> <thead> <tr> <!-- 绑定全选事件 --> <th><input type="checkbox" @change="addAll" />全选</th> <th>商品名</th> <th>原创 2022-05-20 19:04:17 · 870 阅读 · 1 评论 -
用vue怎么获选表单元素信息
单选按钮值的获取<template> <div> <span>男</span> <input type="radio" name="sex" value="1" v-model="key"> <br> <span>女</span> <input type="radio" name="sex" value="0" v-model="key" >原创 2022-05-20 15:50:00 · 337 阅读 · 0 评论 -
什么是vue的双向绑定以及双向绑定的作用
<template> <div> <!-- 面试题:双向绑定是什么 --> <!-- 双向数据绑定是什么:就是用户修改表单元素时 自动更新绑定的数据 --> <!-- {{}} 这个是在双标签用的 input是单标签--> <!-- 斜杠是单标签的闭合语法,h5之前要加 之后不用加可以 --> <!-- $input是实时监听的 --> <!-- V-model的原理原创 2022-05-20 14:25:29 · 616 阅读 · 0 评论 -
用vue写表格实现数量的加减
<template> <div> <div class="app"> <table> <thead> <tr> <th>序号</th> <th>名称</th> <th>单价</th> <th>数量&l原创 2022-05-20 10:30:59 · 1305 阅读 · 0 评论 -
用vue写卡片切换效果
<template> <div> <div class="app"> <div id="tabs"> <div> <span v-for='(item,index) in items' :key="index" @click="current=index" :class="{active:current==index}" >{{item.title}}</sp原创 2022-05-20 09:37:06 · 1130 阅读 · 0 评论 -
用vue怎么传参
事件传参<body> <div id="a"> <h1>选择你喜欢的颜色:{{color}}</h1> <button @click="c">red</button> <button @click="c">green</button> <button @click="c">blue</button>原创 2022-05-18 13:34:26 · 639 阅读 · 0 评论