Vue.js

1、v-on:click 单击事件 <! DOCTYPE html > < html > < head > < title > Page Title </ title > < script src = "vue.js" /> < script > var c = new Vue({ el: ' #box ' , data:{ arr:[ ' a ' , ' b ' , ' c ' , ' d ' ] }, methods:{ show: function (){ alert( 1 ); }, add: function (){ this .arr.push( ' e ' ) } } }); </ script > </ head > < body > < div id = "box" > < input type = "button" value = "button" v-on:click ="show()" > < input type = "button" value = "button" v-on:click ="add()" > 　　　　　　　<br> 　　　　　　　　<ul><li v-for = "value in arr">{{value}}</li></ul> </ div > </ body > </ html > v-on:mouseover、mouseout

v-on 监听事件 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 v-on: 简写 @ <div id="app"> <p>按钮被点击了 {{counter}} 次。</p> <button v-on:click="counter += 1">add</button> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script> <br /> 事件处理方法 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。 所有方法都需要放到 methods 对象里面，再进行调用 <div id="app"> <button v-on:click="greet">Greet</button> </div> <script> new Vue({ el: '#app', data: { name: 'Vue.js' }, methods: { greet: function(){ console.log('Hello ' + this.name + ' !') } } }) </script> <br /> 内联处理器中的方法 除了直接绑定到一个方法，也可以在内联

1.js代码 var box= new Vue({ el: ' .box ' , data:{ msg: ' hello ' }, methods:{ /* 方法放置区,函数 */ show:function(){　　　　 //定义一个show方法 alert( 1 ); } } }) 2.html代码 <input class = " box " type= " button " value= " 按钮 " v-on:click= " show(); " /> 注解:1.点击事件的绑定 　　 2.鼠标移动事件的绑定:v-on:mouseover 　　 3.其他事件类似:v-on:mousemove ...... 　　 4.v-on:可以简写成@ 　　　　v-on:click="　　　等同　　　@click='' 来源： oschina 链接： https://my.oschina.net/u/4316924/blog/4050975

一、v-on 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 简写形式 用@代替 v-on： <button v-on:click="counter += 1">Add 1</button> <button @click="counter += 1">Add 1</button> <button v-on:click="greet">Greet</button> // 此处需注意，greet()加括号与否均可，如果要传参，当然需要括号。但如果直接在双花括号内获取函数，必须含有括号，即{{ greet() }} <button @click="greet">Greet</button> 点击事件 v-on:click、双击事件v-on:dbclick、鼠标事件v-on:mousemove 二、事件修饰符 Vue.js 为 v-on 提供了 事件修饰符 。Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。修饰符是由点开头的指令后缀来表示的。使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止 所有的点击 ，而 v-on:click.self.prevent

2018-2020年web前端面试题熬夜整理成 PDF文档 ，共83页，内容主要包括有 html、css、JavaScript、DOM、HTTP、Vue 等等 2018面试题： Html 1，html语义化 2，meta viewport相关 3，canvas 相关 CSS 1，盒模型 1.1，ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法 1.2，几种获得宽高的方式 1.3，拓展 各种获得宽高的方式 1.4，边距重叠解决方案(BFC) BFC原理 2，css reset 和 normalize.css 有什么区别 3，居中方法 3.1，水平方向上 3.2，垂直居中 3.3，垂直水平居中根据上方结合 4，css优先级确定 5，如何清除浮动 6，自适应布局 7，画三角形 8，link @import导入css 9，animation 10，长宽比方案 11，display相关 JavaScript 1， ["1", "2", "3"].map(parseInt) 2， [[3,2,1].reduce(Math.pow), [].reduce(Math.pow)] 4， [typeof null, null instanceof Object] 5， js数据类型 6，promise 用法 7，es6 promise

<! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title ></ title > </ head > < body > < div id ="app" ></ div > < script type ="text/javascript" src ="../vue.min.js" ></ script > < script type ="text/javascript" src ="../js/node_modules/vue-router/dist/vue-router.min.js" ></ script > < script src ="../node_modules/axios/dist/axios.js" ></ script > < script type ="text/javascript" > // 导航完成后获取数据，这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。 var Index = { template: ` < div > 我是首页 < / div> ` }; var Post = { data() { return { loading: false , error: null , post

我在项目里面用到了的是全局守卫，beforeEach,方便管理 不过遇到了一个问题，就是在beforeEach()中设置好判断条件后出现了无限循环的问题 当时的代码如下： router.beforeEach((to, from, next) => { if (isLogin) { next() } else { console.log('测试') next('login') } }) 结果chrome的debug中看到： 这个问题我是这样理解的： next() 表示路由成功，直接进入to路由，不会再次调用router.beforeEach() next('login') 表示路由拦截成功，重定向至login，会再次调用router.beforeEach() 也就是说beforeEach()必须调用next(),否则就会出现无限循环，next() 和 next('xxx') 是不一样的，区别就是前者不会再次调用router.beforeEach()，后者会！！！ 官网这样写的（主要是红线标记的那句！）： 最终解决的代码如下： router.beforeEach((to, from, next) => { if (isLogin) { next() } else { if (to.name === 'login') { next() } else { console.log('测试')

开课吧前端团队 最新出炉的《 前端开发进阶手册 》终 于来了， 这套系统的前端资料，能够帮助大家更好掌握面试技巧和热门知识点 ： 面试多次，老是通过次数少/薪资低人一大截； 了解多个单独的技术点，但缺乏体系化，很难串起来； 对于新框架和语言的出现缺乏敏感度，前沿的技术了解不够深入； 01. 高薪前端开发必备-面试技巧 前端开发想拿高薪 ，除了要有过硬的技术实力，还离不开面试时必备的“谈判”能力，以及应对面试题时思维的广度和深度 ： 想拿高薪得这样答 Part 1 通过列举不同薪资等级的前端开发在面对同一问题时分别有哪些回答，并提供参考回答， 来帮助大家快速排坑，掌握套路 。 1、关于面试题-总观点 反对没事就刷题 需建立核心知识体系 2、关于文件上传的不同等级回答 菜鸟 10K 15K 20K 25K 30K 35K ... 3、其他知识点 虚拟dom fiber vue模版编译 ... 02. 大厂面试必考-算法与数据结构 算法和数据结构经常被很多小伙伴忽略，但大厂面试必不可少的内容就包括了算法。 再加上如今前端工作重点逐渐向后端倾斜，需要面临的业务更多， 如果想更上一层楼，就离不开对一些前端常用算法的掌握： 前端必备算法和数据结构 Part 2 重点讲述如何进行算法思想的分类学习，提到的所有数据结构和算法类别都是大厂面试题中出现频率最高的。 1、前端学算法的意义 大厂面试

近几年 JS 社区创新和演化的速度是有目共睹的，几个月前比较时髦的技术很可能现在已经过时了。2016 已经过去，你有没有担心错过了什么重要的内容？在这篇调查报告中我们会为你解读社区的主流趋势。 我们将从数量上来分析哪些项目 2016 年获得比较多的关注，具体的做法是比较各项目 2016 年在 Github 上新增 star 的数量。 回顾 2015 年：React 无疑占据了统治地位，而 Redux 则在众多牛毛的 Flux 实现中脱颖而出。那么 2016 年哪些项目最受开发者关注呢？ 目录 最受欢迎项目 前端框架 Node.js 框架 React 项目模板 移动开发 编译工具 构建工具 测试框架 IDE 静态网站生成器 1. 最受欢迎项目 仔细观察 2016 年排名前 10 的项目，你就能对 WEB 社区的演化方向有个直观的把握，概括如下： 3 个 UI 框架：Vue.JS, React and Angular 2 1 个新的 Node.js 包管理器：Yarn 创建桌面应用的首选：Electron 创建 react 新项目的首选：Create React App 1 个移动开发框架：React Native 最受欢迎的 CSS 工具箱：Bootstrap 函数式编程风格的状态管理库：Redux 强大兼具灵活的绘图库：D3 上面这些项目覆盖的领域，无疑证明了 JS 的通用性

Vue Vue-cli Eslint 在vscode里代码自动格式化 HuaRongSAO 关注 2017.10.19 11:28* 字数 189 阅读 10396 评论 5 喜欢 12 vue eslint 代码自动格式化 vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格，一不小心就无法运行，使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 VSCode拓展插件推荐（HTML、Node、Vue、React开发均适用） 建议阅读： vscode插件推荐 JavaScript Standard Style 代码风格规范 正文 eslint 自动格式化 配置环境: npm i -g eslint-plugin-vue #or npm i -S eslint-plugin-vue 创建项目跟路径下的文件：.eslintrc | .eslint.js //　添加插件 "plugins": [ "vue" ] 在你的vscode设置文件里添加： 1、在vscode添加 eslint 插件 2、在vscode添加 vetur 插件 3、修改你的setting.json // 添加进你的vscode的 setting.json "eslint.autoFixOnSave": true, "eslint.validate