08 2017 档案
摘要：每一个vuex的应用的核心都是store(仓库)，store基本上就是一个容器，它包含着你的应用中大部分的状态（state）,vuex和单纯的全局对象有以下两点不同： 1，vuex的状态存储是响应式的。当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应的得
阅读全文
摘要：vuex是什么？ vuex是一个专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到vue的官方调试工具devtools extension ，提供了诸如零配置的time-travel调试、状态快照导
阅读全文
摘要：单元测试 配置和工具 任何兼容基于模块的构建系统都可以正常使用，但如果你需要一个具体的建议，可以使用Karma进行自动化测试。它有很多社区版的插件，包括对webpack和browserify的支持。 简单的断言 在测试的代码结构方面，你不必为了可测试在你的组件中做任何特殊的操作。只要导出原始设置就可
阅读全文
摘要：类flux状态管理的官方实现 由于多个状态分散的跨越在许多组件和交互间的各个角落，大型应用复杂度也经常逐渐增长。 为了解决这个问题，vue提供了vuex：我们有收到elm启发的状态管理库，vuex甚至集成到vue-detools。无须配置即可访问时光旅行。 简单状态管理起步使用 经常被忽略的是，Vu
阅读全文
摘要：官方路由 对于大多数单页面应用，都推荐vue-router库。 从零开始简单的路由 如果只需要非常简单的路由而不需要引入整个路由库，可以动态渲染一个页面级的组件像这样： const NotFound = {template:'<p>page not found</p>'} const Home =
阅读全文
摘要：生产环境部署提示 开启生产环境模式 开发时，vue会提供很多警告来帮你解决常见的错误与陷阱。生产时，这些警告却没有用，反而增加你的载荷量。再次，有些警告检查有小的运行时开销，生产环境模式下，是可以避免的。 不用打包工具 如果用vue完整独立版本，（直接用<script>元素引入vue），生产时应该用
阅读全文
摘要：在很多vue项目中，我们使用vue.component来定义全局组件，紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好，在这些项目里javascript只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全有j
阅读全文
摘要：开发插件 插件通常会为vue添加全局功能，插件的范围没有限制--一般有下面几种： 1，添加全局方法或者属性，例：vue-coustom-element 2，添加全局资源：指令、过滤器，、过渡等，如vue-touch; 3,通过全局mixin方法添加一些组件选项，如：vue-router; 4,添加v
阅读全文
摘要：混合(mixins)是一种分发vue组件中可复用功能的非常灵活的方式。混合对象可以可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混合到该组件本身的选项。 //定义一个混合对象 var myMixins = { created:function(){ this.hello(); }
阅读全文
摘要：除了默认设置的核心指令（v-model和v-show）,vue也允许注册自定义指令。在vue2.0版本中，代码复用的主要形式和抽象是组件--然而，有的情况下，你仍然需要对DOM元素进行底层操作，这时候就会用到自定义指令。 当页面加载时，元素将获得焦点（注意：autoFocus在移动版safari中不
阅读全文
摘要：之前创建的锚点标题组件是比较简单，没有管理或者监听任何传递给他的状态，也没有生命周期方法，它只是一个接受参数的函数 在这个例子中，我们标记组件为functional，这意味它是无状态(没有data),无实例(没有this上下文) 一个函数化组件就像这样： Vue.component('my-comp
阅读全文
摘要：基础 vue推荐在绝大多数情况下使用template来创建你的html。然而在一些场景中，你真的需要javascript的完全编程能力。这就是render函数。它比template更接近编译器 <h1> <a name="hello-world" href="#hello-world"> Hello
阅读全文
摘要：vue的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，例： 数字和运算 颜色的显示 svg节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合vue的响应式和组件系统，使用第三方库来实现切换元素的
阅读全文
摘要：到目前为止，关于过渡我们已经讲到， 单个节点 同一时间渲染多个节点的一个 那么怎么同时渲染整个列表，比如使用v-if？在这种场景下，使用<transition-group>组件，在我们深入例子之前，先了解关于这个组件的几个特点： 不同于<transition>，它会以一个真实元素呈现，默认为一个<s
阅读全文
摘要：会有6个css类名在leave/enter过渡中切换 1，v-enter：定义进入过渡的开始状态，在元素被插入时生效，在下一帧中移除 2，v-enter-active:定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在transition/animation完成后移除。这个类可以被用来
阅读全文
摘要：vue在插入，更新，或者移除DOM时，提供多种不同方式的应用过渡效果，包括以下工具： 在css过渡和动画中自动应用class 可以配合使用第三方的插件库，例animate.css 在过渡钩子函数中使用javascript直接操作DOM 可以配合使用第三方javascript动画库，如 Velocit
阅读全文
摘要：声明响应式属性 由于vue不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值： var vm = new Vue({ data: { // 声明 message 为一个空值字符串 message: '' }, template: '<div>{{ messag
阅读全文
摘要：vue最显著的特性就是不太引人注意的响应式系统(reactivity system),模型层（model）只是普通的javascript对象,修改它则更新视图view。这会让状态管理变得非常简单且直观。 如何追踪变化？ 把一个普通javascript对象传给vue实例的data选项，Vue将遍历此对
阅读全文
摘要：如果子组件有inline-template特性，组件将把它的内容当做模板，而不是把它当做分发内容，这样模板更灵活。 <my-component inline-template> <div> <p>These are compiled as the component's own template.<
阅读全文
摘要：自2.3.0起，异步组件的工厂函数也可以返回一个如下的对象。 const AsyncComp = () => ({ // 需要加载的组件. 应当是一个 Promise component: import('./MyComp.vue'), // loading 时应当渲染的组件 loading: Lo
阅读全文
摘要：动态组件 通过使用保留的<component>元素，动态的绑定到它的is特性，我们让多个组件同时使用同一个挂载点，并动态切换： var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home:
阅读全文
摘要：作用域插槽是一种特殊类型的插槽，用作使用一个（能够传递数据到）可重用模板替换已渲染元素。 在子组件中，只需将数据传递到插槽，就像你将props传递给组件一样： <div class="child"> <slot text="hello from child"></slot> </div> 在父级中，
阅读全文
摘要：有时候两个组件也需要通信（非父子关系），在简单的场景下，可以使用一个空的vue实例作为中央事件总线： var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-selected',1) //在组件B创建的钩子中监听事件 bus.$on('is-selected',
阅读全文
摘要：注意：vue组件中的data必须为一个函数，要不vue就会停止工作。 构成组件 组件意味着协同工作，通常父子组件会是这样的关系：组件A在它的模板中使用了组件B，他们之间必然需要相互通信：父组件需要给子组件传递数据，子组件需要将它内部的发生的事情告诉父组件。然而，在一个良好定义的接口中尽可能将父子组件
阅读全文
摘要：事件处理器 1.监听事件 可以用v-on指令监听DOM事件来触发一些js代码。 2.方法事件处理器 许多事件处理的逻辑都很复杂，所以直接把js代码写在v-on指令中是不可行的。因此v-on可以接受一个定义的方法来调用 3.内联处理器方法 除了直接绑定到一个方法，也可以用内联js语句 有时也需要在内联
阅读全文
摘要：数据绑定一个常见需求是操作元素的class列表和它的内联样式。因为他们都是属性，我们可以用v-bind来处理它们：只需要计算出表达式最终的字符串。不过字符串拼接麻烦又易错。因此，在v-bind用于class与style时，vue.js专门增强了它。表达式的结果类型除了字符串外，还可以是对象或数组。
阅读全文
摘要：在模板中写入过多的逻辑使模板过重且难以维护。因此有了计算属性（computed）的产生。 你可以像绑定普通属性一样在模板中绑定计算属性，vue知道计算属性中的函数依赖data中的数据。所以当data中的数据发生变化时。所有依赖计算属性中的函数也会更新。而且最妙的是，我们已经以声明的方式创建了这种依赖
阅读全文
摘要：以前一直听别人讲css的预编译语言，自己也没有具体的看过语法，后来因为公司人都慢慢用，我也准备学起来了，看了文档，其实也挺简单的，变量，混合器，继承。怕忘掉，所以在这做个笔记，便于自己以后的使用。（贴点官网的例子，这样一目了然） 1，变量声明 sass变量的声明和css属性的声明很像：
阅读全文