vue

引言 在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中，将bus(空Vue)定义成单独的文件Bus.js import Vue from 'vue' const Bus = new Vue ( ) export default Bus 方法一： 在组件一中引入 import Bus from './Bus' export default { data ( ) { return { ... ... ... } } , methods : { ... . Bus . $emit ( 'log' , 0 ) } } 组件二 import Bus from './Bus' export default { data ( ) { return { ... ... ... } } , mounted ( ) { Bus . $on ( 'log' , content => { console . log ( content ) } ) ; } } 但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信，因此我们可以直接将Bus注入到根对象中： 方法二：

目录 目录 1.vue-router 是什么? 2.如何使用v-router? 3.vue-router跳转和传参 4.vue-router实现的原理 两种模式 5.vue-router 有哪几种导航钩子? 6.$route 和 $router 的区别 7.vue-router响应路由参数的变化 8.vue-router实现路由懒加载（ 动态加载路由 ） 目录 引言：该篇主要讲的是关于vue-router的原理以及使用等问题，以及面试中常被问到的几个点，有部分还未整理后续会继续更新； 1.vue-router 是什么? Vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的，适合用于构建单页面应用 在之前常用的是用a标签进行跳转，现在做的是单页面应用，所以必须使用v-router进行管理 2.如何使用v-router? 1. 下载 cnpm i vue-router -S 2.在index.js中引入路由的核心模块 import VueRouter from 'vue-router' 3.注册路由插件 Vue.use(VueRouter) 4.创建路由对象并且配置路径 这里有两种情况， 一级路径 例如 "/film"可以如下写法即可，表示跳转/cinema页面渲染Cinema组件 注意：别忘了引入该组件

双向数据流： js内存属性发生改变，影响页面变化； 页面的改变影响js内存属性的改变； 常用指令 V-text 是元素的innertext只能在双标签元素中； v-html 元素的innerhtml不能包含表达式； v-if 元素是否插入 v-show 元素是否隐藏 v-model 上香数据绑定 v-bind 单项数据绑定 el: 渲染内容目的地（写定的） render 渲染内容（固定函数） v-bind的使用 render：function（C）{ return c: } render：（C）=>{ ES6 return c: } 当参数是一个的时候，小括号可以省略；当代码只有一行且是返回值的时候可以省略大括号； render c=>c(App); 样式： v-bind 简写 ： 绑定单个样式 可用三目运算符 ；绑定多个：class="{'A':RED,'B':BLUE}[stu.score]" v-on 简写 @：绑定的方法 可以省略 function；script 中要用 this trmplate中不需要this ; 没有参数可以省略括号， methods 是对象 key是函数名 ，值是方法体 data 是一个函数 值是初始化的值； v-for 可以单独使用操作数组（item,index）； 可以操作对象(value, key,index)； <li v-for="(stu

直接对数组元素赋值，是不会更新视图的。要使用arr.splice()方法更新数组，才会更新视图。 <template> <div> <ul> <li v-for="(item,i) in arr">{{item}}</li> </ul> <button @click="wrong">失效</button> <button @click="correct">生效</button> </div> </template> <script> export default { name: "Home", data () { return { arr:[1,2,3] }; }, methods: { wrong(){ this.arr[0] = 9; // 视图不会更新，页面上还是1，2，3 }, correct(){ this.arr.splice(0,1,9); // 视图更新了，页面上是9，2，3 } }, } </script> <style lang="css" scoped> </style> 来源： https://www.cnblogs.com/luguankun/p/11343515.html

全局自定义指令：Vue.directive() 局部自定义指令：directives directive(参数一,参数二) 参数一：指令名称 参数二：指令的配置项，可以是函数，也可以是对象 函数： 参数一：使用当前指令的元素 参数二：指令的详细信息 { modifiers:修饰符（只要自定义指令后面跟了修饰符，modifiers对象中就有值，为true）, value:指令的值（假设指令这样写：<div v-test="'aaa'"></div>，那么value就是aaa） } 指令的作用：操作DOM元素 步骤： ①src下新建utils/utils.js： import Vue from "vue"; /** * v-test指令： * <div v-test="'发发发'"></div> * 相当于 * <div>发发发</div> * */ Vue.directive("test",(el,{value})=>{ el.innerText=value; }); /** * 设置背景颜色的指令 * */ Vue.directive("backgroundColor",(el,{value,...rest})=>{ el.style.backgroundColor=value; }); /** * 阻止浏览器默认事件：v-event.prev * */ Vue.directive

安装 npm install vuex --save 在自定义文件夹中的index.js中书写内容 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: { } }, mutations: { login (state,user) { state.user=user; } } }) 如 将其注入到vue中 存入 取出 computed: { user(){ return this.$store.state.user; } } vuex中的状态管理很好用，可以很方便的实现数据之间的传递。 来源： https://www.cnblogs.com/gfbzs/p/12345264.html

把之前存的一堆自己觉得记录的知识点全部记录一下，有兴趣可以看看，共勉。 $ ( function ( ) { todo ( '71899703 200 6 91 425 4 67407 7 96488 6 4 2 7 31064 9 7920 1 34608557 27 72 18 81' ) . then ( f2 ) } ) ; function todo ( e ) { // var dfd = $.Deferred(); // setTimeout(function () { // // f1的任务代码 // dfd.resolve(); // }, 500); // return dfd.promise; // console.log(e.length) // var e = input; var x = e . length ; var y ; // 输出集合 var list = [ ] ; // 排序用集合 var templist = [ ] ; for ( var i = 0 ; i < x ; i ++ ) { y = e . split ( " " ) [ i ] ; if ( ! y ) { break ; } list [ i ] = y ; var sum = 0 ; for ( var n = 0 ; n < y . length ; n ++ )

近期，为了加强对密码校验的同时，也要提醒用户设置或修改密码的同时，达到提醒用户密码设置是否过于简单，如下便是除了对密码本身的校验，也加入了密码强弱校验的实现； 先来张效果展示图： 以下是触发事件展示弹框； <v-modal :id="'modal-mima'" :title="'修改密码'"> <div slot="body"> <el-form :model="updatePass" status-icon ref="updatePass" :rules="passRules" label-width="150px" class="demo-ruleForm"> <el-form-item label="输入旧密码" prop="oldPassword"> <el-input type="password" class="col-sm-8" v-model="updatePass.oldPassword" autocomplete="off"></el-input> </el-form-item> <el-form-item label="输入新密码" prop="newPassword"> <el-input id="new_pwd" type="password" class="col-sm-8" v-model="updatePass.newPassword"

<div id="example"> <select v-model="prov"> <option v-for="option in arr" :value="option.name"> {{ option.name }} </option> </select> <select v-model="city"> <option v-for="option in cityArr" :value="option.name"> {{ option.name }} </option> </select> <select v-model="district" v-if="district"> <option v-for="option in districtArr" :value="option.name"> {{ option.name }} </option> </select> </div> <script type="text/javascript"> var vm = new Vue({ el: '#example', data: { arr: arrAll, prov: '北京', city: '北京', district: '东城区', cityArr: [], districtArr: [] }, methods: { updateCity: function () {

// 防抖 export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function () { timer = null; fn.apply(th, args); }, delay); }; } // 节流 export function _throttle(fn, interval) { var last; var timer; var interval = interval || 200; return function () { var th = this; var args = arguments; var now = new Date(); if (last && now - last < interval) { clearTimeout(timer); timer = setTimeout(function () { last = now; fn.apply(th, args); }, interval); } else { last = now; fn