本文共 10582 字，大约阅读时间需要 35 分钟。

Vue

简介

Vue：是一套用于构建的渐进式框架。与其它大型不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

CSS预处理器：提供CSS缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性，大大提高前端在样式上的开发效率。

CSS预处理器：是一种专门的编程语言，进行web页面样式设计，通过编译器转化为正常的CSS文件，以供项目使用。

常用CSS预处理器：

SASS，基于Ruby，通过服务端处理，功能强大，解析效率高，需要学习Ruby语言。

LESS，基于NodeJS，通过客户端处理，使用简单。

TypeScript：

• TypeScript是一种由微软开发的、跨平台的编程语言。它是的超集，最终会被编译为JavaScript代码。
• TypeScript扩展了的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。

JavaScript框架：

• JQuery：优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能。
• Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将将后台的MVC模式搬到了前端，并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发，对后端程序员友好，对前端程序员不太友好。
• React：FaceBook出品，一款高性能JS前端框架，其特点是提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端的渲染效率；缺点是复杂，需要额外学习一门JSX语言。
• Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发，路由，状态管理等新特性，其特点是包含了Angular（模块化）和React（虚拟DOM）的优点。
• Axios：前端通信框架，因为Vue的边界很明确，就是为了处理DOM，不具备通信能力；为此就需要一个通信框架与服务器交互，当然也可以使用JQuery提供的Ajax通信功能。

UI框架

• Ant-Design：阿里巴巴出品。基于React的UI框架。
• ElementUI，iview，ice：饿了么出品 ，基于Vue的UI框架。
• BootStrap：Twitter推出的用于前端开发的开源工具包。
• AmazeUI：一款HTML5跨屏前端框架。

JavaScript构建工具：

• Babel：JS 编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。
• WebPack：模块打包器，主要作用是打包，压缩，合并及按序加载。

MVVM模式的实现者：

• Model：模型层，这里表示JavaScript对象。
• View：视图层，这里表示DOM（HTML操作的元素）。
• ViewModel：连接视图和数据的中间件，Vue.js就是MVVC中ViewModel层的实现者。

在MVVC架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。

• ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。
• ViewModel能够监听到视图的变化，并能通知数据发生改变。

因此，Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

为什么使用MVVM：分离视图和模型

• 低耦合：视图可独立于Model变化和修改，一个ViewModel可绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可复用：可以把一些逻辑视图放在一个ViewModel中，让很多View重用这段逻辑视图。
• 独立开发：开发人员可以专注业务逻辑和数据的开发（ViewModel），设计人员专注于页面设计。
• 可测试：测试可以针对ViewModel来写。

第一个Vue程序

IDEA安装Vue.js插件

demo.html

   
 
hello,vue!
 
     鼠标悬停几秒查看动态绑定的信息    
   

Vue基本语法

• if

   
   
   
    
Yes
   
    
No
   
   
 
A
 
 
   

• for

   
   
    
{{item.message}}
   
   

• 监听事件

   
   
   
    click me
   
   

双向绑定

文本框绑定

   
   
        
       输入文本框内容为：{{message}}
   
   

单选框绑定

   
   
        性别：    
    男    
    女    
    
        你选中了：{{zr}}    
   
   

下拉框

   
   
    
    
        下拉框：        --请选择--        A        B        C            value: {{message}}    
   
   

组件

Axios异步通信

Axios是一个开源的可以用在浏览器端和 Node.JS 的异步通信框架， 它的主要作用是和Ajax一样实现异步通信。

Axios：

• 从浏览器中创建XMLHttpRequests
• 从Node.js创建http请求
• 支持Peomise API [JS中链式编程]
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御XSRF [跨站请求伪造]

测试

    
       
       
   
   
    
    
     {{info.name}}
    
    
    
     {{info.address}}
    
    
    
     {{info.links}}
    
    
    
     {{info.address.city}}
    
    
    博客园
   
   

data.json

{  "name": "zr",  "url": "https://www.cnblogs.com/zhou-zr",  "page": "11",  "address": {    "city": "武汉",    "country": "中国"  },  "links": [    {      "name": "bokeyuan",      "url": "cnblogs.com/zhou-zr"    },    {      "name": "zrkuang",      "url": "www.baidu.com"    }  ]}

计算属性

计算属性：是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），可理解为缓存。

demo8.html

   
   
    
    
currentTime()：{{currentTime()}}
    
    
currentTime2：{{currentTime2}}
   
   

调用方法时，每次需要计算，既然计算就必然产生系统的开销，如果这个结果不经常变化就可以考虑将这个结果缓存起来。计算结果的主要目的就是将不经常变化的计算结果进行缓存，以节省系统的开销。

Slot

在Vue.js中我们使用

元素作为承载分支内容的出口，称为插槽，可以应用在组合组件的场景中。

v-bind:简写 :

demo9.html

自定义事件

v-on:简写 @

this.$emit 自定义事件分发

demo10.html

第一个Vue-cli程序

1. 安装node.js(官网下载64位的安装包，直接安装到自己指定目录)

2. cmd以管理员打开，node-v；npm-v分别输入查看版本

3. 安装淘宝镜像加速器，npm install cnpm -g

4. 安装vue-cli，输入cnpm install vue-cli -g

5. 输入vue list，查看可以基于哪些模板创建 vue 应用程序，通常选择webpack

6. 新建一个项目文件夹，cmd进入该文件夹，输入vue init webpack myvue(一路no即可)

7. 进入vue项目中 cd myvue，再执行npm install

8. npm run dev启动项目

9. 可输入以上地址访问，ctrl+c 终止

webpack学习使用

webpack是一个现代JavaScript应用程序的静态模块打包器（model bundler），当webpack处理应用程序时，它会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或者多个包（bundle） 。

cmd以管理员启动：

• npm install webpack -g

• npm install webpack-cli -g

测试安装成功：

• webpack -v
• webpack-cli -v

项目包(webpack-study)下modules文件夹下

hello.js

//暴露一个方法exports.sayHi = function () {    document.write("
zzzrrr
")};

(webpack-study)/modules/main.js

var hello = require("./hello");hello.sayHi();

项目包(webpack-study)下webpack.config.js

module.exports = {    entry: "./modules/main.js",    output:{        filename: "./js/bundle.js",    }};

打包

管理员cmd进入到(webpack-study)下，webpack打包，webpack --watch热部署（选一个即可）。

项目包下index.html

Vue-Router路由

Vue-Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌，包含的功能有：

• 嵌套的路由/视图类
• 模块化的，基于组件的路由配置
• 路由参数，查询，通配符
• 基于Vue.js过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的CSS class的连接
• HTML5历史模式或hash模式，在IE9中自动降级
• 自定义的滚动条行为

项目目录下：npm install vue-router --save-dev

src/components/Content.vue

src/components/Main.vue

src/components/Zzr.vue

src/router/index.js

import Vue from 'vue';import VueRouter from 'vue-router';import Content from "../components/Content";import Main from "../components/Main";import Zzr from "../components/Zzr";//安装路由Vue.use(VueRouter);//配置导出路由export default new VueRouter({  routes: [    {      //路径      path: '/content',      name: 'content',      //跳转的组件      component: Content    },    {      //路径      path: '/main',      name: 'content',      //跳转的组件      component: Main    },    {      //路径      path: '/zzr',      name: 'content',      //跳转的组件      component: Zzr    },  ]});

src/App.vue

src/main.js

import Vue from 'vue'import App from './App'import router from './router'  //自动扫描里面的路由配置Vue.config.productionTip = false;new Vue({  el: '#app',  //配置路由  router,  components: { App },  template: '
   '})

项目下执行 npm run dev，然后访问。

vue+elementUI

创建工程步骤

1. 创建工程

• vue init webpack hello-vue

2. 进入工程目录

• cd hello-vue

3. 安装

• npm install vue-router --sava-dev

4. 安装

• npm i element-ui -S

5. 安装依赖

• npm install

6. 安装SASS加载器

• cnpm install sass-loader node-sass --save-dev

7. 启动测试

• npm run dev

解释说明：

npm install moduleName：安装模块到项目目录下。

npm install -g moduleName：-g 安装模块到全局，具体安装到哪个位置，要看 npm config prefix 的位置。

npm install --save moduleName：--save 的意思值将模块安装到项目目录下，并在package文件的 dependencies 节点写入依赖，-S为该命令的缩写。

npm install --save-dev moduleName：--save-dev 的意思值将模块安装到项目目录下，并在package文件的 devDependencies 节点写入依赖，-D为该命令的缩写。

搭建项目，结构目录如下：

Login.vue

App.vue

index.js

import Vue from 'vue'import Router from 'vue-router'import Login from "../views/Login"import Main from "../views/Main"Vue.use(Router);export default new Router({  routes: [    {      path: '/main',      component: Main    },    {      path: '/login',      component: Login    }  ]});

App.vue

main.js

import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(router);Vue.use(ElementUI);new Vue({  el: '#app',  router,  render: h => h(App), //Element})

执行npm run dev后，访问http://localhost:8080/#/login

注意如果打包发布失败：在pakage.json中降低sass版本为"sass-loader": "^7.3.1",

如果出现：

执行 npm uninstall node-sass 卸载

再安装 cnpm install node-sass@4.14.1

最后：npm run dev

嵌套路由

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件而成，同样的，URL中各段动态路径也按某种结构对应嵌套各层组件。

在上一个项目基础下增加user文件夹

List.vue

Profile.vue

index.js

import Vue from 'vue'import Router from 'vue-router'import Login from "../views/Login"import Main from "../views/Main"import UserList from "../views/user/List";import UserProfile from "../views/user/Profile";Vue.use(Router);export default new Router({  routes: [    {      path: '/main',      component: Main,      //嵌套路由      children: [        {path: '/user/profile',component: UserProfile},        {path: '/user/list',component: UserList}      ]    },    {      path: '/login',      component: Login,    }  ]});

Main.vue

参数传递及重定向

方法一

修改Main.vue

     
      
    
     个人信息
    
   

修改index.js

//嵌套路由children: [  {path: '/user/profile/:id',name: 'UserProfile',component: UserProfile},  {path: '/user/list',component: UserList}]

修改Profile.vue，接收

方法二

Main.vue和方法一相同

index.js

//嵌套路由children: [  {path: '/user/profile/:id',name: 'UserProfile',component: UserProfile,props:true},  {path: '/user/list',component: UserList}]

修改Profile.vue，接收

重定向

index.js中增加

{  path: '/goHome',  redirect: '/main',}

Main.vue中增加

     
      
    
     回到首页
    
   

登录显示用户名：

Login.vue中修改为：

methods: {  onSubmit(formName) {    // 为表单绑定验证功能    this.$refs[formName].validate((valid) => {      if (valid) {        // 使用 vue-router 路由到指定页面，该方式称之为编程式导航        this.$router.push("/main/"+this.form.username);      } else {        this.dialogVisible = true;        return false;      }    });  }}

index.js中Main组件上增加 props: true,

path: '/main/:name',props: true,component: Main,

Main.vue增加 props:['name'], 接收参数， {{name}} 显示

           
              
                 
                  
                    
       
        个人信息
                     
       
        退出登录
                   
                
               
     {{name}}        
            
              
               
             
          
         

测试 登录后右上方显示用户名

404和路由钩子

路由模式有两种：

• hash：路径带#符号，如
• history：路径不带#符号，如

index.js中增加 mode: 'history',

export default new Router({  mode: 'history',  routes: [    {    });

配置404页面

NotFound.vue

index.js

import NotFound from "../views/NotFound";....//路由中增加{      path: '*',      component: NotFound,    }

路由钩子与异步请求

beforeRouteEnter：在进入路由前执行

beforeRouteLeave：在离开路由前执行

Profile.vue

export default {  props: ['id'],  name: "Profile",  beforeRouteEnter:(to, from, next)=>{    console.log("进入路由之前！");    next();  },beforeRouteLeave:(to, from, next)=>{    console.log("进入路由之后！");    next();  },  methods: {    getData: function () {      this.axi    }  }}

参数说明：

• to：路由将要跳转的路径信息
• from：路径跳转前的路径信息
• next：路由的控制参数
  • next() 跳入下一个页面
  • next('/path') 改变路由的跳转方向，使其跳到另一个路由
  • next(false) 返回原来的界面
  • next((vm)=>{}) 仅在beforeRouteEnter中可用，vm是组件实例

在钩子函数中使用异步请求：

1. 安装axios：cnpm install axios -s （打包失败使用npm install --save vue-axios或官网npm install --save axios vue-axios）

2. main.js中引用axios

Profile.vue