vue框架学习使用
vue是当下非常流行的前端框架，在国内的流行程度已经超过了angular，react，原因主要是后来居上，上手容易，能够快速开发出产品。
这三个框架都是单页面框架，有很多概念是相似的，比如数据绑定，事件绑定，路由，组件等。
何为单页面应用呢？单页面意思就是说，展示在前端的页面都由这个模板页面衍生的，
后续都是数据交互，无页面。这就是为什么我们看到的管理系统，总是左边导航栏，就是是采用了局部刷新的技术。而jsp技术，一个jsp文件就是一个页面。整个页面都是后端请求的。
作为一个框架，我们就使用vue cli搭建一个项目，这些基本目录都是前端实践留下的宝贵实践，用这些目录就好，而不必问为什么，因为真的没有为什么。实践有用，就是真的有用。
说实话，习惯了angular层次分明的设计,对于vue的开发方法还是有点不习惯，vue的最典型的开发方式是：
new Vue({
render: h =>h(App),
}).$mount('#app') // 这段代码是简写，可以还原理解
import App from './App'
new Vue({
el: '#root',
template: '<App></App>;',
components: {
App
}
})
这里创建的vue实例没有el属性，而是在实例后面添加了一个$mount('#app')方法。
$mount('#app'😉 ：手动挂载到id为app的dom中的意思
当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载
Vue采用虚拟dom的思想，我们的component都被挂载相应的节点上。Vue最重要的概念就是Vue对象，我们从官网摘录一些概念：
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
查看vue的package.json文件：
"dependencies": {
"axios": "^0.20.0",
"core-js": "^3.6.5",
"fastclick": "^1.0.6",
"photoswipe": "^4.1.3",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-router": "^3.4.3",
"vuex": "^3.5.1"
}
可以看到，除了vue.js文件，如果想使用路由功能，还得加入vue-router，换句话说，并不是vuejs自带的功能，这也印证了Vue是一个渐进式框架，可以用Vue技术，进行前端部分改造，
而angular则是一套完整的框架，很难在系统中进行局部使用。
还有，我们写的是.vue文件，而不是html或者jsp，在编译过程中，是经过vueLoader或者webpack处理的
vue前端功能为什么有xxx.vue组成的？
其实就是创建了可复用的组件
1 创建组件：const cmp1 = Vue.extend(...)
2 注册组件 Vue.component(）
3 使用组件
最后看下vue的路由
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
注意router名字不能变，不是什么routers，Router，否则路由会报错
