vue

内容中的{{var}}会直接显示，使用过滤器：{{var | 过滤器名}}，会先用过滤器处理var，再显示。 按作用域划分，有2种过滤器：全局过滤器、组件内过滤器。 demo 组件内过滤器 　　 <div id="app"> <input v-model="content" /><br /> <!--绑定input的value到变量content--> <p>原来的字符串：{{content}}</p> <!--不使用过滤器--> <p>字符串反转：{{content | reversal}}</p> <!--使用过滤器reversal，先反序、再显示--> </div> <script> new Vue({ el:'#app', data:function(){ return { content:'' //最初变量没有值，split()会报错，给它赋一个初始值 } }, filters:{ // 定义一个组件内过滤器 reversal(val){ //过滤器名(参数表)，会自动把|前面的变量作为实参传入 return val.split('').reverse().join(''); //先切分为字符数组、数组反序、数组连接为一个字符串 } //可定义多个过滤器，逗号分隔即可 } }); </script> demo 全局过滤器 　　 <div id="app"> <input

像提交表单类似的数据的时候，连续点击两次会出现提交两次请求，前端有没有全局的js去控制这个? <template> <div> <!-- 其他代码 --> <button v-if="canSave" @click="save">提交</button> <button v-else disabled>提交</button> </div> </template> <script> export default { data(){ return { canSave: true, } }, methods: { save(){ if(!canSave){ return; } this.canSave = false; // AJAX 结束后 this.canSave = true; }, } } </script> 本文看自： https://segmentfault.com/q/1010000015296510 来源： https://www.cnblogs.com/smart-girl/p/12605666.html

父组件内容： <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick"></info-wnd> 　　</div> </template> <script> import infoWnd from './info-wnd'; export default { data() { return { } }, components: { infoWnd }, methods: { wndClick() { console.log('这是父组件的方法'); } } } </script> 子组件Info-wnd.vue组件内容： <template> <div @click="divClick"> <span>这是子组件</span> </div> </template> <script> export default { data() { return { } }, methods: { divClick() { this.$emit('parentClick'); //调用父组件的方法 } } } </script> 来源： https://www.cnblogs.com/minozMin/p/9830015.html

前后端数据交互作为项目最基础需求（静态的除外），同时也是项目中最重要的需求。 本文重点介绍axios如何配合vue搭建项目框架，而axios的详细使用介绍请移步 使用说明 1、安装 cnpm install axios --save-dev 2、引入 main.js 文件引入：　　 　　import Vue from 'vue'//引入vue 　　import axios from 'axios'//引入axios 　　Vue.prototype.$axios = axios;//把axios挂载到vue上 3、使用 　　　　　getStore(){ let that = this that.$axios({ method: "post",//指定请求方式 url: "/business-app/getCityShopList.cgi",//请求接口（相对接口，后面会介绍到） data: { cityId: cityId, data:{}, isDebug:"1", longitude: "", latitude: "" } }) .then(function(res){ //接口成功返回结果执行 }) .catch(function(err){ 　　　　　　　　　　//请求失败或者接口返回失败或者.then()中的代码发生错误时执行 }) } 4、跨域与代理

Vue 搭建项目 一.node下载安装： 1.下载： https://nodejs.org/en/download/ 2.安装默认许选择，下一步就行； 3.安装完之后就可以使用npm命令 二.通过@vue/cli方式安装： 1.全局安装@vue/cli ： npm install -g @vue/cli 最新版本3.x，可以通过ui界面方式创建 2.创建项目： vue create 项目名称 或 vue ui 直接打开web页面，通过界面方式创建项目 三.通过vue-cli方式安装： 1.全局安装vue-cli npm install --global vue-cli vue-cli 旧版本 2.通过webpack方式初始化vue项目 vue init webpack 项目名称 3.根据提示设置项目信息即可 四.运行： npm run dev 五.编写代码调试： 跳转到：https://www.cnblogs.com/zlp520/p/10924962.html 六.生成： npm run build 七.扩展： 1.npm 安装cnpm： npm install - g cnpm -- registry = https :// registry . npm . taobao . org 安装完之后就可以使用cnpm和npm命令一样，只是cnpm是淘宝镜像而已 2

vue进行Base64加解密 背景 项目中需要对特殊字符进行处理，避免json和数据库的特殊字符（""等）冲突，刚好学了信息安全，干脆整个加解密，wkk。。 使用步骤 打开dos，在项目根目录运行 npm install --save js-base64 在组件中引入 let Base64 = require('js-base64').Base64 使用 Base64.encode(明文) Base64.decode(密文) 来源： https://www.cnblogs.com/qujialin/p/10981743.html

https://blog.csdn.net/benben513624/article/details/88113459（copy） https://www.cnblogs.com/myfate/p/10600392.html（copy） 1.在项目根目录下安装 npm install js-base64 --save npm install js- md5 --save npm install jsencrypt --save 2.在项目文件中引入 import {Base64} from 'js-base64'; import md5 from 'js-md5'; import RSA from 'jsencrypt'; 3.在项目中文件中引入 Base64: // 编码 Base64.encode( ''); Base64.encodeURI( ''); // 解码 Base64.decode( ''); md5: md5( ''); // d41d8cd98f00b204e9800998ecf8427e md5( 'The quick brown fox jumps over the lazy dog'); // 9e107d9d372bb6826bd81d3542a419d6 md5( 'The quick brown fox jumps over the lazy dog

首先给项目安装MD5模块： npm install --save js-md5 　 使用方法有两种： 　　使用方法1： 　　　 在需要使用的项目文件中引入MD5： import md5 from 'js-md5'; 　　　　使用： 　　　　 const lala = md5('holle'); 　　　　 console.log('lalalalalala',lala); // 输出 bcecb35d0a12baad472fbe0392bcc043 　　使用方法2： 　　　　 在main.js文件中将md5转换成vue原型： 　　　　 　import md5 from 'js-md5'; 　　　　　Vue.prototype.$md5 = md5; 　　　　使用： 　　　　 在需要用到的文件中 ： this.$md5('holle') // 输出 bcecb35d0a12baad472fbe0392bcc043 来源： https://www.cnblogs.com/hermit-gyqy/p/10524869.html

1 安装依赖 　　cnpm install --save js-base64 　cnpm install --save js-md52在项目中引入 import md5 from 'js-md5'; let Base64 = require('js-base64').Base64;3在项目中使用 　　Base64.encode('dankogai'); // ZGFua29nYWk= 　　Base64.encode('小飼弾'); // 5bCP6aO85by+ 　　Base64.encodeURI('小飼弾'); // 5bCP6aO85by- 　　Base64.decode('ZGFua29nYWk='); // dankogai 　　Base64.decode('5bCP6aO85by+'); // 小飼弾 　　// note .decodeURI() is unnecessary since it accepts both flavors 　　Base64.decode('5bCP6aO85by-'); // 小飼弾 4 md5 　　md5(''); // d41d8cd98f00b204e9800998ecf8427e 　　md5('The quick brown fox jumps over the lazy dog'); //

第一步： npm安装： npm install --save js-md5 第二步： 全局引用 import md5 from 'js-md5'; Vue.prototype.$md5 = md5; 第三步： this.$md5('This is encrypted content') // 6f43dd5db792acb25d6fe32f3dddac70 在页面单独使用： 首先安装依赖，然后引入 import md5 from 'js-md5'; 第二步： md5('This is encrypted content') // 6f43dd5db792acb25d6fe32f3dddac70 　　 来源： https://www.cnblogs.com/hspl/p/11189088.html