在上海乐字节学习前端渐进式框架【Vue】
一，Vue简单介绍
首先我们来看看Vue的官网介绍，
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
总而言之，简单点说，vue.js是目前前端最火的框架，不仅可以很好的开发网站，还可以开发移动app，同时支持对应的UI库和插件也都非常多。
二，Vue有哪些值得唠嗑的特点？
双向数据绑定：用户不在需要操作dom：
视图会随着数据自动变化，数据也会随着视图自动变化
虚拟dom：
提高渲染性能：
vue的虚拟dom是将多次dom操作保存在一个js对象（虚拟dom对象）中，
然后用这个js对象一次性的去更新dom操作，这样就避免了很多无效的计算
组件化开发：
便于组件管理和复用，提高开发效率
SPA单页面开发，把页面的一个个部分抽离出来当做组件
Vue有丰富的扩展插件？
vue-cli: vue 脚手架：可以很方便的利用webpack创建的一个初始化的vue项目
vue-resource(axios):ajax 请求
vue-router: 路由：单页面应用的核心
vuex: 状态管理：保存数据，解决组件之间的通信
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
ElementUI：vue ui组件库
三,具备哪些知识储备入手学习Vue？
首先自然是扎实的HTML,CSS.JS，其次就是需要了解ES6的的一些常用的语法，会安装node.js，了解一下打包工具webpack安装Vue的一些常用命令。
最简单的路由（非vue-cli）：
1.需要在新建的html文件里引入routes.js文件
2.HTML代码：
<div id="app">
<ul>
<li>
<router-link to='/home'>首页</router-link>
</li>
<li>
<router-link to='/list'>详情</router-link>
</li>
<li>
<router-link to='/delit'>我的</router-link>
</li>
<li>
<router-link to='/my'>我的</router-link>
</li>
</ul>
<router-view></router-view>//输出
</div>
js代码：
1 创建组件
var Home = {template:'<h1>我是首页</h1>'}
var List = {template:'<h1>我是列表页</h1>'}
var Delit = {template:'<h1>我是列表</h1>'}
var My = {template:'<h1>我是我的</h1>'}
//2 配置路由路径
const routes=[
{
path:'/home',//这里面的“home可以随便起名字，
//只是为了对应，我们把它起名叫做home”
component:Home
},
{
path:'/list',
component:List
},
{
path:'/delit',
component:Delit
},
{
path:'/my',
component:My
}
]
//3.实例化路由，并把配制的路由路径挂载到VueRouter上：
const router = new VueRouter({
routes
})
//4
new Vue({
router:router,//注意我上面的routes是简写了，如果你配置路
//径的数组名不是“routes”,那就要写全。
el:'#app'
})
上面说了如何不用VUE-cli来实现路由跳转；
（其实上面主要是方便你来理解下面的，真正写项目，我们基本不会用到上面的方式）
如何用vue-cli来实现：
首先你必须搭建好了vue的脚手架，然后才能继续下面的操作：
首先你需要下载路由，（用NPM安装）:
npm install vue-router
1
然后去看你的package.json文件，里面会有一个：
这里写图片描述
证明你已经安装成功，接下来就去使用吧。
我在桌面安装好了vue-cli,
我的项目就叫做“myobj”,
之后cd进入“myobj”目录,
执行
npm run dev
1
启动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里写：
<template>
<div>
<h1>我是A组件</h1>
</div>
</template>
这里是组件的写法，这里就不细说了，组件是啥，大家也都知道，值得注意的是，
template标签它只能包一个标签，也就是说它只能包一个最大的父级，在这个最大的父级里面随便你怎么布局，但是如果同时让template标签包裹两个标签，会报错。这里是编写页面时需要注意的一点。
接下来就在router 里的index.js里引入A这个组件>配置路由路径>然后在用router-link引入就可以了
这里写图片描述
之后：
这里写图片描述
当我点击到A时，可以跳转到A页面；
这里写图片描述
嵌套路由：
嵌套路由和平时的写法差不多，不过配置路由路径时写法要注意：
比如下面写一个list下面的detail页面： /list/detail
配置时：
import List from './list.vue';
import Detail from './detail.vue'
const routes =[
{
path:'/list',
component:List,
{
path:'detail',//这里需要注意不写“/”
component:Detail
}
}
]
html代码:
<router-link to='/list/detail'></router-link>
1
假如我们配置了一大堆的路由，那么想让页面一进来就显示我们想要显示的页面怎么办呢？
路由重定向：
官方解释：『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
只需要在配置路由路径的routes 数组里的最后一项这么写：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
路由重定向也可是一个命名的路由，也就是在name那写的，还可以是一个方法；具体我就不多说了，
如还有问题或需要课程资料请添加美女小助理微信即可获取：【lezijie006】 备注：67 ，不加备注不会通过哦！！！
之后还有一些路由动态跳转的方法；
配置路由时在路径后加 /：id,之后在另一个页面用$route.params.id来接收；
还有一个就是用“$route.query.name”来访问动态绑定的路由
就等下次更新再说吧。
如果你发现上述有误，或者你认为某些地方你觉得有误，请评论或私信，让我们能更好的完善这篇文章，方便大家一起进步。
