VUE - 技术教程文章
添加谷歌拓展程序 vue.js devtools过程中的问题【图】
在用vue做项目过程中，需要用到vue.js devtools，在从github上面clone下来代码，然后再npm install ,过程报错，然后更新npm包也是会有问题，以下是install的问题，npm cache clean --force 也是没用的，好在最后问同事，windows版本蓝灯下载重装，最后再谷歌应用商店添加了拓展程序。从昨天到今天上午，至此这个问题才搞定，用这个工具主要是为了方便整个项目 vuex的状态查看。 原文：https://www.cnblogs.com/tangjiao/p/9013281....
vue中rem的转换【代码】
1function rems(doc: any, win: any): void {2 let docEl = doc.documentElement,3 resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,4 recalc = function () {5 let clientWidth = docEl.clientWidth;6if (!clientWidth) return;7 docEl.style.fontSize = 20 * (clientWidth / 750) + ‘px‘;8 };9if (!doc.addEventListener) return; 10 win.addEventListener(res...
第一个vue程序【代码】
前置：nodejs vue-cli 初始化一个vue程序vue init webpack vuetest因为是第一个vue程序，所以全部手动创建 Vue bulid sandalone 运行时编译 是否安装Vue-router 不安装，手动安装 是否使用ESL检查你的代码 不 是否安装测试 NO 是否需要自动运行npm install No 手动 基础的vue目录 进入到新建的vue文件 npm install安装package.json里面的文件 报错的话比如typeerror可以试试cnpm i...
Vue中table合并单元格用法【代码】
<table><tr><th>地名</th><th>结果</th><th>人名</th><th>性别</th></tr><template v-for="(item, index) in list"><tr :key="index"><td :rowspan="item.groups.length">{{item.name}}</td><td :rowspan="item.groups.length" v-if="item.result === ‘1‘"><span>已完成</span></td><td :rowspan="item.groups.length" v-if="item.result === ‘0‘ || item.result === null"><span>未完成</span> </td><td>{{item.gr...
使用vue-cli构建 webpack打包工具时，生产环境下，每次build时，删除dist目录，并重新生成，以防dist目录文件越来越多。
首先，需要使用webpack的插件CleanWebpackPlugin，安装命令如下： npm install --save-dev clean-webpack-plugin 其次，需要在生产环境提供的文件：build/webpack.prod.conf.js的plugins节点下添加如下代码： new CleanWebpackPlugin( [‘dist‘], //匹配删除的文件 { root：path.resolve(__dirname,‘../‘) //根目录 verbose：true， //是否启用控制台输...
Vue 组件与复用【代码】
（1）全局注册<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"/><title>Vue</title></head><body><div id="app"><my-component></my-component></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script><script type="text/javascript">//示例前注册 Vue.component(‘my-component‘, {//DOM结构必须被元素包含 template: ‘<div>组件内容</div>‘})new Vue({el: "#ap...
vue-socket.io 3.0.9 的最新版本不能用
看到issue 反馈要回退到到版本3.0.7 ，但是发现了一个问题，package.json 写的是3.0.7 但是，cnpm install (下载所有的包) 下载在node_modules 里的包依旧是3.0.9一开始以为是缓存的问题，用了一些命令也没有用，后来去研究了 vue-socket.io: ^3.0.9 ,这个^代表的含义~3.0.2 := >=3.0.2 <3.1.0 会匹配到3.0.x的最新版本^3.0.9 := >=3.0.9 <4.0.0 会匹配到3.x.x的最新版本所有 cnpm install 下载的vue-socket.io 匹配到...
Framework7-vue + cordova，从创建项目到发布程序（Android、Web）【图】
环境：NodeJs、Android SDK 、Adb Driver安装：npm install -g cordova npm i framework7-cli cordova -g 代码编辑器：Vs Code（建议Version：1.42，否则Cordova调试麻烦） 过程： 1、创建一个项目： 2、在项目根路径下打开编辑器，再把项目根路径下的Cordova目录添加到WorkSpace 3、下载Cordova Tools组件，方便调试 4、设置DEBUG AND RUN（调试工具） 注：vs code版本需要1.42，才能选择WorkSpace（见 ht...
Vue内部使用setInterval轮询数据，对象数据重新赋值后再次渲染数据【代码】【图】
var vue = new Vue({el: "#notification",data: {Message: ""}, methods: {getMessage: function () {var self = this;$.ajax({url: "../Manage/Message/GetMessage",type: "get",dataType: "json",async: false,success: function (data) {self.Message = data; }})}},mounted: function() {this.getMessage();setInterval(this.getMessage, 3000);}}) 注：这里有三个关键点：1、在methods里...
Vue(核心思想)【代码】
1.Es6语法普及let和var的区别:var:定义变量时,在全局范围内都有效;所以在变量没有声明之前就能使用,值为undefined, 称为变量提升;let:声明的变量一定要在声明后使用,而且在for循环时,变量都会被重新定义 let不允许在相同的作用域内,重复声明一个变量;// 报错function func() {let a = 10;var a = 1; }// 报错function func() {let a = 10;let a = 1; }所以,在函数内部重新声明参数也报错function func(arg) {let arg; // 报错}func...
Vue.js基础篇实战--一个ToDoList小应用
距离开始学Vue已经过去一个多月了，总想把学到的东西柔和在一起，做点东西出来，于是有了这个Todolist小应用。主要功能就是把一天要做的事情记录下来，还实现了：标记完成事件删除已完成事件各种排序仅显示未完成的项目本地保存截图看这里用时一周，14次commits,把心中的构想基本实现了。详情请看：这里整个过程下来，收获还是很多的，1.对mvvm有了进一步的理解，2.对css布局有了更多的了解。3.更进一步理解了Vue的事件和组件机制。...
vue 使用 video.js 播放 m3u8 视频流【代码】【图】
vue 使用 video.js 播放 m3u8 视频流首先呢，遇到一个项目，是需要使用播放器在web上播放视频流，项目使用vue开发的，然后就找了一下相应的插件，找到了 video.js，自己用的时候感觉还不错，可以满足自己的需求，记录一下。安装依赖包npm install video.js --save // 视频播放器插件 npm install videojs-contrib-hls --save // 播放hls流插件 npm install @videojs/http-streaming --save 安装的时候直接 npm 安装，但是我安装的...
vue实现简单学生信息管理案例【代码】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>学生信息管理</title><link rel="stylesheet" href="./lib/bootstrap.css"><script src="./lib/vue.js"></script><style type="text/css">#app{margin: 10px;}</style></head><body><div id="app"><form class="form-inline"><div class="form-group"><label>学号：</label><input type="text" class="form-control" v-model="stuNo"></div> <div class="form...
vue中的class和style的使用【图】
v-bind:class的使用1:第一种使用方式v-bind:class='[a,b,c]'形式的用法a b c是data中的数据2:第二种使用方式v-bind:class='{}'形式的用法当然也可以配合着数据一起使用3:第三种使用方式(其实和第二种方式是一样的)v-bind:class='json',引号里可以直接存放一个json类型的变量，其实也就是第二种形式的写法，换了一个地方而已。v-bind:style的使用1:第一种使用方式2:第二种使用方式(其实就是第一种方法的位置换了一个地方)3:第三种用...
Vue中vant使用【代码】【图】
1、安装 vant: npm i vant -S2、main.js引用（可按需引用）//按需引用 import { Button } from ‘vant‘import ‘vant/lib/button/style‘ //引入样式或者下载 vant.min.css，在根目录index.html引用Vue.use(Button)//全部引用 import vant from ‘vant‘ Vue.use(vant )3、使用<van-button type="default">默认按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-butto...
vue 获取当前屏幕的宽度，图片等比例缩放，动态设置css样式【代码】【图】
vue 获取当前屏幕的宽度，图片等比例缩放这个是一个背景图，点击对应的圆圈就会出现一个蒙层上面显示详情，但是只要当前窗口大小变化了，因为我的蒙层大小是固定的px，所以不会变，就不在图片对应的位置了我们要绑定样式style，等后面要根据当前的屏幕来给蒙层动态设置宽高<div class="main"><div class="content"><div class="street"><router-link:to="{name:‘/streetDetails‘,query:{code:‘310151101‘}}":style="style01"cl...
vuex的一个demo，数据拿到界面上【代码】
1.拿到store的一个值，并实现自增 1 <template>2 <div>3 <button @click="add">add</button>4 {{getuser}}5 </div>6 </template>7 <script>8 import {mapState,mapActions} from‘vuex‘ 9 export default { 10 data () { 11return { 12// 在data中拿到user值，赋值给getuser13 getuser: this.$store.state.user 14 } 15 }, 16 methods: { 17//设置一个方法add控制data里的get...
Vue之彻底理解自定义组件的v-model【代码】
最近在学习vue，今天看到自定义事件的表单输入组件，纠结了一会会然后恍然大悟...官方教程写得不是很详细，所以我决定总结一下。 v-model语法糖v-model实现了表单输入的双向绑定，我们一般是这么写的：1<div id="app">2<input v-model="price">3</div>1new Vue({ 2 el: ‘#app‘, 3 data: { 4 price: ‘‘ 5 } 6 });通过该语句实现price变量与输入值双向绑定实际上v-model只是一个语法糖，真正的实现是这样的：...
Vue 自定义按键修饰符，自定义指令，自定义过滤器【代码】
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<link rel="stylesheet" type="text/css" href="./css/bootstrap.css"/> 7<script src="../vue.js" type="text/javascript" charset="utf-8"></script> 8</head> 9<body> 10<div id="app"> 11 12<div class="panel panel-primary"> 13<div class="panel-heading"> 14<h3 class="panel-title">demo</h3> 15</div> 16<div class="panel-body fo...
#8;vue.set的使用和vue数据的序列化【代码】
首先简单说一下vue双向数据绑定在实际应用上会有一点异常。 1.比如我想使用一个数组内部数据的改变，直接使用arr[0]=‘bbbb’，这样是不会触发数据绑定的。视图不会变化。 2.这个问题就纯是js的问题了。。我们需要把一个json数据的值赋值给另一个，当我们改变另一个数据内部的数据时。第一个也会跟着改变一、首先对于问题一，官方已经给了很好的解释。怪就怪在我没有仔细看文档吧。记录一下涨个记性。<template><div class="...
构建Vue开发环境【代码】【图】
1.开发环境的准备工作IDE 可以选择WebStom或者VisualStudio CodeNode.js的安装 node + npm调试环境 Google Chrome + Vue.js2.什么是nvm nvm:Node Version Manager，作为前端node依赖包管理工具，可以更好的管理Node的版本3.nvm的安装nvm windows 下载地址选择上面的进行下载，将下载的文件进行解压：nvm-setup.exe，单击开始安装，直接点击下一步就可以。4.测试nvm版本安装是否成功nvm --version5.查看本地安装的node版本nvm list6...
vue-router路由管理器【代码】
安装vue-routernpminstall vue-router 在main.js中引入import VueRouterfrom‘vue-router‘Vue.use(VueRouter) 原文：https://www.cnblogs.com/dudu123/p/10059377.html
vue element 给指数的div加loading
const loading = this.$loading({ lock: true, text: ‘Loading‘, spinner: ‘el-icon-loading‘, background: ‘rgba(0, 0, 0, 0.7)‘, target: document.querySelector(‘.box‘) }); loading.close();原文：https://www.cnblogs.com/wqing/p/11707647.html
vue 生成二维码+截图【代码】
链接生成二维码1.npm安装npm install --save qrcodejs22.引入import QRCode from ‘qrcodejs2‘3.生成二维码new QRCode(‘qrcode‘, { // 传入容器id text: url, // 链接（必填） width: 200, // 宽px height: 200, // 高px colorLight: ‘#F1F1F1‘ // 背景色 colorDark: ‘#F00‘, // 前景色 correctLevel: QRCode.CorrectLevel.L // 二维码可辨识度（L,M,Q,H）})4.代码演示：<style lang="less" scoped>#qrcode{width: 1....
vue 项目碰到的问题
易车三期的项目，碰到的vue问题，暂时记录一下。 1、跨vue组件的方法调用 2、路由的跳转，带参数的（例如ID）跳转不到其他的页面 3、js文件的导出和引入，在一个vue文件中调用js文件的方法，此行为可以抽取公共的函数。 4、provide、inject 方法调用跨vue组件的methods中的方法 5、组件部分的引入，使用原文：https://www.cnblogs.com/smile-fanyin/p/12347998.html
vue项目中实现手势密码【代码】【图】
本来是写在一个页面中的，但后来一想创建和登录的时候都得用，干脆就写成组件吧。自知写的很差，还望各位大佬指教一二父组件中不传值的话就默认是创建手势密码（创建时密码长度不能小于4），需要输入两次，两次密码必须一致如果是登录，父组件就把密码传给子组件，子组件就会根据密码判断当前输入是否正确，具体执行时请看控制台演示：父组件未传值，此时是创建手势密码 登录时，父组件穿的值为<gestureUnlock :fatherPassword=...
vue-cli3打包app物理按键失效的问题[已解决]【代码】
项目采用vue-cli3打包成app后,手机测试物理按键失效.经过百度查询相关资料最终实现的效果就是按返回键退回上一页，当退回到栈的第一页之后再按返回键才退出页面首先在新建一个js文件,我的路径是.\src\utils\back.js/* eslint-disable no-undef */ import Vue from ‘vue‘ import { Toast } from ‘vant‘Vue.use(Toast)document.addEventListener(‘plusready‘, function () {var webview = plus.webview.currentWebview()var fi...
Vue书写规范
template模块：1 v-xx指令排序规则，控制显示 -> 控制循环 -> v-bind属性 -> v-on事件绑定；v-if / v-show -> v-for -> v-bind:text... -> v-on:click...2 v-for时，记得为每项提供一个唯一 key 属性3 不要在html标签上直接写style内联样式， 放到data中或者computed中4 在大结构块时，加入合适的注释标签，并保持良好的层级缩进script 模块import 放在最顶部，并省略掉 .js，.json 和 .vue 后缀 export 对象中属性定义顺序nameco...
vue2 vue3 创建项目指令
vue的常见指令切换存储项目 cd..vue -V 查看当前@vue/cli版本 创建项目vue-cli 2vue create + 名称vue-cli 3vue init webpack + 名称 node_modules被删除的时候使用 npm install 原文：https://www.cnblogs.com/coderatian/p/14801661.html
vue学习11【代码】【图】
组件基础基本示例这里有一个 Vue 组件的示例：// 定义一个名为 button-counter 的新组件 Vue.component(‘button-counter‘, {data: function () {return {count: 0}},template: ‘<button v-on:click="count++">You clicked me {{ count }} times.</button>‘ })组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：<div i...