随笔分类 -  vue.js

摘要:每一个vuex的应用的核心都是store(仓库),store基本上就是一个容器,它包含着你的应用中大部分的状态(state),vuex和单纯的全局对象有以下两点不同: 1,vuex的状态存储是响应式的。当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应的得 阅读全文
posted @ 2017-08-30 11:26 susanws 阅读(126) 评论(0) 推荐(0) 编辑
摘要:vuex是什么? vuex是一个专为vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到vue的官方调试工具devtools extension ,提供了诸如零配置的time-travel调试、状态快照导 阅读全文
posted @ 2017-08-30 11:07 susanws 阅读(141) 评论(0) 推荐(0) 编辑
摘要:单元测试 配置和工具 任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用Karma进行自动化测试。它有很多社区版的插件,包括对webpack和browserify的支持。 简单的断言 在测试的代码结构方面,你不必为了可测试在你的组件中做任何特殊的操作。只要导出原始设置就可 阅读全文
posted @ 2017-08-29 14:13 susanws 阅读(264) 评论(0) 推荐(0) 编辑
摘要:类flux状态管理的官方实现 由于多个状态分散的跨越在许多组件和交互间的各个角落,大型应用复杂度也经常逐渐增长。 为了解决这个问题,vue提供了vuex:我们有收到elm启发的状态管理库,vuex甚至集成到vue-detools。无须配置即可访问时光旅行。 简单状态管理起步使用 经常被忽略的是,Vu 阅读全文
posted @ 2017-08-29 11:04 susanws 阅读(793) 评论(0) 推荐(0) 编辑
摘要:官方路由 对于大多数单页面应用,都推荐vue-router库。 从零开始简单的路由 如果只需要非常简单的路由而不需要引入整个路由库,可以动态渲染一个页面级的组件像这样: const NotFound = {template:'<p>page not found</p>'} const Home = 阅读全文
posted @ 2017-08-28 17:38 susanws 阅读(162) 评论(0) 推荐(0) 编辑
摘要:生产环境部署提示 开启生产环境模式 开发时,vue会提供很多警告来帮你解决常见的错误与陷阱。生产时,这些警告却没有用,反而增加你的载荷量。再次,有些警告检查有小的运行时开销,生产环境模式下,是可以避免的。 不用打包工具 如果用vue完整独立版本,(直接用<script>元素引入vue),生产时应该用 阅读全文
posted @ 2017-08-28 17:24 susanws 阅读(2350) 评论(0) 推荐(0) 编辑
摘要:在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好,在这些项目里javascript只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全有j 阅读全文
posted @ 2017-08-28 15:09 susanws 阅读(249) 评论(0) 推荐(0) 编辑
摘要:开发插件 插件通常会为vue添加全局功能,插件的范围没有限制--一般有下面几种: 1,添加全局方法或者属性,例:vue-coustom-element 2,添加全局资源:指令、过滤器,、过渡等,如vue-touch; 3,通过全局mixin方法添加一些组件选项,如:vue-router; 4,添加v 阅读全文
posted @ 2017-08-28 11:14 susanws 阅读(174) 评论(0) 推荐(0) 编辑
摘要:混合(mixins)是一种分发vue组件中可复用功能的非常灵活的方式。混合对象可以可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混合到该组件本身的选项。 //定义一个混合对象 var myMixins = { created:function(){ this.hello(); } 阅读全文
posted @ 2017-08-25 18:12 susanws 阅读(553) 评论(0) 推荐(0) 编辑
摘要:除了默认设置的核心指令(v-model和v-show),vue也允许注册自定义指令。在vue2.0版本中,代码复用的主要形式和抽象是组件--然而,有的情况下,你仍然需要对DOM元素进行底层操作,这时候就会用到自定义指令。 当页面加载时,元素将获得焦点(注意:autoFocus在移动版safari中不 阅读全文
posted @ 2017-08-25 15:02 susanws 阅读(305) 评论(0) 推荐(0) 编辑
摘要:之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data),无实例(没有this上下文) 一个函数化组件就像这样: Vue.component('my-comp 阅读全文
posted @ 2017-08-25 13:56 susanws 阅读(324) 评论(0) 推荐(0) 编辑
摘要:基础 vue推荐在绝大多数情况下使用template来创建你的html。然而在一些场景中,你真的需要javascript的完全编程能力。这就是render函数。它比template更接近编译器 <h1> <a name="hello-world" href="#hello-world"> Hello 阅读全文
posted @ 2017-08-24 18:04 susanws 阅读(1384) 评论(0) 推荐(0) 编辑
摘要:vue的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢,例: 数字和运算 颜色的显示 svg节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来,可以直接转换到数字。做到这一步,我们就可以结合vue的响应式和组件系统,使用第三方库来实现切换元素的 阅读全文
posted @ 2017-08-24 11:41 susanws 阅读(481) 评论(0) 推荐(0) 编辑
摘要:到目前为止,关于过渡我们已经讲到, 单个节点 同一时间渲染多个节点的一个 那么怎么同时渲染整个列表,比如使用v-if?在这种场景下,使用<transition-group>组件,在我们深入例子之前,先了解关于这个组件的几个特点: 不同于<transition>,它会以一个真实元素呈现,默认为一个<s 阅读全文
posted @ 2017-08-24 10:48 susanws 阅读(606) 评论(0) 推荐(0) 编辑
摘要:会有6个css类名在leave/enter过渡中切换 1,v-enter:定义进入过渡的开始状态,在元素被插入时生效,在下一帧中移除 2,v-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在transition/animation完成后移除。这个类可以被用来 阅读全文
posted @ 2017-08-23 17:21 susanws 阅读(711) 评论(0) 推荐(0) 编辑
摘要:vue在插入,更新,或者移除DOM时,提供多种不同方式的应用过渡效果,包括以下工具: 在css过渡和动画中自动应用class 可以配合使用第三方的插件库,例animate.css 在过渡钩子函数中使用javascript直接操作DOM 可以配合使用第三方javascript动画库,如 Velocit 阅读全文
posted @ 2017-08-23 14:27 susanws 阅读(144) 评论(0) 推荐(0) 编辑
摘要:声明响应式属性 由于vue不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值: var vm = new Vue({ data: { // 声明 message 为一个空值字符串 message: '' }, template: '<div>{{ messag 阅读全文
posted @ 2017-08-23 10:59 susanws 阅读(1462) 评论(0) 推荐(0) 编辑
摘要:vue最显著的特性就是不太引人注意的响应式系统(reactivity system),模型层(model)只是普通的javascript对象,修改它则更新视图view。这会让状态管理变得非常简单且直观。 如何追踪变化? 把一个普通javascript对象传给vue实例的data选项,Vue将遍历此对 阅读全文
posted @ 2017-08-22 16:33 susanws 阅读(297) 评论(0) 推荐(0) 编辑
摘要:如果子组件有inline-template特性,组件将把它的内容当做模板,而不是把它当做分发内容,这样模板更灵活。 <my-component inline-template> <div> <p>These are compiled as the component's own template.< 阅读全文
posted @ 2017-08-22 14:30 susanws 阅读(2052) 评论(0) 推荐(0) 编辑
摘要:自2.3.0起,异步组件的工厂函数也可以返回一个如下的对象。 const AsyncComp = () => ({ // 需要加载的组件. 应当是一个 Promise component: import('./MyComp.vue'), // loading 时应当渲染的组件 loading: Lo 阅读全文
posted @ 2017-08-22 10:01 susanws 阅读(1428) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示