vue
Mrs彬
带你上路,直到入坑
展开
-
06 vue中is属性的使用及jquery的使用
一、is属性可以解决固定搭配问题is.vue<template> <div> <h4>this is isComponents</h4> <!-- is可以解决固定搭配问题 --> <ul> <li is='vone'>111</li> </ul></div></template> <script> con原创 2021-05-29 17:16:18 · 169 阅读 · 0 评论 -
04 非父子组件传值
一、非父子组件传值要点:1、需要在全局vue的实例的原型上挂在一个新的vue实例2、挂载完之后,就可以让所有的组件通过原型上的vue实例实现一个连接的桥梁具体实现1、发送数据者 使用原型上的vue实例的 $emit 自定义事件2.、接受数据者 使用原型上的vue实例的 $on 监听main.js中://单一事件管理 挂载到全局Vue.prototype.Event=new Vue()三个组件 a.vue b.vue c.vue index.vueindex.vue是a、b、c的原创 2021-05-27 23:00:27 · 279 阅读 · 0 评论 -
03 子组件如何调用父组件的方法
1、子组件无法直接修改父组件的值2、需要子组件主动调用父组件的方法,让父组件自己去修改自己的值child.vue<template> <div class="child"> <h5>子组件</h5> <button @click="addn">调用父组件的方法修改父组件的值</button> </div></template><script>原创 2021-05-27 21:34:58 · 203 阅读 · 0 评论 -
02 子组件传值给父组件
一、要点1)子组件需要主动发送给父组件 (通过$emit('自定义事件’,‘需要传递的值’))2)父组件内的子组件标签监听子组件的事件子组件 child.vue<template> <div class="child"> <h5>子组件</h5> <p>{{msg}}</p> <button @click="send">发送给父组件</button>原创 2021-05-27 21:22:48 · 323 阅读 · 0 评论 -
05 slot 插槽
一、slot插槽介绍1、如果你想在标签组件内展示其他内容。这个时候你就需要使用插槽slot插槽特点:1、如果组件内没有内容就不会显示2、如果有内容,就直接展示在插槽slot的位置3、如果有什么内容,全部展示在slot...原创 2021-05-27 20:33:04 · 103 阅读 · 0 评论 -
01父传子
一、父传子1、父传子是单向数据流2、默认:父变,子变;子变,父不变,还要报错。 80%3、子组件定义了一个属性,接收了父组件传递过来的值,这时候,父变,子不变;子变,父不变,但是不报错。4、如果想要实现父变,子变;子变,父变,还不报错,那么就传递一个json数据过来。20%child.vue<template> <div class="child"> <h5>子组件</h5> 父组件的传过来的值: <in原创 2021-05-25 20:49:18 · 293 阅读 · 0 评论 -
如何安装和vue-cli4.x
一、如果你已将安装了全局的vue-cli2.x你需要以下操作1、卸载vue-cli 2.xnpm uninstall vue-cli -g2、检查时候已经卸载vue -V 如果出现不是内部或外部命令证明卸载成功3、安装(创建vue3.x项目) 打开终端: 1)安装webpack-cli (因为vue是基于webpack的) npm install webpack-cli -g 2)安装vue-cli4.x脚手架 npm install @vue/cli -g 3、检测vue是否原创 2021-05-22 17:16:49 · 338 阅读 · 0 评论 -
Ant Design-vue使用及内容子组件如何控制菜单切换
一、安装Ant Design-vuenpm install ant-design-vue --save二、引入mian.js引入//全局样式import 'ant-design-vue/dist/antd.css';//按需引入import {Layout, Menu} from 'ant-design-vue' Vue.use(Menu) Vue.use(Layout)也可以使用babel-plugin-import进行按需加载三、新建四个组件(一个父组件,三个子组件)cons原创 2021-04-29 20:40:45 · 2160 阅读 · 0 评论 -
better-scroll在vue中实现上拉刷新,下拉加载
一、打开vue项目启动,打开终端,先下载两个插件npm install better-scroll --savenpm install vant --save二、在mian.js中按需全局引入 vant 的Loadingimport Loading from 'vant/lib/Loading';import 'vant/lib/Loading/style';Vue.use(Loading)console.log('------------------------------')三、注册L原创 2021-04-27 19:56:44 · 120 阅读 · 0 评论 -
vue的computed计算属性和请求本地json文件
一、下载axiosnpm install axios --save二、在src内新建一个api文件夹 并在api文件夹下新建一个专门用来请求的文件requestList.jsrequestList.jsimport request from "@/utils/request" //此文件是设置请求拦截和响应拦截(可以没有)import axios from "axios"const baseUrl= '/api'export default { getComputed(data){原创 2021-04-20 20:36:08 · 723 阅读 · 0 评论 -
vue 如何实现页面切换
一、确保计算机已经安装了nodejs环境1)window + r 输入cmd 打开终端2)在终端中输入命令:node -v 出现:v12.14.0 版本号(v+数字)证明已将安装成功二、首次安装vue-cli 时需要全局安装脚手架在终端中输入:npm install vue-cli -gvue init weabpak 项目名cd 项目名 输入npm install启动:npm run dev三、在 APP.vue 组件内定义<template> <di原创 2021-04-18 14:07:39 · 6188 阅读 · 2 评论 -
问题集合1:vue网络接口请求限制,不能正常显示图片字段值 403 forbidden 的解决方案
使用缓存方式将获取的请求图片的地址进行缓存, 在图片地址前面加上‘ https://images.weserv.nl/?url= ’此方法用来解决缓存图片的地址getRealImage(url){ if (url !== undefined) { let u = url.substring(7); return 'https://images.weserv.nl/?url=' + u; }原创 2021-04-14 19:58:35 · 625 阅读 · 0 评论 -
vue项目如何打包部署到后端
一、项目完善之后需要注意1)注意axios的请求代理前缀 置为‘’ // 配置代理 proxyTable: { "/api":{ target:'http://localhost:3000', changeOrigin:true,//允许 pathRewrite:{ //重写 把当前链接地址的api设置成 '' url地址上就不会出现http:/api/banner "^/ap原创 2021-04-04 23:47:30 · 4066 阅读 · 0 评论 -
vue-Element的单选框一选全选问题
<template> <div class="login"> <template> <el-table prop='id' :data="tableData" style="width: 100%"> <el-table-column label="日期"原创 2021-03-25 08:54:21 · 2335 阅读 · 0 评论 -
vue路由传参
歌曲列表页面 <li v-for="(item,index) in songs" v-if="index<20" is="router-link" :to="'/playUrl/'+item.id" :key="index"> </li>路由配置 { path:'/playUrl/:id', component:pla原创 2021-01-25 20:41:22 · 183 阅读 · 0 评论 -
自定义表单获取焦点指定(局部指令)
<input type=“text”v-focus = searchFocusv-model=“searchValue”@input=“changeValue”placeholder=“搜索歌曲、歌手、专辑”>原创 2021-01-25 20:39:18 · 269 阅读 · 0 评论 -
vue使用vant UI库
vue使用vant1)下载# Vue 2 项目,安装 Vant 2.x 版本:npm i vant -S# Vue 3 项目,安装 Vant 3.x 版本:npm i vant@next -S2)在vue中 main.js 引入// 引入vant库import Vant from “vant”;// 引入样式import “vant/lib/index.css”// 使用vantVue.use(Vant)...原创 2021-01-25 20:37:45 · 144 阅读 · 0 评论 -
vue组件传参
一、父传子父组件<template> <div class="parent"> <div class="parent1"> <h2>父子组件传值</h2> <p>这是父组件</p> <h1 v-for="(item,index) in parentMsg" :key="index">{{item.title}}&原创 2021-01-25 20:34:29 · 78 阅读 · 0 评论 -
vue的双向数据绑定原理
一、绪论相信大多数前端开发者在找工作的时候都会问到vue的双向数据的绑定原理很多人都会说:vue内部使用es5的方法 Object.defineProperty()的方法进行属性拦截,把data对象的每个数据的读写通过调用getter和setter方法,当数据发生改变时,通知视图更新更新。显然这个是知道的只是大概2、分析mvvm所谓的 mvvm双向数据绑定,就是通过数据改变通知视图更新,...原创 2019-10-13 15:09:46 · 141 阅读 · 0 评论