<!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...
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:第三种用...
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 获取当前屏幕的宽度，图片等比例缩放这个是一个背景图，点击对应的圆圈就会出现一个蒙层上面显示详情，但是只要当前窗口大小变化了，因为我的蒙层大小是固定的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...