最近在学习慕课网的课程：用vue.js做一个仿饿了么外卖APP的项目，现在也把流程啊什么的暂时先整理一下在这个博客上面。
当然，这个过程会有点长，不过确实能学到很多东西。
话不多说，马上开始吧。
注：当我们把用vue-cli脚手架搭建成的vue项目复制到其他地方时，要把node_modules目录删除，不然在其他地方无法执行cnpm run dev，这其中设计到路径的问题。删除之后要重新cnpm install。
=created
选用当前最火的MVVM框架作为这个项目的技术栈
MVVM架构：
View和model通过viewModel来通信，但数据发生变化，viewmodel能够观察到这种数据的变化，然后通知到对应的视图做自动更新；当用户操作view视图，viewModel也能监听到视图的变化，然后通知数据做改动，实现了数据的双向绑定。
应用场景：
针对具有复杂交互逻辑的前端应用；
它可以提供基础的架构抽象；
可以通过AJAX数据持久化，保证前端用户体验
好处：
当前端和数据做一些操作的时候，可以通过AJAX请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景，刷新页面太昂贵，会重新加载很多资源，虽然有些会被缓存，但是页面的DOM,JS,CSS都会被页面重新解析一遍，因此移动端页面通常会做出SPA单页应用。
Vue.js的特点：MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
核心思想：数据驱动、组件化。
项目开发的一个完整流程：
项目的需求分析--脚手架工具--数据mock--架构设计--代码编写--自测--编译打包等方面完全简讲述开发一个web的全流程，更好地了解一个项目从0到1的过程。
当然这个项目在开发中也会以线上生产环境的代码质量来要求。
这个过程还包括：
代码开发及测试环节：以像素级完美还原UI设计图；以真实外卖APP数据做演示，以保证代码无兼容性问题。
代码规范：
项目中所用的代码大到架构设计、组件抽象、模块拆分、代码风格统一、JS变量命名规范、CSS代码规范。致于编写高可维护、易于拓展、通用性强的代码，了解真实互联网公司是如何开发前端项目的。
所需技术：
流程及开发方法：
项目完整的开发流程；组件化、模块化的开发模式；使用Vue-cli脚手架初始化Vue.js项目；webpack的打包原理；模拟json后端数据，前后端分离开发；es6+eslint的开发方式。
第三方组件：
使用stylus编写模块化的CSS；使用vue-router开发单页应用；使用vue-resource与后端数据交互；在Vue.js框架里和第三方JS插件交互。
设计思想与模式：
使用Vue.js的过渡编写酷炫的交互动画；移动端设备像素比；制作并使用图标字；解决移动端1px边框问题；移动端经典的css sticky footer布局；flex弹性布局。
在数据驱动的思想里，数据驱动DOM变化，DOM是数据的一种自然映射。
如果没有MVVM框架，数据和视图是如何交互的？
比如通过AJAX从后端获取数据，会让视图改变，通过手动触发DOM的改变；再比如我们通过前端交互改变一些数据，为了让视图也发生变化，仍然需要通过手动触发进行DOM改变。手动改变DOM不仅繁琐，还容易出错。用了vue之后就可以省去操作DOM变化的步骤了。
在vue.js中，可以通过directives指令去对DOM做一层封装，当数据发生变化，会通知指令去修改对应的DOM。
Vue.js还会对操作做监听，当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。
这个工程就实现了数据的双向绑定。
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
思路整理
已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉defineProperty，猛戳这里
整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者
详情可查看：
目的：拓展HTML元素，封装可重用代码
如下图：左侧是一个页面，被拆分成小的区块，每个区块对应一个组件，组件可以嵌套，最终组合成为一个完整页面。
在vue.js中，每个组件都对应一个viewModel，最终生成一个viewModel的树：
组件设计原则：
页面上每一个独立的可视/可交互区域都可以视为一个组件。比如一个页面的header、footer等等；
每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。就近维护原则就体现了前端工程化思想，每个开发者都知道自己所开发的单元，代码存在对应的组件目录中。在vue.js中可以通过.vue文件来实现；
页面不过是组件的容器，组件可以嵌套自由组合形成完整地页面。在本次项目开发中，会拆分成一个个组件。
可以参考：Vue.js：轻量高效的前端组件化方案
一个简单的HTML页面，以此为基础：
<!DOCTYPE html><html><head><title>揭开Vue组件的神秘面纱</title></head><body>//这中间就是实例挂载点的实例边界<div id="vueInstance"></div><script src=".0.16/vue.js"></script><script>// 创建一个新的Vue实例，并设置挂载点var V = new Vue({el : '#vueInstance'});</script></body></html> 在Vue中，可以使用Vueponent()来创建和注册你的组件，这个构造器有两个参数：组件的名字；包含组件参数的对象。
这个对象有点像Vue()构造器里的对象，它也有类似于Vue()里的el属性和data属性，但是又有点不一样。
接下来注册一个组件。创建并传入两个参数：组件的名字:'mine'；包含组件参数的对象:这个对象包含一个属性'template'。
Vueponent('mine',{template : '<p>My name is Appian.</p>'
}) 现在你已经有了自己的一个组件了，你可以在你的应用的任何地方使用它。只要你调用它的唯一标识(就是组件名字)，并用普通html标签的格式来书写，比如<mine></mine>，组件上注册的内容就会在你的自定义标签的地方插入。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue组件</title>
</head>
<body><div id="vueInstance"><mine></mine> <mine></mine><mine></mine> </div><script src=".0.16/vue.js"></script><script>Vueponent('mine',{ //这里就是注册的内容template : '<p>My name is Vue.</p>'});// 创建一个新的Vue实例，并设置挂载点var V = new Vue({el : '#vueInstance'});</script>
</body>
</html> 如果总是在vueponent()构造器里写html代码，复杂页面就不得了了。为了避免上面的这种情况，所以我们可以用template标签（注意属性和标签是不一样的）来达到我们的目的。我们可以在页面的任何地方，定义template标签，并在template标签内，写好我们的模板。因为template标签在页面加载的时候不会渲染出来，只有在我们需要它的时候，这个标签内的内容才会被渲染出来。所以，你可以把template标签放在任何地方，并给它一个id，以便在组件注册的时候能够找到模板。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue组件</title>
</head>
<body><div id="vueInstance"><mine></mine> </div><template id="myVue"><p>i am vue</p><p>welcome!</p></template><script src=".0.16/vue.js"></script><script>Vueponent('mine',{ //这里就是注册的内容template : '#myVue'});// 创建一个新的Vue实例，并设置挂载点var V = new Vue({el : '#vueInstance'});</script>
</body>
</html> Vue是处理父组件向子组件中传递数据是通过props。
Vueponent('mine',{template : '<p>Appian is from {{ city }}.</p>',props : ['city']
}); props可以是数组，也可以是对象。
那父组件那里又是怎么指派字段给子组件的呢？
<mine city="welcome"></mine>
更多详细内容可以阅读：
转载于:.html
本文发布于:2024-02-01 04:26:00，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170673276133843.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
