Vue
文章平均质量分 64
小平果118
我是一匹奔腾的野马,需要你来征服。。。。。
展开
-
Vue.js学习 Item16 – 各种Web流行MV*框架对比
Angular选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合:在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部特性并投入开发。Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是任何时候都必须遵循 Angular 制定的规则。它仅仅是一个视图层,所以你可以将它嵌入一个现有页面而不转载 2016-07-12 00:15:12 · 3227 阅读 · 0 评论 -
Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
vue实现一个分页组件vue-paginaitonvue使用了一段时间的感触就是,我再也不想直接操作DOM了。数据绑定式的编程体验真是好。实现的一个分页组件。这里的css就不放出来了,可以看直接去github上下载:vue-pagination先上一张实例图吧模版<div class="page-bar"> <ul> <li v-if="showFirstText"><a v原创 2016-08-02 17:25:45 · 2888 阅读 · 0 评论 -
Vue.js学习 Item4 -- 数据双向绑定
Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板,请记住这点。插值文本数据绑定最基础的形式是文本插值,使用 “Mustache” 语法(双大括号):<span>Message: {{ msg }}</span>Mustache 标签会被相应数据对象的 msg 属性的转载 2016-07-07 23:55:19 · 3037 阅读 · 0 评论 -
Vue.js学习 Item3 -- 构造器与生命周期
构造器每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例:var vm = new Vue({ // 选项})一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名。在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文转载 2016-07-07 23:47:43 · 3965 阅读 · 0 评论 -
Vue.js学习 Item2 -- 原理概述
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。如果你是有经验的前端开发者,想转载 2016-07-07 23:39:43 · 3181 阅读 · 0 评论 -
Vue.js学习 Item1 --快速入门
我们以 Vue 数据绑定的快速导览开始。如果你对高级概述更感兴趣,可查看这篇博文。尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。在浏览器新标签页中打开它,跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装,查看安装教程。Hello World<div id="app"> {{ message }}</div>new Vue({ el: '#a转载 2016-07-07 23:05:27 · 3083 阅读 · 0 评论 -
Vue.js学习 Item13 – 指令系统与自定义指令
基础除了内置指令,Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令,它接收两个参数指令 ID 与定义对象。也可以用组件的 directives 选项注册一个局部自定义指令。钩子函数定义对象可以提供几个钩子函数(都是可选的):bind:只调用一次,在指令第一次绑定转载 2016-07-12 00:03:28 · 3524 阅读 · 1 评论 -
Vue.js学习 Item12 – 内部响应式原理探究
深入响应式原理大部分的基础内容我们已经讲到了,现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。这让状态管理非常简单且直观,不过理解它的原理也很重要,可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。如何追踪变化把一个普通对象传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用 Object.defi转载 2016-07-11 23:59:10 · 2929 阅读 · 0 评论 -
Vue.js学习 Item11 – 组件与组件间的通信
什么是组件?组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。使用组件注册之前说过,我们可以用 Vue.extend() 创建一个组件构造器:var MyComponent = Vue.exten转载 2016-07-11 23:52:44 · 3453 阅读 · 0 评论 -
超实用的JavaScript代码段 Item6 -- 对Json的增删改属性
使用JS对Json数据的处理,项目遇到需要对Json数据进行相关操作,比如增删改操作,本以为会比较难,网上搜索下,发现还是比较简单的,贴一段代码:<script type="text/javascript"> var json = { "age":24, "name":"cst" }; //修改Json中原创 2016-07-11 23:12:51 · 3084 阅读 · 0 评论 -
Vue.js学习 Item9 – 表单控件绑定
—title:Vue.js学习 Item9 – 表单控件绑定—基础用法可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。Text<span>Message is: {{ message }}</span><br><input type="text转载 2016-07-11 00:02:25 · 2508 阅读 · 0 评论 -
Vue.js学习 Item8 -- 方法与事件处理器
方法处理器可以用 v-on 指令监听 DOM 事件:<div id="example"> <button v-on:click="greet">Greet</button></div>我们绑定了一个单击事件处理器到一个方法 `greet`。下面在 Vue 实例中定义这个方法:var vm = new Vue({ el: '#example', data: { name: 'V转载 2016-07-08 00:29:23 · 2803 阅读 · 0 评论 -
Vue.js学习 Item6 -- Class 与 样式绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。绑定 HTML Class尽管可以用 Mustache 标签绑定转载 2016-07-08 00:03:01 · 3544 阅读 · 0 评论 -
Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用**计算属性**。基础例子<div id="example"> a={{ a }}, b={{ b }}</div>var vm = new Vue({ el转载 2016-07-07 23:58:54 · 13481 阅读 · 0 评论 -
Vue.js学习 Item10 – 过渡与动画
通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。为了应用过渡效果,需要在目标元素上使用 transition 特性:<div v-if="show" transition="my-transition"></div>转载 2016-07-11 23:35:30 · 4790 阅读 · 0 评论 -
Vue.js学习 Item14 – 过滤器与自定义过滤器
基础类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值:Vue.filter('reverse', function (value) { return value.split('').reverse().join('')})<!-- 'abc' => 'cba' --><span转载 2016-07-12 00:06:41 · 4389 阅读 · 1 评论 -
Vue.js学习 Item15 – 构建大型web应用
新: 使用脚手架工具 vue-cli 可以快速地构建项目:单文件 Vue 组件,热加载,保存时检查代码,单元测试等。Vue.js 的设计思想是专注与灵活——它只是一个界面库,不强制使用哪个架构。它能很好地与已有项目整合,不过对于经验欠缺的开发者,从头开始构建大型应用可能是一个挑战。Vue.js 生态系统提供了一系列的工具与库,用于构建大型单页应用。这些部分会感觉开始更像一个『框架』,但是它们本质上转载 2016-07-12 00:11:59 · 4178 阅读 · 0 评论