当用户在没有登录的状态下，只能够访问到系统的登录界面，不管输入的路由是什么，都会跳转到登录界面，当用户登录成功后，就会将登录的信息保存到 sessionStorage中，话不多说，直接上代码：第一步是配置路由：第一个路由是不需要登录就能够进入的路由，第二个是需要登录才能进入的路由{path: ‘/Login‘,name: ‘Login‘,component: Login}, {path: ‘/BackupWizard‘,name: ‘BackupWizard‘,component: BackupWizard,meta: {req...
首先是在普通文档（也就是单个html文件中进行测试，能够正常执行） 普通情况下的结果，拼接的结果能够正常渲染并且控制台有输出； 但是在vue环境之下就会出错，点击事件并没有反应，js部分： for (const i in _sourcesName) {let liHtml = "";for (const j in _sourcesName[i]) {liHtml += ‘<li class="dataLi">‘;liHtml +=‘<p>‘ +_sourcesName[i][j] +‘(‘ +_sourcesRoundNum[i][j] +‘)‘ +‘</p>‘;liHtml ...
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"><span>{{count}}</span><button @click="inc">+</button></div><script>var app =new Vue({ // 1. data () { // return {count: 0} // },// 2.data: {// count: 0// }, ...
p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC"; color: #454545 } span.s1 { font: 14.0px "Helvetica Neue" }1.删除数组索引//在数组中删除一项标准做法是用 Array.splice(index,1) del( index ) { this.arr.splice(index,1) } //Vue.js2.2.0+版本中 可以直接使用Vue.delete del ( index ) { this.$delete ( this.arr , index ) }p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue...
<div ref="wrapper">Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn, 20) ...
vue-cli 3.x 安装：npm install -g @vue/clivue-cli 3.x 常用命令vue-cli 3.x 常用命令命令含义vue --help原文：https://www.cnblogs.com/cag2050/p/9198428.html
<li class="search-item" v-for="(item, index) in searches" :key="index" @click="selectItem(item)">selectItem (item) {this.$emit(‘select‘, item)},search组件里面调用：<search-list:searches="searchHistory"@select="addSearchValue"></search-list>删除一条的实现search-list中向外部传一个事件。deleteOne (item) {this.$emit(‘deleteOne‘, item)}search组件监听这个事件：<search-list:searches="searchHistory"@s...
一angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现,而angular是有自己实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低,vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有过个vue实例。 代码区别参考：https://blog.csd...
一、初始化一个vue项目vue init webpack vuemqttnpm installnpm run dev 二、安装mqttnpm install mqtt --save 三、编写vue组件 1 <template>2 <div id="app">3 <p>mqtt收到的数据：</p>4 <p>{{this.msg}}</p>5 </div>6 </template>7 8 <script>910import mqtt from‘mqtt‘1112 var client 13 const options = { 14 connectTimeout: 40000, 15 clientId: ‘‘, 16 username: ‘admin‘, 17 passwo...
0901自我总结Vue-CLI项目vuex仓库一.概念vuex仓库是vue全局的数据仓库，好比一个单例，在任何组件中通过this.$store来共享这个仓库中的数据，完成跨组件间的信息交互。vuex仓库中的数据，会在浏览器刷新后重置二.使用store.jsimport Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex);export default new Vuex.Store({state: {// 设置任何组件都能访问的共享数据course_page: '' },mutations: {// 通过外界的新值来修改仓库中...
使用图片选择组件，选取图片后会获取一个file let param = new FormData();param.append("img", e.file, e.file.name); //第一个参数为后端接收的路径，第二个参数为图片选择插件获取的file文件，第三个为图片文件的路径 传给后端即可原文：https://www.cnblogs.com/uimeigui/p/12755190.html
1 安装 npm install easemob-websdk --save 官方安装 ，这种安装要在依赖包配置初始化链接，提交代码时并没把配置提交 使用 hx-websdk 安装npm install --save hx-websdk 2 .使用 新建一个webim.js 放在聊天窗口组件同一层级，为了Emoji图片路径同步import store from ‘@/store/store‘ // window.Strophe = require(‘strophe.js‘).Strophe // let WebIM = require(‘easemob-websdk‘) import WebIM from "hx-websdk"; ...
1，在 methods 中<template> <div> <form @submit="addTodo"> <input v-model="title" type="text" name="title"> <input type="submit" value="添加" class="btn"> </form> </div></template> <script>export default { name:‘AddTodos‘, data() { return { title:‘‘, } }, methods: { addTodo(e){ e.preventDefault();//取消默认事件 //...
一、表单输入绑定（v-model 指令） 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 详细用法参见官方文档：https://cn.vuejs.org/v2/guide/forms.html二、局部组件和全局组件1、了解根组件template模板的优先级大于el，如下方式验证：<div id="app">{{ msg }} </div> <script>// 如果仅仅是实例化vue对象中 既有el 又有template，// 如果template中定义了模板的内容 那么template模板...
概述Vue套用Mui的外壳开发app项目，可以通过Mui的 manifest.json 文件添加权限 1.新建Mui项目首先，新建一个空的Mui项目 window.location.href = “app服务器的地址” 2.在Vue项目中引入Mui的js 微信支付export default {paywx(money) {// 支付var pays = {};var w = null;var PAYSERVER = ‘http://demo.dcloud.net.cn/payment/?payid=‘;var id = ‘wxpay‘;plus.payment.getChannels(function(channels) {for(var i in cha...