在上海乐拜[Vue]学习前端渐进式框架
1.Vue简介首先我们来看一下Vue官网的介绍。Vue（读作/vju?/，类似于视图）是一组用于构建用户界面的工具。渐进式框架。与其他大型框架不同，Vue被设计为自下而上逐层应用。Vue的核心库只专注于视图层，不仅易于使用，而且易于与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持库相结合时，Vue也完全有能力为复杂的单页应用程序提供支持。总而言之，简单来说，vue.js是目前最流行的前端框架。不仅可以很好的开发网站，还可以开发手机APP。同时支持大量对应的UI库和插件。二、Vue有哪些值得说说的特点？双向数据绑定：用户不再需要操作dom：视图会随着数据自动变化，数据也会随着视图自动变化虚拟dom：提高渲染性能：vue的虚拟dom将多个dom操作省去了一个js对象（虚拟dom对象），然后使用这个js对象一次性更新dom操作，这样就避免了很多无效的计算组件开发：方便组件管理和复用，提高开发效率。这部分被提取为组件。Vue有丰富的扩展？vue-cli:vuescaffolding:webpack创建的初始化vue项目，可以方便使用vue-resource(axios):ajax请求vue-router:路由:单页应用的核心vuex:状态管理:保存数据，解析组件vue-lazyload之间的通信：图片延迟加载vue-scroller：页面滑动相关ElementUI：vueui组件库3.开始学习Vue有哪些知识储备？首先自然是扎实的HTML、CSS.JS，其次需要了解ES6的一些常用语法，就可以安装node.js，学习一些用打包工具安装Vue的常用命令网页包。最简单的路由（非vue-cli）：1.需要在新建的html文件中引入routes.js文件2.HTML代码：//输出
js代码：1创建组件varHome={template:'
我是首页
'}varList={template:'
我是一个列表页
'}varDelit={template:'
我是一个列表
'}varMy={template:'
我是我的
'}//2配置路由路径constroutes=[{path:'/home',//"这里的home可以随便命名，//只是为了对应，我们就把它命名为home"component:Home},{path:'/list',组件:List},{path:'/delit',component:Delit},{path:'/my',component:My}]//3.实例化路由，将配置好的路由路径挂载到VueRouter：constrouter=newVueRouter({routes})//4newVue({router:router,//注意上面的路由是缩写的，如果你配置了路径//路径的数组名不是"routes"，则写Fullel:'#app'})上面提到了不用VUE-cli如何实现路由跳转；（其实上面主要是为了让大家理解下面的内容，我们在实际写项目的时候基本不会用到上面的方法）如何使用vue-cli实现：首先要搭建vue脚手架，然后你可以继续下面的操作：首先，你需要下载路由器，（用npm安装）：npminstallvue-router1然后到你的package.json文件里面，会有一个：Writethepicturedescriptionheretoprovethat你已经成功安装它，然后使用它。我在桌面安装了vue-cli，我的项目叫“myobj”，然后cd到“myobj”目录下，执行npmrundev1启动VUE，然后说说文件目录：这里写图片描述，注意到src目录；这里assets存放图片，components存放组件，router存放配置路由的js文件。这个APP.vue基本不碰，再看看router目录下的index.js：在这里写图片描述可以看到，1-3行，使用ES6模块导入，先导入“vue”,和“vue-router”，然后是一个叫“HelloWorld”的组件，后面是路径，当然这个不用细说，接下来会调用use方法，全局使用Router。如果您使用的是“webpack”而不是“webpack-simble”，那么您无需担心这一点，因为“webpack”是自动配置的。那就直接扔吧，也就是代码的第7-15行。接下来我们自己写一个组件：比如叫组件A.vue然后在A.vue中写：
我是A组件
这里是组件的写法这里就不赘述了。每个人都知道组件是什么。值得注意的是，模板标签只能包含一个标签，也就是说，它只能包含一个最大的父标签。你可以在parentlevel中随意布局，但是如果让template标签同时包裹两个标签，就会报错。在编写页面时，请记住以下几点。接下来在router中引入index.js中的A组件>配置路由路径>然后用router-link引入。Writethepicturedescriptionhere后：Writethepicturedescriptionhere。当我点击A时，我可以跳转到页面A；这里写一张图来描述嵌套路由：嵌套路由和通常的写法差不多，但是在配置路由路径的时候要注意写法：比如在下面的列表下面写一个详情页：/list/detail配置时：importListfrom'./list.vue';importDetailfrom'./detail.vue'constroutes=[{path:'/list',component:List,{path:'detail',//需要注意不要写“/”component:Detail}}]html代码：
1如果我们配置了很多的路由，那么我们想要一进来就显示我们想要的页面，那要显示的页面呢?路由重定向：官方解释：“重定向”是指当用户访问/a时，将URL替换为/b，然后匹配路由为/b只需要是配置路由路径的routes数组中的最后一个即可，item这样写：constrouter=newVueRouter({routes:[{path:'/a',redirect:'/b'}]})路由重定向也可以是具名路由，写在名称中，也可以是方法；不细说了，如果还有疑问或者需要课程资料，请加美妆小助手微信获取：[lezijie006]备注：67，不加备注不及格！！！之后还有一些路由动态跳转的方法；配置路由时，在路径后加上/:id，然后在另一个页面使用$route.params.id接收；另一种是使用“$route.query.name”让我们等待下一次更新访问动态绑定的路由。如果你发现以上说的不对，或者你觉得有一些自己认为不对的地方，欢迎评论或者私信，以便我们更好的完善本文，让大家共同进步。
