Vue,始作俑者:尤雨溪;动机:爱好;目标:没想过;现状:很好
Vue,读音 /vjuː/,类似于 view,是构建用户界面的渐进式框架。
Vue 采用自底向上增量开发的设计
Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合
Vue单文件组件 & 第三方库 = SPA应用
vue-cli提供了高效、快速、便捷的项目搭建
完整的文档体系
不支持IE8及其以下浏览器
Vue2.x强大的功能之一,用于封装可重用的代码
每一个vue组件必须是专注于解决一个单一的问题,独立的,可复用的,微小的,可测试的
组件是自定义元素,Vue给组件添加了定制化的功能
可以是原生HTML元素的形式,通过JS进行扩展【不推荐】
通过Vue直接注册的组件注意:在Vue对象实例化之前进行组件的创建命名规范组件驼峰命名法如:myComp;页面中使用时通过中划线连接,如 :组件的W3C命名规则,如:my-comp,页面中直接使用:
预先定义数据模板
命名规范:所有单词首字母大写
创建Vue实例,在实例中通过components选项注册组件
选项命名规则:驼峰命名法/W3C命名规则
局部组件,通常如果UI代码不复杂时也可以定义自定义指令
预先定义数据模板
命名规范:所有单词首字母大写
创建Vue实例,在实例中通过components选项注册组件
选项命名规则:驼峰命名法/W3C命名规则
局部组件,通常如果UI代码不复杂时也可以定义自定义指令
组件命名规则驼峰命名法:一个或者多个单词组成,第一个单词全部小写,后面每个单词首字母大写W3C命名规则:一个或者多个单词组成,单词全部小写,不同的单词通过中划线连接DOM解析问题原生HTML标签之间的固定嵌套关系,如table>tr>td,如果直接在中使用自定义组件会出现渲染时可能报错的问题通过is属性进行处理,避免错误/错误信息的出现data必须是函数让每个组件都有独立的数据,互相之间不产生干扰和数据污染(数据源的污染)
Vue2.x:父子组件数据传递
父组件-> 传递数据-> 子组件 == > 父组件通过子组件的props属性直接传递
子组件-> 传递数据-> 父组件 == > 子组件通过自定义事件给父组件进行传递
组件A -> 传递数据-> 组件B == > 组件之间,通过自定义事件和生命周期创建钩子传递
原始路由请求URL方式routes:[{path:”/url”, name:”default”, component:”myComp”}]router.push({default});变量封装原始路由请求参考:https://github.com/vuejs/vue-router/blob/next/examples/named-routes/app.js
指定视图名称,绑定对应的组件视图名称配置不指定名称,name默认为default处理方式参考:https://jsfiddle.net/6du90epg/308/
请求重定向
routes:[{path:”/url”, redirect:”/newpath”}]:请求地址从/url跳转到/newpath
routes:[{path:”/url”, redirect:{name:”router_name”}}]
请求转发【别名】
routes:[{path:”/url”, component:”comp”, alias:”/stayurl”}]
参考: https://github.com/vuejs/vue-router/blob/next/examples/route-alias/app.js