摘要:
官方路由 对于大多数单页面应用,都推荐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 阅读全文