Fork me on GitHub

随笔分类 -  vue

摘要:gitHub地址:https://github.com/manlili/vue_spa 举个栗子: 阅读全文
posted @ 2016-09-27 16:54 半亩花田 阅读(1470) 评论(0) 推荐(0)
摘要:gitHub地址:https://github.com/manlili/vue_learn里面lesson12 一创建组建的步骤 或者用一种简单的方法创建组件 二 父子组件 或者另一种比较明了的写法: 三 Vue组件选项 四 Vue组件作用域(父子通信) 阅读全文
posted @ 2016-09-19 11:04 半亩花田 阅读(1404) 评论(1) 推荐(2)
摘要:gitHub地址: https://github.com/manlili/vue_learn里面lesson13 一 定位 混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中。 实际上,我也没搞懂这句话, 阅读全文
posted @ 2016-09-06 17:37 半亩花田 阅读(4497) 评论(1) 推荐(1)
摘要:gitHub地址: https://github.com/manlili/vue_learn里面lesson11 一 vue表单 实在是太简单了,直接来个例子 阅读全文
posted @ 2016-09-05 15:45 半亩花田 阅读(1255) 评论(0) 推荐(0)
摘要:gitHub地址:https://github.com/manlili/vue_learn里面lesson10 一 vue方法实现 二 方法传参 三 vue访问原生 DOM 事件 注意用$event获取 四 事件修饰符 阅读全文
posted @ 2016-09-05 14:56 半亩花田 阅读(44552) 评论(1) 推荐(2)
摘要:gitHub地址:https://github.com/manlili/vue_learn里面lesson09 一 for循环数组 二 for循环对象 三 track-by定义不需重新渲染的DOM片段 功能:有时候数组数据变化,页面所有DOM都需要重新渲染,这样会增加渲染时间,但是track-by可 阅读全文
posted @ 2016-09-05 14:14 半亩花田 阅读(1446) 评论(0) 推荐(0)
摘要:gitHub地址:https://github.com/manlili/vue_learn里面lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-show后面 输出结果是:显示我1 二 v-if显示多个元素,需配合<template> 注意else只能跟在v-if或者v- 阅读全文
posted @ 2016-09-04 14:04 半亩花田 阅读(3077) 评论(2) 推荐(2)
摘要:gitHub地址:https://github.com/manlili/vue_learn里面的lesson07 一 用对象的方法绑定class 很简单,举个栗子: 最后实现效果 关于使用对象绑定class,还可以用另外一种写法: 最后的实现效果是: 二 用数组的方法绑定class 很简单,举个栗子 阅读全文
posted @ 2016-09-04 11:50 半亩花田 阅读(15609) 评论(1) 推荐(2)
摘要:github地址:https://github.com/manlili/vue_learn里面的lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要计算属性 二 $watch实现计算属性 举个栗子: 正常输出时:a的值是1,b的值为0,但是当在控制台输入: 说明b的数据 阅读全文
posted @ 2016-09-03 17:17 半亩花田 阅读(7754) 评论(0) 推荐(1)
摘要:gitHub地址: https://github.com/manlili/vue_learn里面的lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个 阅读全文
posted @ 2016-09-03 16:28 半亩花田 阅读(30217) 评论(2) 推荐(5)
摘要:gitHub地址:https://github.com/manlili/vue_learn里面的lesson05 一 过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 上面代码输出:Abc 三 Vue自带的过滤器:uppercas 阅读全文
posted @ 2016-09-02 21:48 半亩花田 阅读(24529) 评论(5) 推荐(8)
摘要:gitHub地址:https://github.com/manlili/vue_learn里面lesson04 一 双括号用来数据绑定 (1)写法一: {{message}},这种可以实时响应 (2)写法二: {{*message}},单次插值,今后的数据变化就不会再引起插值更新了 (3)双括号标签 阅读全文
posted @ 2016-09-02 17:10 半亩花田 阅读(5154) 评论(0) 推荐(1)
摘要:github地址:https://github.com/manlili/vue_learn里面的lesson03 一 实例 每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vue实例同时改变,当然改变vue实例,data也同时改变,即 vue实例<=>data 在consol 阅读全文
posted @ 2016-09-01 21:58 半亩花田 阅读(2122) 评论(0) 推荐(0)
摘要:github地址:https://github.com/manlili/vue_learn里面的lesson03 一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 将上面代码贴入后,在chrome控制台进 阅读全文
posted @ 2016-09-01 18:39 半亩花田 阅读(62096) 评论(3) 推荐(23)
摘要:一 vue的定位 (1)Vue.js是一个构建数据驱动的 web 界面的库。 (2)Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 (3)Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。 (4)在与相关 阅读全文
posted @ 2016-08-30 15:38 半亩花田 阅读(473) 评论(0) 推荐(0)
摘要:工作中用了很久vue,但是都是我们这边前端经理封装好的组件,想要看到底部的原理还要从层层代码里面剥离出来,逻辑太复杂,还不如自己一点点整理一下,一步一步走下去. github地址:https://github.com/manlili/vue_learn里面的lesson01 目录如下: 一 单向数据 阅读全文
posted @ 2016-08-30 14:06 半亩花田 阅读(968) 评论(0) 推荐(0)