- 博客(31)
- 资源 (4)
- 收藏
- 关注
RSS订阅转载 Vue.js面试题2
目录 1. 说一下Vue的双向绑定数据的原理 2. 解释单向数据流和双向数据绑定 3. Vue如何去除url中的 # 4. 对 MVC、MVVM的理解 5. 介绍虚拟DOM 6. vue生命周期的理解 7. 组件通信 8. 路由实现 9. v-if 和 v-show 区别 10. route和route和route和router的区别 11. NextTick 是做什么的 ...
2019-03-29 09:10:31
978
原创 Vue-CLI脚手架的使用(重要,新的开发模式)
Vue-CLI脚手架的使用(重要,新的开发模式)什么是Vue-CLI?它是官方推出的快速构建单页应用的脚手架.0.安装vue-cli的前提是你已经安装了npm.检查是否安装npm方法:终端输入npm -v(中间有空格)1.安装全局的脚手架(检查脚手架是什么版本:vue -V,注意这里的V是大写)最新脚手架版本是3.0,安装方法如下:cnpm install -g @vue/cli...
2019-03-28 12:21:18
1952
原创 Vue内置组件之slot
先准备一个组件:现在有一个需求是:在三个p标签里加上各自的内容,怎么实现呢?总共分为两步:第一步:在html的组件中用slot属性传递值(slot属性里写键名) . <div id="app"> <jspang> <!-- 第一步:传递数值(slot属性里写键名) --> <span slot="...
2019-03-27 12:26:05
295
原创 Vue实例事件总结($on,$once,$off,$emit)
1.什么是实例事件?实例事件就是在构造器外部调用构造器内部的数据。2.使用场景:比如构造器已经有一个加的方法,现在领导说还要做一个减的方法,而我又不想动构造器里面的信息,那就可以使用实例事件了.操作如下:3.与$on对应的还有一个$once上述代码只改一个单词$once app.$once('reduce',function(){ console.log("减的方...
2019-03-27 11:30:31
17797
原创 Vue实例方法总结($mount,$forceUpdate,$nextTick,$destroy)
一.$mount方法$mount方法是用来挂载我们的扩展的.二.$destroy销毁方法1.html写在app外面,注意因为是外面,所以点击要用onclick <div id="app"> <h3>扩展构造器</h3> <author></author> </div> &...
2019-03-27 00:13:52
3021
原创 Vue实例入门-实例属性
什么是实例?实例就是在构造器外部操作构造器内部的属性选项和方法,它的作用是给原生的或者其他js框架提供了一个融合的接口,让Vue和其他框架可以一起使用.下面进行代码演示:1.让Vue和Jquery.js一起使用.页面显示是：我是jQuery，而不是hello Vue了。2.在构造器外面调用构造器里面的方法...
2019-03-26 23:07:49
208
原创 Vue选项之delimiters修改插值符
有时候我们使用"{{内容}}",当后台的插值符跟现有的插值符有冲突时,这时就要改变我们的插值符,操作如下: <body> <div id="app"> <!-- 插值符改为了es6插值形式了 --> ${num} <p><button @click="add">ADD</b...
2019-03-26 18:24:36
2464
原创 Vue选项之extends扩展
extends扩展和mixins很像,不同点是extends传入的是对象写法,而mixins是数组写法.<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-w...
2019-03-26 18:14:38
9332
1
原创 Vue选项之mixins混入
mixins一般有两种用途:1.当你已经写好了构造器之后,需要增加方法或者临时的活动时使用的方法,这是用混入会减少源代码的污染;下面的需求是构造器已经完成,突然要额外增加控制台打印变化的数据,操作如下:<body> <div id="app"> {{num}} <p><button @click="add"&g...
2019-03-26 17:48:34
346
原创 Vue选项之watch侦听器
侦听器:在数据变化的监控经常使用.一.看一个监控变化的案例我们可以先看一个简单的数据变化监控的例子,例如天气预报的穿衣指数,它主要是根据温度来进行提示的,温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服,下面来看一下实现代码:<body> <div id="app"> <...
2019-03-26 10:12:55
941
原创 Vue选项之methods方法的四个注意点
methods方法中有四个注意点:一.在methods方法里传入参数;1.在html里写要传入的值;<button @click="add(2)">ADD</button>2.在方法里接收;二.methods方法里的第二个参数$event:它传递的是关于鼠标的一些属性和方法三.使用native修饰符给组件绑定vue构造器里的原生事件.默认在别的组件里使用...
2019-03-25 23:09:24
15245
1
原创 Vue选项之computed计算属性
computed 属性是非常有用，在输出数据前可以轻松的改变数据.比如有一个需求：翻转数组,使新闻按照最新时间依次显示,实现如下:
2019-03-25 17:23:24
201
原创 propsData选项(全局扩展的数据传递)
propsData:用在全局扩展是的数据传递代码解释,header标签在挂载是我们需要传递一个数值12过去,就用到了propsData,上述过程总共三个步骤:1.传递数据时用propsData进行传递;propsData:{a:12}2.在全局扩展里加入props进行接收;props:[‘a’]3.用插值的方式写入模板;{{a}}提示:propsData在实际开发中我们使用的并不多，我...
2019-03-25 16:57:35
998
1
原创 Vue内置组件之component标签
Vue自带的标签有:component,transition,transition-group,keep-alive,slot在这里我先介绍component标签: 它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.比如:这个效果效果:代码如下:<body> <div id="app"> <comp...
2019-03-25 15:41:05
19860
2
原创 父组件带上子组件信息操作过程
需求:有时候我们需要在父组件里带上子组件的信息,操作如下:(实际开发中这样使用)上面的代码实际就是:得到同一个效果:
2019-03-25 12:17:49
207
原创 vue父→子组件的props传值操作
需求1.:如果要将自定义属性里的值传递给模板,可以使用props属性:写法注意的地方:1.props的大小写:对于html里的短横线命名,在vue里面要用小驼峰命名法(大驼峰命名介绍:第一个字母也是大写);2.template里必须有一个根目录:需求2.:实际项目中我们经常要将data里面的值传递给模板,操作如下:思路:使用v-bind和data数据绑定,将值传递到组件的模板里的...
2019-03-25 11:39:40
1427
原创 vue中template的三种写法
第一种:直接写在vue构造器里,这种写法比较直观,但是如果模板里html代码太多,不便于维护,不建议这么写.第二种:直接写在template标签里,这种写法跟写html很像.第三种:写在script标签里,这种写法比较方便,推荐使用;...
2019-03-25 08:55:26
46436
1
原创 Vue全局API之Vue.set方法
作用:改变data里面的值,如下:参数介绍:个人感觉这个方法没什么作用,我们可以直接修改app.count++也可以达到这个效果或者使用outData.count++也可以实现这个效果Vue.set方法为什么存在?答:由于Javascript的限制，Vue不能自动检测以下变动的数组:1.当你利用索引直接设置一个项时，vue不会为我们自动更新;2.当你修改数组的长度时，vue...
2019-03-23 23:19:10
747
原创 Vue全局API之Vue.extend(extend构造器)
使用步骤:1.在全局中使用Vue.extend()方法,里面参数是一个对象,写法跟组件类似;2.把构造器挂载在dom元素上;(使用标签选择器挂载在dom元素上) <script> // 比如:我有一个需求:像a标签一样点击跳转,那我们就可以使用构造器来实现(实际开发多用在组件上) // 1.使用extend方法 let authorExten...
2019-03-20 12:11:48
853
1
原创 live-server(在线自动更新服务器)
1.先建好index.html文件:2.全局安装:cnpm install live-server -g3.在终端中运行:live-server4.接着它会自动打开页面,并自动刷新.
2019-03-20 11:32:31
723
原创 vue自定义指令的注册方法(Vue全局API之Vue.directive)
1.全局注册在vue实例前写,如:Vue.directive('focus',{inserted:function(el){el.focus()//添加焦点事件,也可以给dom元素添加其它,比如input标签中用到el.value='请输入内容'}})注意:全局注册是没有directive是没有s,局部注册是有s.2.局部注册在vue实例里面写,如: directive...
2019-03-20 00:46:34
7163
原创 vue学习总结一(vue指令和vue常用概念:语法糖,生命周期,过滤器)
一.vue指令总结:1.v-text作用:渲染内容,它不会解析html标签;写法:1.v-text=‘内容’ : 替换全部内容;2.{{内容}} :只替换占位的位置(常用);2.v-html作用:渲染内容,它会解析html标签(不常用,因为直接解析来源不明的代码,可能会出现安全问题);写法:v-html=“内容” :会替换全部内容;3.v-show和v-if作用:两者都可以...
2019-03-19 22:40:35
981
原创 数组对象的排序方法
//数组对象方法排序:从小到大function sortByKey(array,key){ return array.sort(function(a,b){ var x=a[key];//如果要从大到小,把x,y互换就好 var y=b[key]; return ((x<y)?-1:((x>y)?1:0)); });}//...
2019-03-19 21:55:49
6804
原创 Promise学习总结
前言:promise意思是承诺的意思,在js中主要是为了解决回调地狱.比如,我们要想在家吃顿饭，是要经过三个步骤的:1.洗菜做饭。2.坐下来吃饭。3.收拾桌子洗碗。上面三种过程用三个函数来表示如下:state=1 ;// 我们先定义成功的状态为1// 第一步: 1.洗菜做饭。function step1(resolve,reject){ console.log("1.开始洗...
2019-03-19 17:44:49
1354
原创 es5中数组新增的方法总结
第1类:索引方法indexOf()和lastIndexOf()这两个方法是判断数组里是否有这个元素(全等比较),有的话返回数组里的下标,没有的话返回-1,它们唯一区别是一个是从前往后找,另一个是从后往前找.var arr = [1, 7, 5, 7, 1, 3];console.log(arr.indexOf(7));//1,从前往后找,返回下标console.log(arr.index...
2019-03-10 23:03:16
605
原创 数组常用的方法汇总(这是es5之前的语法,es5新增的方法在下一篇文章)
1.concat():连接一个数组组成一个新数组.var arr = [1,2,3]var newArr=arr.concat([4,5,6])console.log(newArr);//[1, 2, 3, 4, 5, 6]console.log(arr);// [1, 2, 3],原数组没变参数说明:2.join():把数组中的所有元素变成一个字符串.var arr = [1,...
2019-03-10 13:51:18
313
原创 数据常驻的三种方法:cookie,本地缓存,浏览器数据库(里面的本地缓存最重要)
数据常驻有三种:(除了本地缓存其它了解即可)第一种:cookiecookie可以使用js操纵早期没有本地缓存是 经常使用cookie保存一些数据第二种:webSql indexDB (数据库)浏览器内部的一个小型数据库可以让我们在浏览器中保存多一些数据都是保存在浏览器中是不可控的 所以如果数据十分重要 一定要 在服务器的数据库中 再存一份第三种:本地缓存分为:localStor...
2019-03-07 21:04:27
2064
原创 vue组件详解
1.组件的两种注册方法:全局注册(全局注册后任何Vue实例都可以使用):全局注册代码:&amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;en&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp
2019-03-06 00:08:03
267
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人