vuejs20项目实例开发部分讲解-Indexof.PPTVIP

* * Vuejs作为一款轻量级别的MVVM前端构建框架，无论是在框架大小还是在构建webapp的繁琐程度上，都优秀于react与angularjs，而且作为数据驱动的vuejs，事实反映数据带给文档Dom造成的变化也是非常棒的体验。 文件目录中明显看出，使用vuejs的模块化开发，会使得文档结构更加简单，能让开发的过程非常流畅，而且由于nodejs与npm使得开发中引入插件更为方便，根据需要进行引入。 引入插件 SPA组成 index入口 所有的vue将要挂载的点在index 公共资源 公共使用的css，resource，fonts等 components 组件 遵循默认样式原则，将重复率高的块制作成组件，使用声明注册 进行引入 vuejs2.0中，删除了很多标签属性，改用自定标签代替，例如v-link，v-link是router中的一种前端向router发送跳转请求的标签a的属性，2.0中直接有router-link代替，而通过router则直接改变router-view中对组件的引用。由图可知，在router-view上可以执行父子组件之间的通信，绑定被传送的data，子组件中相应使用props可以获得data的数据。 在单个组件中，引用公共资源的方式也是很方便的，例如以上的js引用跟scss文件混合文件与css文件的字体文件引用，这个可以很方便的解决外部引用公共文件的问题，加上style中的属性 scoped，只会在当前组件中使用以下的样式，并不会污染到其他组件中的样式，同时，在样式的处理中，我推荐使用scss或者stylus，在浏览器的兼容方面，vue-cli中的.postcss会帮我们把浏览器的兼容属性都自动填补，填补依据来自can i use。如果对于../../common这个路径觉得过于繁琐，可以在webpack中配置文件路径。 webpack中对于@的路径定义，解析的是src目录，所以如果想要更改import的根目录，可以在webpack。base.confog中对alias进行修改。 一个SPA页面在vuejs中可以分解成多个vue component，如左图。可以明显看到组件的父子关系非常清晰，而且数据也是“顺流直下”，Vuejs2.0在数据的处理中去除了多个属性，目的是为了不让数据被双向传递，过多的数据操作只会令编程人员对数据的流向产生错乱。因此尽量把数据使用父子这样的顺序安排，不是必要的条件下，尽量不要做派发或者广播操作（2.0中已去除）。 * *