![](https://img-blog.csdnimg.cn/20200519161754841.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js的随堂笔记
学习时的随堂笔记..可能有错误的地方,发现后要更正~
不爱敲代码的南兮
这个作者很懒,什么都没留下…
展开
-
Vue-18-嵌套路由(子路由)
一、知识点部分 嵌套路由的写法: 路由中包含的一个属性:children var router = new VueRouter({ routes:[ { path:'/login', name:'login', component:Login, children:[{}] } ] }) children和routers的格式是一样的,需要配置path等属性。(注意:在路由配置中,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套原创 2020-06-04 17:11:02 · 581 阅读 · 0 评论 -
Vue-17-路由的命名和传参
路由的命名:配置路由的时候添加一个name参数,命名自定义 var router = new VueRouter({ routes:[ { path:"/componentA/:id", component:ComponentA, name:"componentA" //推荐使用和路径命名一致,不要写“/”等,因为他只是一个路由的名字。 }, { path:"/componentB", component:Comp.原创 2020-05-29 17:59:05 · 335 阅读 · 0 评论 -
Vue-16-路由的基本使用
一、知识点部分 使用Vue-router的基本步骤大致如下: 引用vue模块; 引入路由模块; 让vue使用该vue-router:创建Vue.use(VueRouter); 在本demo中可不写,日后如果使用脚手架时,模块化开发时,vue可能不是全局的时候需要挂载到全局 创建路由对象; var router = new VueRouter({}) 路由匹配的规则 ;注意!此处一定是routes!routes不是routers!此处一定是component,而不是components!(学习的时候发现自己原创 2020-05-27 21:07:46 · 102 阅读 · 0 评论 -
Vue-15-前端路由的基本原理
<a href="#/login">登录页</a> <a href="#/register">注册页</a> <div id="app"></div> <script src="js/vue.min.js"></script> <script> /* 路由的实现原理: (1)传统开发方式:url改变后,立刻发生请求响应整个页面,当资源过多时,传统开发方式有可能导致页面出现白屏原创 2020-05-27 15:48:05 · 159 阅读 · 0 评论 -
Vue-14-给DOM元素添加事件的特殊情况
一、知识点部分 $nextTick():基于更新后的视图来搞点事情,我们可以使用$nextTick(callback)。这里的回调函数(callback)将在数据更新完成,视图更新完毕之后被调用。(可以联想一下在angular1.x开发过程中,在接收到返回值的时候有时候需要使用setTimeout,在vue中使用$nextTick就可以解决问题了)我们可以通过$nextTick() 获取到更新之后的DOM。 如果要在created()钩子函数中进行的DOM操作,由于created()钩子函数中还未对DOM原创 2020-05-26 15:42:13 · 1320 阅读 · 0 评论 -
Vue-13-使用ref获取DOM
一、知识点部分 ref:被用来给子组件或元素注册引用信息,引用信息将会注册到父组件的$ref对象上; 通过$refs.xxx获取元素/组件 如果在普通的dom上使用,引用的指向就是该dom; 如果在子组件上使用,引用的指向就是子组件的实例; 在模板挂载阶段(mounted())可以获取到DOM; 相同属性名后一个会覆盖之前的ref; $refs相对document.getElementById的方法,会减少获取dom节点的消耗; ref注册时间说明:ref是作为渲染结果被创建的,所以在渲染完成之前是无法被原创 2020-05-26 15:09:34 · 277 阅读 · 0 评论 -
Vue-12-事件修饰符
一、知识点部分 内联处理器: 比较如下两种写法:其中clickCapture2(‘我被点击了’)就是内联处理器。但并不是函数有参数就是内联处理器,而是方法带有(),并不仅仅是一个函数名。没括号是函数名,而有括号的这个是一条JS语句,就是内联处理器。 直接写函数名的好处是直观,自带默认参数$event;而内联处理器没有默认参数$event,需要使用时在定义函数的时候定义参数用来传入$event和其他参数。 <button type="button" @click="clickCapture1"&原创 2020-05-25 15:40:34 · 145 阅读 · 0 评论 -
Vue-11-生命周期
一、知识点部分 生命周期钩子 = 生命周期函数 = 生命周期事件 1.生命周期函数分为: 1.1创建期间: 1.1.1 beforeCreat 1.1.2 created 1.1.3 beforeMonute 1.1.4 monuted 1.2运行期间: 1.2.1beforeUpdate 1.2.2updated 1.3销毁期间: 1.31 beforeDestory 1.32 destoryed created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长原创 2020-05-25 14:29:57 · 265 阅读 · 0 评论 -
Vue-10-watch监听事件
没啥好说的,看代码吧= = <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-model="msg" /> <h4>{{msg}}</h4> &原创 2020-05-24 20:01:51 · 197 阅读 · 0 评论 -
Vue-09-过滤器的使用
第二节课随堂笔记 一、知识点部分 过滤器的作用:为页面中数据进行添油加醋的功能 过滤器分两种:局部过滤器、全局过滤器 局部过滤器不需要独立创建,在当前组件中有一个属性:filters,首先声明过滤器,使用方式:{{数据|过滤器名字}} 全局过滤器需要单独创建,Vue.filter(“过滤器名称”,fn()),首先声明过滤器,使用方式{{数据|过滤器名字}} 二、代码部分 //声明全局过滤器 Vue.filter("myReverse",function(value,arg){原创 2020-05-24 19:57:02 · 104 阅读 · 0 评论 -
Vue-08-具名插槽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"></div> <script type="text/javascript" src="js/vue.min.js"></script> &l原创 2020-05-24 19:51:06 · 110 阅读 · 0 评论 -
Vue-07-关于组件通信的补充笔记
在Vue.js中包含的组件通信方式有很多种(据说有7、8种,只重点学习以下几种常用方式),比较常用的通信方式有: 一、父子组件之间通信 -通过props选项来进行通信: * props选项值的形式; * props数据验证; * 二、子父组件之间通信 - 通过自定义事件$emit来进行通信; 三、非父子组件之间通信 - 通过ref来进行通信; - 通过event bus来进行通信; 四、vue-router - 路由传参; 五、多组件之间通信 - Vuex; ...原创 2020-05-24 19:40:03 · 123 阅读 · 0 评论 -
Vue-06-全局组件的使用
第六节随堂笔记 一、知识点部分 全局组件的创建方法:Vue.component(name,object),全局组件使用前不需要在components中挂载,直接在template使用即可(第一个参数为组件名称,第二个参数为options) 二、代码部分 Document <div id="app"></div> <script src="js/vue.min.js"></script> <script> //创建一个头部组件原创 2020-05-19 16:56:34 · 228 阅读 · 0 评论 -
Vue-05-组件之间的通信(二)
第五节随堂笔记 一、知识点部分 子组件通过事件向父组件通信(传值):1.首先给父组件中绑定自定义事件,在子组件中触发原生事件(比如:click、input、onchange等…),然后在函数中使用$emit触发自定义事件(比如笔记中的childHandler),父组件收到的数据可在父组件中任意使用。 二、代码部分 Document <div id="app"></div> <script src="js/vue.min.js"></scrip原创 2020-05-19 16:49:35 · 103 阅读 · 0 评论 -
Vue-04-组件之间的通信(一)
第四节随堂笔记 一、知识点部分 组件通信问题,即传值问题; vue组件间通信的几种方式,如props、emit/emit/emit/on、vuex、$parent / children、children、children、attrs/$listeners和provide/inject; vue中组件之间的数据流向是由:父组件=》子组件,同级之间传值,且数据流为单向数据流,子组件向父组件需要通过事件进行通信(子向父发送数据) 父组件通过props往子组件通信(传值):首先给父组件中绑定自定义属性,然后在子组原创 2020-05-19 16:45:05 · 89 阅读 · 0 评论 -
Vue-03-局部组件的使用
Document <div id="app"></div> <script src="js/vue.min.js"></script> <script> //创建一个头部组件 var Vheader = { template:`<div><h2>Header</h2></div>` } //创建一个左侧组件 var Vaside = { template:`<...原创 2020-05-19 16:39:49 · 168 阅读 · 0 评论 -
Vue-02-组件与组件的创建
第二节课随堂笔记 一、知识点部分 局部组件: ①.只能在当前组件内使用 ②.创建组件口诀:声子(声明),挂子(挂载),用子(调用). ③创建组件时注意与关键字区分,如h5中的header不能相同,避免关键字,所以建议明明组件的时候首字母大写,也可使用驼峰命名法。 ④.如果使用驼峰命名法时,声明组件定义var AppName 时,调用的时候标签则为(命名大写,使用小写) 全局组件 ①.全局共享,任何组件都可以使用 <!DOCTYPE html> <html lang="en"&g原创 2020-05-19 16:30:49 · 148 阅读 · 0 评论 -
Vue-01-基本知识
第一节课随堂笔记 一、知识点部分 数据驱动视图 要理解这六个字方便了解vue(很重要); 实例化的对象可以监听自身内data中数据的变化; 如果template中定义了内容,那么优先显示template中的模板,如果没定义内容优先显示#app中的内容; 数据属性可以是对象也可以是函数(data最好写成function格式); 如果template中定义了内容,那么优先显示template中的模板,如果没定义内容优先显示#app中的内容; v-text {{}} 相当于innerText,可进行运算;v-原创 2020-05-19 15:36:48 · 112 阅读 · 0 评论