guqing

毕生所求无它,爱与自由而已

Vue 学习之九Vue计算属性与webpack

文章已迁移到新地址,访问 https://guqing.xyz/archives/how-to-use-vue2

Vue 学习笔记之八获取组件对象和使用 vue-router

8 获取dom对象和组件的对象 ref 被用来给元素或子组件注册引用信息。 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例: 关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在! 包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 9.1 路由写法和传参 引入vuejs和vue-router 9.2 嵌套路由

Vue 学习笔记之七组件的使用

7.4 组件的动态切换 首先注册两个组件,login和regist 组件的切换使用component标签的is属性 只要控制is的值即可控制组件的显示,如上通过点击事件改变cname的值来切换组件 7.5 父组件与子组件传值 父组件向子组件传值 定义组件 在组件中有一个props属性在其中定义变量负责接收父组件传递过来的值 然后在组件模板中使用插值表达式接收{{name}} 父组件如何向子组件传递值?

Vue 学习笔记之六进入/离开 & 列表过渡

包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 6.2 transition过渡 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。

Vue 学习笔记之五Vue生命周期

beforeMount 类型:Function 详细: 在挂载开始之前被调用:相关的 render 函数首次被调用。 该钩子在服务器端渲染期间不被调用。 $nextTick 替换掉 mounted: 该钩子在服务器端渲染期间不被调用。 该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。 该钩子在服务器端渲染期间不被调用。 该钩子在服务器端渲染期间不被调用。 调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

Vue 学习笔记之四Vue的Ajax请求

Vue的Ajax请求 4.1 Vue-resource插件介绍 下载地址: $.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。 另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为,比如使用inteceptor在ajax请求时显示loading界面。 支持拦截器 拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。

Vue 学习笔记之三

3.4.1 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选): **bind:**只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置。 3.4.2钩子函数参数 指令钩子函数会被传入以下参数: el:指令所绑定的元素,可以用来直接操作 DOM 。 3.4.3 自定义全局属性指令用法 使用自定义指令 3.4.4 自定义私有指令 使用自定义元素 3.4.5 函数简写 在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。

Vue学习笔记之二Vue-Devtools及过滤器

Vue在chrome浏览器的调试工具Vue-Devtools 作用 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。 安装地址: 或者 2.1 vue过滤器 2.1.1 系统过滤器 关于系统过滤器的使用请参考文档:https://v1.vuejs.org/api/#Filters 注意:系统过滤器是Vue1.0中存在的,在vue2.0中已经删除了 2.1.2 自定义过滤器 2.1.2.1 私有过滤器 以上为创建一个私有日期格式化过滤器,使用方式与系统过滤器一样 2.1.2.2 全局过滤器 html代码同私有过滤器 js如下: 全局过滤器在全局共有,在不能的Vue对象中都可以使用

Vue 学习笔记之一起步

v-for遍历对象 运行结果: 在遍历对象的键值对时除了 value ,key在第三个位置还有一个索引 v-for="(value,key,index) in user" v-for迭代数字 count迭代从1开始 v-for中key的使用 使用key来强制数据关联 1.3数据绑定v-bind v-bind是vue中提供的用于绑定属性的指令,v-bind可以简写为:要绑定的属性,v-bind中还可以写合法js表达式如: 1.4事件绑定v-on 为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法: 注意reverseMessage方法中,我们不用直接操作DOM即可更新状态 除了v-on:click,v-on事件可以绑定: mouseenter mouseleave 等事件 v-on事件缩写:@事件名 事件修饰符: .stop阻止冒泡 .prevent阻止默认事件 .capture添加事件侦听器使用事件捕获模式 .self只当事件在该事件本身(比如不是子元素)触发时触发回调 .once事件只触发一次 1.5事件修饰符案例: 运行结果:(冒泡机制限制性当前的事件再往外冒) 如果想要阻止冒泡则在@click上加.stop: 执行结果(阻止了事件向外冒泡): 阻止默认行为.prevent 如上点击会跳转到百度,如果想阻止a标签的默认跳转事件则: 点我到百度 capture .capture机制即捕获机制,与冒泡机制相反,事件从往里执行 self .self机制只触发本身的事件,既不事件冒泡也不捕获,只会阻止自己身上冒泡行为的触发而不会影响其他元素的事件 once 使用.once,事件只触发一次 1.6简单案例:跑马灯效果 1.7v-model指令: v-bind只能实现数据的单项绑定,从M自动绑定到V,无法实现数据的双向绑定 v-model它能轻松实现表单输入和应用状态之间的双向绑定。

Lucene 和 Solr 教程:从零开始学习全文搜索

1.3 Lucen 实现全文索引的流程 1.红色表示所有过程,对要搜索的原始内容进行索引,构建一个索引库,索引过程包括: 确定原始内容即要搜索的内容 --> 采集文档 --> 创建文档 --> 分析文档 --> 索引文档 2.橙色表示搜索过程,从索引库中搜索内容,搜索过程包括: 用户通过搜索界面 --> 创建查询 --> 执行搜索,从索引库查询 --> 渲染搜索结果 1.4 创建索引 1.4.1 获得原始文档 原始文档是指要索引和搜索的内容,原始内容包括互联网上的网页、数据库中的数据、磁盘上的文件等 本例中的原始内容就是磁盘上的文件,如下图所示: 从互联网上、数据库、文件系统中等获取需要搜素的原始信息,这个过程就是信息采集,信息采集的目的是为了对原始内容进行索引。