vue 获取当前屏幕的宽度，图片等比例缩放这个是一个背景图，点击对应的圆圈就会出现一个蒙层上面显示详情，但是只要当前窗口大小变化了，因为我的蒙层大小是固定的px，所以不会变，就不在图片对应的位置了我们要绑定样式style，等后面要根据当前的屏幕来给蒙层动态设置宽高<div class="main"><div class="content"><div class="street"><router-link:to="{name:‘/streetDetails‘,query:{code:‘310151101‘}}":style="style01"cl...
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语法糖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只是一个语法糖，真正的实现是这样的：...
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...
首先简单说一下vue双向数据绑定在实际应用上会有一点异常。 1.比如我想使用一个数组内部数据的改变，直接使用arr[0]=‘bbbb’，这样是不会触发数据绑定的。视图不会变化。 2.这个问题就纯是js的问题了。。我们需要把一个json数据的值赋值给另一个，当我们改变另一个数据内部的数据时。第一个也会跟着改变一、首先对于问题一，官方已经给了很好的解释。怪就怪在我没有仔细看文档吧。记录一下涨个记性。<template><div class="...
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-routernpminstall vue-router 在main.js中引入import VueRouterfrom‘vue-router‘Vue.use(VueRouter) 原文：https://www.cnblogs.com/dudu123/p/10059377.html
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
链接生成二维码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问题，暂时记录一下。 1、跨vue组件的方法调用 2、路由的跳转，带参数的（例如ID）跳转不到其他的页面 3、js文件的导出和引入，在一个vue文件中调用js文件的方法，此行为可以抽取公共的函数。 4、provide、inject 方法调用跨vue组件的methods中的方法 5、组件部分的引入，使用原文：https://www.cnblogs.com/smile-fanyin/p/12347998.html
本来是写在一个页面中的，但后来一想创建和登录的时候都得用，干脆就写成组件吧。自知写的很差，还望各位大佬指教一二父组件中不传值的话就默认是创建手势密码（创建时密码长度不能小于4），需要输入两次，两次密码必须一致如果是登录，父组件就把密码传给子组件，子组件就会根据密码判断当前输入是否正确，具体执行时请看控制台演示：父组件未传值，此时是创建手势密码 登录时，父组件穿的值为<gestureUnlock :fatherPassword=...
项目采用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...
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...
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 组件的示例：// 定义一个名为 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...