vue添加背景音乐
vue添加背景音乐需要用到HTML中的标签参考手册：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp*在iOS端autoplay不会起作用，因为iOS系统屏蔽了页面加载自动播放之类，所以我们需要在页面加载的时候调用一次play方法，具体play方法放在哪里就随意了，因为我的页面有wx.ready方法所以我就放在那里了<audi...
2024-01-10
vue--数据显示模版上
{{msg}} v-text v-html 首先需要知道挂载点：是index.html文件下的一个dom节点模板：挂载点里的内容，也就是模板内容。组件：页面上的某一部分内容。当我们的项目比较大时，可以将页面...
2024-01-10
将vue加载蒙版函数化
将vue加载蒙版函数化实现效果创建londing.js函数文件londing.js中 import {Loading} from 'element-ui';let loadingInstance;export function loading_start() { loadingInstance = Loading.service({ fullscreen: true, lock: true, text: '数 据 加 载 中，请 稍 等 ！', spinner: 'el-icon-...
2024-01-10
vue配置手机通过IP访问电脑开发环境
vue配置手机通过IP访问电脑开发环境config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwritten by process.env.HOST port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: fa...
2024-01-10
vue(七)
给文件夹取别名通过import导入的时候可以直接应用别名而通过非import的方式引入的时候，要在别名前面加一个"~"PromisePromise是ES6的新增内容通过setTimeout模拟异步请求一秒钟后打印Hello WorldPromise的简单体会通过promise可以将回调地狱转化为链式编程，结构更清晰，代码更优雅Promise讲解Promise的三...
2024-01-10
vue系列
vue学习（一）ES6常用语法vue学习（二）Vue常用指令vue小练习--音乐播放器vue学习（三）组件传值vue学习（四）插槽vue学习（五）生命周期 的钩子函数vue学习（六）异步组件加载vue学习（七）refs的使用vue学习（八）nextTick[异步更新队列]的使用和应用vue学习（九）对象变更检测注意事项vue学习（十...
2024-01-10
vue变异方法
push() 往数组最后面添加一个元素，成功返回当前数组的长度 pop() 删除数组的最后一个元素，成功返回删除元素的值 shift() 删除数组的第一个元素，成功返回删除元素的值unshift() 往数组最前面添加一个元素，成功返回当前数组的长度 splice() 有三个参数，第一个是想要删除的元素的下...
2024-01-10
vue简易记事本开发详解
本文实例为大家分享了vue实现易记事本的具体代码，供大家参考，具体内容如下css代码#todoapp { margin: 0 400px; width: 600px; background-color: gray; text-align: center;}.content { margin:0px 100px;}.todo { margin: 10px; text-align: left; background-color:green;}.btn { float: right;...
2024-01-10
vue入门一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style type="text/css"> .box{ ...
2024-01-10
vue实现手风琴效果
本文实例为大家分享了vue实现手风琴效果的具体代码，供大家参考，具体内容如下利用鼠标移入移出事件实现内容出现隐藏用到的知识点：1.@mouseover 鼠标移入事件2.@mouseout 鼠标移出事件3.v-if 条件渲染<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 简单样式设置 --> <style type="text/css"...
2024-01-10
vue的工作机制
Vue工作机制：1、 new Vue()的时候执行了一个init函数2、 $mount，在main.js中3、 Compile含有编译器的话就执行，没有的话就不执行，字符串写的模板需要编译，直接用template标签写的就不用编译器，平时使用的没有编译器，vue.js里边有编译器4、 Render函数，渲染函数，上边的template转换成了render函数，所以...
2024-01-10
vue体验
#################################安装：1，安装node.js ：Javascript运行环境，其中的npm就是Node.js下的包管理器。2，命令行安装cnpm ：npm install -g cnpm --registry=https://registry.npm.taobao.org3，命令行vue的脚手架vue-cli：npm install -g vue-cli4，vscode软件安装：5，vscode中安装插件：Vetur插件脚手架使用：1，创建vue项...
2024-01-10
vue备用
handleCheck (item) { if (item.isChecked) { this.checkData.push(item.id) this.checkData = _.uniqWith(this.checkData, _.isEqual) } else { this.checkData = _.remove(this.checkData, i => i !== item.id) } },<template slot=...
2024-01-10
vue简易记事本开发详解
本文实例为大家分享了vue实现易记事本的具体代码，供大家参考，具体内容如下css代码#todoapp { margin: 0 400px; width: 600px; background-color: gray; text-align: center;}.content { margin:0px 100px;}.todo { margin: 10px; text-align: left; background-color:green;}.btn { float: right;...
2024-01-10
Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue提供了vuex。本文将详细介绍Vue状态管理vuex引入 当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果有一处需要被多个实例间共享的状态，可以简单地通...
2024-01-10
Vue状态管理：vuex基础
还是像以前一样用一个简单的案例来解释vuex首先，新建一个模板demo1 vue init webpack-simple demo我们需要两个组件：一个输入组件和一个显示组件在src文件夹中新建一个components文件夹，添加一个showInfo.vue1 <template>2 <h1>{{ msg }}</h1>3 </template>4 5 <script>6 export default {7 props: ['msg']8 }9 </script>然后，...
2024-01-10
vuex实现简单的购物车功能
本文实例为大家分享了vuex实现购物车功能的具体代码，供大家参考，具体内容如下文件目录如下：购物车组件<template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list /> </div> <h2>已选商品</h2> <div class="shop-cartbox"> <shop-cart /> ...
2024-01-10
vuex的数据渲染与修改浅析
1.vuex是什么？用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是”你想要在不同的组件中使用同一份数据，并且在不同的组件中都可以实时修改它并...
2024-01-10
Vue之Vuex
Vue之VuexVue全家桶vue + vue-router + vuex 更能体现vue的mvvm设计模式，其中：vuex相当于mvvm中的View视图vue-router相当于ViewModel控制器vuex相当于Model数据模型vue全家桶，基本上网页上什么都可以实现为什么要使用Vuex解决组件间传值的复杂性，vuex好比一个商店任何组件都可以进去拿东西安装Vuex官网npm instal...
2024-01-10
vuex的数据渲染与修改浅析
1.vuex是什么？用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是”你想要在不同的组件中使用同一份数据，并且在不同的组件中都可以实时修改它并...
2024-01-10
vue中 Vuex
一、什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态，其实指的是实例之间的共享数据，Vuex是管理应用中不同Vue实例之间数据共享的工具。下图是Vuex官方提供的对于状态管理...
2024-01-10
vuex实现简单的购物车功能
本文实例为大家分享了vuex实现购物车功能的具体代码，供大家参考，具体内容如下文件目录如下：购物车组件<template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list /> </div> <h2>已选商品</h2> <div class="shop-cartbox"> <shop-cart /> ...
2024-01-10
vuex修改数据 视图没有更新?
为什么我数据改变了 视图没有更新数据是通过v-bind传递给子组件的组件详细代码回答：你说的视图没更新指的是你的 showAction 和 hideAction 方法没生效么因为你的 this.list 是 computed 的数据，所以我觉得你最好不要直接改 this.list 的数据，而是通过提交 mutation 或者 action 去改vuex store 中的数据，然后再通过 comp...
2024-02-22
Vue2事件总线第二个电话
工作后我有一个嵌套的组件和子组件应接收来自主实例的参数，但问题是，我有打电话给事件两次获得参数。Vue2事件总线第二个电话的index.html<div id="app"> <button @click="displayComponent">Display</button><br/><hr/> {{ message }} <mycomponent v-if="showComponent" @hide="hideComponents"></mycomponent> </div> cod...
2024-01-10
关于 vue2.x 的 $attrs 和 $listeners
$attrs$attrs 用于多层次组件传递参数（组件标签的attribute，class和style除外），爷爷辈组件向孙子辈组件传递参数（注：参数不能被父辈prop识别，一旦被父辈prop识别且获取，则孙子辈组件不能获取到该参数）写法如下：（注：v-bind不能用简写 :）<grand-son v-bind="$attrs" />下面举个栗子：爷爷（GrandFather...
2024-01-10
vue2遍历数组形成表格？
这是我写到table的vue<table border="1"> <tr> <th rowspan="2">序号</th> <th rowspan="2">材料题名</th> <th rowspan="3">材料形成时间</th> <th rowspan="2">页数</th> <th rowspan="2...
2024-02-26
vue2源码浏览分析02
1.组件初始化方法 init Vue.prototype._init = function (options) { /* istanbul ignore if */ if ("development" !== 'production' && config.performance && perf) { perf.mark('init'); } var vm = this; //设置组件唯一ID vm._uid = uid++; //设置是vue对象 v...
2024-01-10
Vue(v2.6.11)万行源码生啃，就硬刚！
前言源码阅读可能会迟到，但是一定不会缺席！众所周知，以下代码就是 vue 的一种直接上手方式。通过 cdn 可以在线打开 vue.js。一个文件，一万行源码，是万千开发者赖以生存的利器，它究竟做了什么？让人品味。<html><head></head><body><div id="app">{{ message }}</div></body><script src="https://cdn.jsdelivr.net/npm...
2024-01-10
vue2警告
vue.esm.js?65d7:558 [Vue warn]: You may have an infinite update loop in watcher with expression "inputText"Vue.js 默认异步更新 DOM。每当观察到数据变化时，Vue 就开始一个队列，将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发，只会推入一次到队列中。等到下一次事件循环，Vue 将清空队列，只进行必...
2024-01-10
vue2 知识点
1.组件-内容模块化-复用2.指令-功能抽象化-面向切面3.混入-继承 or 装饰4.过滤器-文本格式化5.插件-功能规模化，模块化6.路由-页面规模化 7.父组件-子组件参数传递指令:v-if,v-else,v-else-if,v-show,v-for,v-on,v-bind,v-model,v-slot动态:<a v-bind:[attributeName]="url"> ... </a><a v-on:[eventName]="doSomething"> ... </a>v-slot:[dynamic...
2024-01-10
vue2和vue3比较
vue2和vue3比较一.vue3新特性： 1.数据响应重新实现（ES6的proxy代替Es5的Object.defineProperty） 2.源码使用ts重写，更好的类型推导 3.虚拟DOM新算法（更快，更小） 4.提供了composition api，为更好的逻辑复用与...
2024-01-10
vue2
axios.defaults.baseURL = 'http://192.168.1.118:808';axios.defaults.withCredentials = true;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';http://www.ituring.com.cn/article/200275.withCredentials()方法可以激活发送原始cookie的能力,不过只有在A...
2024-01-10vue2具名插槽失败？
下面的部分代码subsidy-rules组件 <el-form-item class="m-t-25"> <slot name="butt"></slot> </el-form-item>b组件 <subsidy-rules > <template v-slot:butt> <el-button type=...
2024-03-06
