vue2.x学习笔记（一）

vue2.0学习笔记之路由（二）路由嵌套+动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0学习笔记之路由(二)路由嵌套+动画</title> <link rel="stylesheet" href="animate.css"> </head> <body> &…

vue2.0学习笔记之路由（二）路由嵌套

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0学习笔记之路由(二)路由嵌套</title> </head> <body> <div id="app"> <div> <router-link to="/home…

#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性: #,过滤器可以串联 {{ message | filterA | filterB }} #,条件渲染 #,注意v-if与v-show的区别,v-if是决定是否创建DOM,而v-show则是DOM始终存在,只是改变了显示样式: #,如果要切换多个元素的时候,我们就使用<template v-if='ok'>: #,v-if 有更高的切换消…

vue2.x学习笔记（二十二）

接着前面的内容:https://www.cnblogs.com/yanggb/p/12633051.html. 自定义指令简介除了核心功能默认内置的指令([v-mode]和[v-show]等),vue也允许注册自定义指令.注意,在vue2.x中,代码复用和抽象的主要形式是组件.然而,在有的情况下,我们仍然会需要对普通的dom元素进行底层直接操作,这时候就会用到自定义指令. 举一个聚焦输入框的例子:当页面加载的时候,需要该输入框获得焦点(注意,autofocus属性在移动版的safari上不工…

vue2.x学习笔记（十九）

接着前面的内容:https://www.cnblogs.com/yanggb/p/12631022.html. 程序化的事件侦听器在前面的学习中,我们已经知道了[$emit]全局属性的用法,它可以被[v-on]指令侦听,但是vue实例同时在其事件接口中提供了其他的方法,我们可以: 1.通过[$on(eventName, eventHandler)]侦听一个事件. 2.通过[$once(eventName, eventHandler)]一次性侦听一个事件. 3.通过[$off(eventName…

vue2.x学习笔记（十七）

接着前面的内容:https://www.cnblogs.com/yanggb/p/12616847.html. 动态组件&异步组件在前面学习组件基础的时候学习过动态组件,官方文档给出过一个例子:在一个多标签的界面中使用[is]属性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 在上面的例子中,切换组件是会创建一个新的实例的,这就意味着你在前一个组件所做的一些操作不会被保…

vue2.x学习笔记（十六）

接着前面的内容:https://www.cnblogs.com/yanggb/p/12616543.html. 组件中的插槽在2.6.0的版本中,vue为具名插槽和作用域插槽引入了一个新的统一的语法(即[v-slot]指令),它取代了[slot]和[slot-scope]这两个目前已经被废弃但是还没被移除且仍在文档中的attribute. 插槽内容 vue实现了一套内容分发的api,这套api的设计灵感来源于web components的规范草案,将<slot>元素作为承载分发内容的出口.…

vue2.x学习笔记（十五）

接着前面的内容:https://www.cnblogs.com/yanggb/p/12609450.html. 组件的自定义事件这里来学习一下组件中的自定义事件. 事件名不同于组件名和prop,事件名不存在任何自动化的大小写转化,而是触发的事件名需要完全匹配监听这个事件所用的名称. 举个例子,如果触发一个camelCase名字的事件: this.$emit('myEvent') 则监听这个名字的kebab-case版本是不会有任何效果的:  <my-comp…

vue2.x学习笔记（十二）

接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例这里有一个vue组件的实例: // 定义一个名为button-counter的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click…

vue2.x学习笔记（十一）

接着前面的内容:https://www.cnblogs.com/yanggb/p/12586416.html. 表单的输入绑定表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录入功能,因此要特别认真仔细地掌握其中的相关知识点. 基础用法你可以使用[v-model]指令在表单<input>.<textarea>以及<select>元素上创建双向数据绑定,它会根据控件(元素)的类型自动选取正确的方式来更新元素.尽管看起来有些神奇,但是[v-mode…