vuejs前端开发实战 vuejs( 二 )


尤雨溪:摇树的原理以一种特别的方式依赖于源代码的结构,这意味着最好从编码和设计API的一开始就考虑摇树 。将现有的大型代码库变成摇树算法可以利用的形式非常困难,因为需要大量修改API或进行重大重构(风险巨大) 。
Evrone:有关Vue 3中“基于函数的组件API”提案遭到了社区成员的强烈反对 。你有什么想法与其他开发人员分享吗?
尤雨溪:反对意见主要是因为担心我们会弃用Vue当前(2.x)的API,而我们认为这是一个错误的想法 。作为作者和维护者,我们常常在日常工作中与热心的早期采用者互动,对于新的想法,他们自然比新用户更感兴趣,这导致我们误解了向后兼容性的重要性 。用户不喜欢弃用现有的功能 。
重点在于,你需要了解用户的需求,这不是特别容易,有时你很难获取这样的信息,但无论怎样你需要认真听取大家的意见 。
Evrone:Vue的用户范围非常广泛,从小型企业到中型代理机构,再到数十亿美元的上市公司,就连Louis Vuitton和NASA都在使用Vue 。你能否推荐一个用Vue编写复杂前端的真实例子?
尤雨溪:问题在于,大多数复杂前端的项目都不是开源的 。我建议你看看Vue开发者工具和Vue命令行工具,尽管二者不是常见的面向消费者的Web应用程序,但都是用Vue编写的比较复杂的界面 。
总结
我们与尤雨溪进行了愉快的交谈,并了解了他的生活与编程方式 。我们经常使用Vue.js创建可满足客户独特需求的定制解决方案 。我们非常高兴有机会向该技术的作者讨教,增强我们的专业知识,同时也希望他们为我们提供更多可用于开发创新产品的工具 。
用户不喜欢弃用现有的功能 。重点在于,你需要了解用户的需求,这不是特别容易,有时你很难获取这样的信息,但无论怎样你需要认真听取大家的意见 。
Vue.js 入门BootCDN(国内)
unpkg
cdnjs
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用 。
进入项目,安装并运行:
打开localhost:8080
vue实例:
选项API:
组件化应用构建
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
指令邦定
指令
指令 (Directives) 是带有 v- 前缀的特殊属性
v-bind:
v-on:
v-if
v-for:
v-model:
数据,方法,计算属性,侦听器
生命周期
组件
全局注册
【vuejs前端开发实战 vuejs】 局部注册
组件组合
组件 A 在它的模板中使用了组件 B 。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件 。
prop 向下传递,事件向上传递
子组件要显式地用props选项 声明它预期的数据:
动态邦定prop
单项数据流
Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会 。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解 。
注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态 。
自定义事件
每个 Vue 实例都实现了 事件接口 ,即:
父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件 。
这里有一个如何使用载荷 (payload) 数据的示例:
官方支持的vue-router 库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 。
Vue.js 是构建客户端应用程序的框架 。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM 。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序 。

vuejs前端开发实战 vuejs

文章插图
Vue.js生命周期的详细介绍总共分为8个阶段,分别为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroyed、destroyed.
beforeCreate:在实例初始化之后,数据观测者(data observer)和event/watcher事件配置之前调用 。
在此阶段无法通过vm访问到data中的数据,methods中的方法 。
created:在实例创建完成后立即调用 。在这一步,实例已完成以下的配置:数据观测者,属性和方法的运算,watch/event事件回调 。然而,挂载阶段还没开始,Sel属性目前不可见 。

秒懂生活扩展阅读