一、获取原生的DOM的方式　　在js中，我们可以通过id、class或者标签获取DOM元素，vue中也为我们提供了获取原生DOM的方法，就是给标签或者组件添加ref属性，通过this.$refs获取，如下：<divid="app"></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>//创建一个全局组件TestVue.component('Test',{data(){return{}},template:`<div>我是测试组件</div>`});//创建一个全局组件Test2Vue.component('Test2',{data(){return{}},template:`<div>我是测试组件2</div>`});//声明一个局部组件AppletApp={data(){return{}},template:`<divclass="app"><inpu...

一、安装脚手架1、下载node.js，本文下载版本为node-v8.12.0-x64.msi，一键式安装。2、安装完成后，打开终端，输入node，可进入node环境（两次ctrl+c退出），如下图：3、查看版本，如下图：4、在成功安装node.js（即能够成功查看版本如上图）的前提下，再安装淘宝npm（http://npm.taobao.org/），命令如下：npminstall-gcnpm--registry=https://registry.npm.taobao.org　　执行结果如下：5、安装脚手架　　依次执行下面两条命令：npminstall-g@vue/clinpminstall-g@vue/cli-init//注释：这是拉取cli版本2的命令　　CLI3版本的文档：https://cli.vuejs.org/zh/guide/　　CLI2版本的文档：https://github.com/vuejs/vue-cli/tree/v2#vue-cli--6、执行完毕后输入vue-V验证是否成功，如下图：二、过滤器 1、过滤器分为局部过滤器和全局过滤器，定义和使用如下：&...

一、表单输入绑定（v-model指令）　　可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。　　详细用法参见官方文档：https://cn.vuejs.org/v2/guide/forms.html二、局部组件和全局组件1、了解根组件template模板的优先级大于el，如下方式验证：<divid="app">{{msg}}</div><script>//如果仅仅是实例化vue对象中既有el又有template，//如果template中定义了模板的内容那么template模板的优先级大于elnewVue({el:'#app',data(){return{msg:'alex'}},template:`<divclass="app">//通过控制台可看到显示了template中定义的div<h2>{{msg}}</h2></div>`})</script>2、局部组件的使用（声子，挂子，用子）<...

一、es6的语法1、let与var的区别　　ES6新增了let命令，用来声明变量。它的用法类似于var（ES5），但是所声明的变量，只在let命令所在的代码块内有效。如下代码：{　　leta=10;　　varb=1;}a//ReferenceError:aisnotdefined.b//1　　上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。　　for循环的计数器，就很适合使用let命令，如下代码：for(leti=0;i<10;i++){　　//...}console.log(i);//ReferenceError:iisnotdefined　　上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。2、var变量提升现象，如下代码：vara=[];for(vari=0;i<10;i++){　　a[i]=function(){　　　　console.log(i);　　};}a[6]();//10　　上面代码中，变量i...

用vue-cli生成项目时，如果选择了单元测试，那么会采用karma+mocha作为单元测试框架，默认使用的浏览器是PhantomJs。 Karma是一个基于Node.js的JavaScript测试执行过程管理工具（TestRunner）。可启动所有主流Web浏览器作为测试容器，运行时会启动一个web服务器，生成包含js源代码和js测试脚本的测试页面，运行浏览器加载测试页面，并显示测试的结果。 mocha是一款JavaScript测试框架，提供一套函数来帮助编写测试用例，并通过运行执行测试并得到结果。 PhantomJs是基于webkit内核的无UI界面的浏览器，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。浏览器支持参考：http://karma-runner.github.io/0.13/config/browsers.htmlhttps://github.com/karma-runner/karma-chrome-launcher 因为是要在chrome环境里跑测试，所以需要安装chrome对应的luncher。&...

在《vue-cli搭建的项目中增加后台mock接口》中实现了后台mock，但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据。req.on('data',function(chunk){//接收字节数据});req.end('data',function(){//转换||处理});req.error('error',function(e){//处理错误});如果前端需要使用cookie，后端要读取，那么在后台mock的接口中还要获取req的headers，并从中取得cookie字符串，自己还要分割处理等等。 当然这样是可以的，但是比较麻烦，从接收数据到转换都要自己做。vue-cli搭建的项目是用express作为node.js的web框架，它支持丰富的中间件。对应上述问题，有body-parser和cookie-parser中间件可以方便地将post的body中的数据和cookie自动提取成req.body和req.cookies对象供人使用，非常方便。 安装中间件npminstallbody-parser--...

用vue-cli搭建一个前端开发环境确实是极其方便，在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互，特别在敏捷开发中，前后端都要提前确定业务接口并进行打桩，在开发过程中基本是没有现成的后台可以调用，基本上都是自己写mock进行模拟。在vue-cli搭建的项目中，框架上用的是express的web框架，要做一个mock是很方便的。 假设前端页面上需要获取所有的新闻列表，那么就需要mock一个能够返回所有新闻列表数据的接口。接下来就在项目中实现mock功能。 脚手架生成项目执行命令用webpack模板生成一个名为vuestrap的项目（名字任意）vueinitwebpackvue-mock-demo 在出现的各提示选项中，没什么要求，为了方便，把不用的ESLint，unittests，e2e都关掉（这些选项都随意）。?Projectnamevuestrap?ProjectdescriptionAVue.jsproject?Author省略?Vuebuildstandalone?Installvue-router?Yes?UseESLintt...

vue-cli+webpack在生成的项目中使用bootstrap方法（一）中，是通过手动下载bootstrap库，然后手动添加到src/assets中，显然是过程太多。当然是可以更省力些，可以通过npm安装bootstrap，然后用import直接导入bootstrap的方式进行整合，因为vue-loader能自动从node_modules下加载库，非常方便。完整过程实现一遍。  脚手架生成项目（同方法一）执行命令用webpack模板生成一个名为vuestrap的项目（名字任意）vueinitwebpackvuestrap 在出现的各提示选项中，没什么要求，为了方便，把不用的ESLint，unittests，e2e都关掉（这些选项都随意）。?Projectnamevuestrap?ProjectdescriptionAVue.jsproject?Author省略?Vuebuildstandalone?Installvue-router?Yes?UseESLinttolintyourcode?No?SetupunittestswithKarma+Mocha...

在一个html页面中加入bootstrap是很方便，就是一般的将css和js文件通过Link和Script标签就行。那么在一个用vue-vli生成的前端项目中如何加入？因为框架不一样了，略微要适应一下。 脚手架生成项目执行命令用webpack模板生成一个名为vuestrap的项目（名字任意）vueinitwebpackvuestrap 在出现的各提示选项中，没什么要求，为了方便，把不用的ESLint，unittests，e2e都关掉（这些选项都随意）。?Projectnamevuestrap?ProjectdescriptionAVue.jsproject?Author省略?Vuebuildstandalone?Installvue-router?Yes?UseESLinttolintyourcode?No?SetupunittestswithKarma+Mocha?No?Setupe2etestswithNightwatch?No选项选完，项目也就生成了。 执行命令，安装脚手架创建的组件npminstall 安装jquerybootstrap是...

问题一：vue-router有哪几种导航钩子（导航守卫）？1、全局守卫： router.beforeEach2、全局解析守卫： router.beforeResolve3、全局后置钩子： router.afterEach4、路由独享的守卫： beforeEnter5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave导航表示路由正在发生改变，vue-router提供的导航守卫主要用来:通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的,或者组件级的。注意：参数或查询的改变并不会触发进入/离开的导航守卫。 你可以通过 观察$route对象 来应对这些变化，或使用 beforeRouteUpdate的组件内守卫。1、全局守卫：使用 router.beforeEach 注册一个全局前置守卫：constrouter=newVueRouter({...})rout...

问题一：什么是vue.js中的自定义指令？自定义一些指令对底层DOM进行操作更多参考Vue里面有许多内置的指令，比如v-if和v-show，这些丰富的指令能满足我们的绝大部分业务需求，不过在需要一些特殊功能时，我们仍然希望对DOM进行底层的操作，这时就要用到自定义指令。问题二：自定义指令的几个钩子函数bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。问题三：钩子函数参数除了el之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。指令钩子函数会被传入以下参数：el：指令所绑定的元素，可以用来直接操作DOM...

methods:{//禁止滚动stop(){varmo=function(e){e.preventDefault();};document.body.style.overflow='hidden';document.addEventListener("touchmove",mo,false);//禁止页面滑动},/***取消滑动限制***/move(){varmo=function(e){e.preventDefault();};document.body.style.overflow='';//出现滚动条document.removeEventListener("touchmove",mo,false);}}...

计算属性：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<divid="example">{{message.split('').reverse().join('')}}</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，都应当使用计算属性。例子：<divid="example"><p>Originalmessage:"{{message}}"</p><p>Computedreversedmessage:"{{reversedMessage}}"</p></div>varvm=newVue({el:'#example',data:{message:'Hello'},computed:{//计算属性的getterreversedMessage:function(){//`...

文件结构：.├──src│├──filter││├──filter.js│││└──main.js└──...过滤器们放在filter文件夹下filter/filter.js：这个文件主要是写了过滤器实现的方法，然后export进行导出。functionfilterOne(n){returnn+10;}functionfilterTwo(n){returnn+5;}export{filterOne,filterTwo}main.js：//找filter/filter.jsimport*asfiltersfrom'./filter/filter.js'//遍历所有导出的过滤器并添加到全局过滤器Object.keys(filters).forEach((key)=>{Vue.filter(key,filters[key]);})在.vue组件下使用{{test|filterOne}}问题二：vue-cli工作中常用的过滤器在.vue组件中的使用示例：{{string|trim(1)}}//去除所有空格，过滤器第一个参数为value常用的过滤器，filter/filter.js//去除...

变异方法：Vue包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()sort()reverse()替换数组：例如：filter(), concat()和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用这些非变异方法时，可以用新数组替换旧数组：example1.items=example1.items.filter(function(item){returnitem.message.match(/Foo/)})你可能认为这将导致Vue丢弃现有DOM并重新渲染整个列表。幸运的是，事实并非如此。Vue为了使得DOM元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。注意事项：由于JavaScript的限制，Vue不能检测以下变动的数组：当你利用索引直接设置一个项时，例如：vm.items[indexOfItem]=newValue当你修改数组的长度时，例如：vm.items.length=...