Vue------Vue-cli脚手架+前端路由

Vue-cli是Vue的脚手架工具

可以进行目录结构、本地调试、代码部署、热加载、单元测试

1、MVVM框架

View    ——    ViewModel    ——     Model

“DOM”“观察者vue实例”    “Javascript”

注意：交互为双向的

特点：

（1）针对具有复杂交互逻辑的前端应用；

（2）提供基础的架构抽象；

（3）通过Ajax数据持久化，保证前端用户体验。

2、什么是Vue.js

它是一个轻量级MVVM框架，

属于“数据驱动+组件化”的前端开发

Vuejs VS Angular+React

（1）Vue.js耿轻量，gzip后大小只有20k+

（2）Vue.js更易上手，学习曲线平稳

（3）吸取两家之长，借鉴了angular的指令（如v-show）和react的组件化

3、vue.js核心思想

（1）数据驱动

DOM是数据的一种自然映射

   扩展——数据响应原理

数据（model）改变驱动视图（view）自动更新

（2）组件化

扩展HTML元素，封装可重用的代码

   扩展——组件设计原则

a、页面上每个独立的可视/可交互区域视为一个组件

b、每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护

c、页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面

4、vue-cli脚手架

https://github.com/vue.js/vue-cli

（1）vue-cli安装（Win10）

步骤1：“Ctrl+ R”打开命令行

node -v

npm install -g vue-cli

步骤2：运行vue命令尝试

vue

vue init

步骤3：创建项目sell

vue init webpack sell

cd sell

npm install

npm run dev

（2）vue-cli项目目录

（3）webpack打包

5、vue-router前端路由

路由是根据不同的url地址展示不同的内容或界面。

前端路由就是把 不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面来实现的，而现在前端路由即实现了“前后端分离”

5-1：什么时候使用前端路由？

在单页面应用中，保持大部分页面结构不变，只改变部分内容的使用

5-2：前端路由有什么优点和缺点？

优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户

缺点：

（1）不利于SEO搜索引擎

（2）使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存

（3）单页面无法记住之前滚动的位置，无法再前进、后退的时候返回之前滚动位置

5-3：利用vue-router用来构建SPA

5-4：跳转——或者this.$router.push({path:' '})

5-5：

渲染——（5-4跳转至界面 与 5-5渲染至某个位置  二者是配合使用的）

5-6：动态路由匹配map

模式：/user/:username

5-7：嵌套路由

路由嵌套路由

export default new Router({  

  routes: [  

    {  

        path:'/goods',  

        name:'Goodslist',  

        component: Goodslist,  

        children :[  

                {  

                path:'title',  

                name:'title',  

                component: Title  

               },  

               {  

                  path:'img',  

                  name:'img',  

                  component: Image  

                }  

        ]  

     }  

  ]  

})  

5-8：编程式路由

什么是编程式路由？——通过js来实现页面的跳转

方式1：$router.push("name")

方式2：$router.push({path:"name"})

方式3：$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123})

方式4：$router.go(1)

5-9：命名路由和命名视图

（1）命名路由——给路由定义不同的名字，根据名字进行匹配

（2）命名视图——给不同的router-view定义名字，通过名字进行相应组件的渲染

6、vue-resource

在node环境下安装输入命令行：npm install vue-resource --save

其请求API是按照REST风格设计的，它提供了7种请求API:

（1）get：从服务器端获取数据——“得到”

（2）post：从客户端向服务器端提交数据——“提交”

（3）head

（4）delete

（5）jsonp

（6）put

（7）patch

全局拦截器interceptors

Vue.http.interceptors.push((request,next)=>{  

//..  

//请求发送的处理逻辑  

//..  

  next(response) => {  

//..  

//请求发送后的处理逻辑  

//..  

//根据请求的状态，response参数会返回给successCallback或errorCallback  

return response  

  })  

})