第一章 课程介绍

vue框架对比

 Vue和react对比

  • angular提供的更多是一整套解决方案,后者更像是一个生态
  • Vue和react目前都使用了virtual DOM

Vue

  • 模板和渲染函数的弹性选择
  • 简单的语法及项目创建
  • 更快的渲染速度和更小的体积

react

  • 更适用于大型应用和更好的可测试性
  • 同时适用于web端和原生APP
  • 更大的生态圈带来更多支持和工具

Vue和react相同点

  • 利用虚拟DOM实现快速渲染
  • 轻量级
  • 响应式组件
  • 服务器渲染
  • 易于集成路由,打包工具以及状态管理工具

\"\"

项目整体架构

\"\"

前置知识

HTML/css/js     Vue    ES6     node  npm  webpack

第二章 Vue基础

2-1 nodejs和npm的安装和环境搭建

  • 官网或淘宝镜像,傻瓜式安装,这里不多介绍

2-2 vue环境搭建以及vue-cli使用

Vue多页面应用文件引用

  • 官网拷贝,引入 标签
  • npm 安装

npm install vue --save-dev,安装好后 标签可直接引用< src=\"node_modules/vue/dist/vue.js\"></ >

vue-cli构建SPA应用

  • npm install -g vue-cli
  • vue init webpack-simple demo
  • vue init webpack demo2\"\"

2-3 vue配置

\"\"

2-5 vue基础语法

模板语法

  • mustache语法:{{msg}}
  • HTML赋值:v-html=\"\"
  • 绑定属性:v-bind:id=\"\"
  • 使用表达式:{{OK:\'YES\':\'NO\'}}
  • 文本赋值:v-text=\"\"
  • 指令:v-if=\"\"
  • 过滤器{{message||capitalize}}和v-bind:id=\"rowId|formatId\"

class和style绑定

  • 对象语法 v-bind:class=\"{active:isActive,\'text-danger\':hasError}\"
  • 数组语法

\"\"

条件渲染

  • v-if
  • v-else
  • v-else-if
  • v-show
  • v-cloak

Vue事件处理器

  • v-on:click=\"great\" 或@click=\"great\"
  • v-on:click.stop,v-on:click.stop,prevent,v-on:click.self,v-on:click.once
  • v-on:keyup.enter

Vue组件

  • 全局组件和局部组件
  • 父子组件通讯--数据传递
  • slot

第3章Vue-router

3-1路由基础介绍

  • 什么是前端路由

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

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据url的不同返回不同的页面实现的

  • 什么时候使用前端路由

​​​​​​​在单页面应用,大部分页面结构不变,只改变部分内容时使用

  • 前端路由有什么优点和缺点

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

缺点:不利于SEO;使用浏览器的前进,后退键的时候回重新发布请求,没有合理的利用缓存;单页面无法记住之前滚动的位置,无法再前进,后退的时候记住滚动的位置

  • vue-router用来构建SPA
  • <router- ></router- >或者this.$router.push({path:\'\'})
  • <router-view></router-view>

3-2动态路由配置

  • 什么是动态路由
模式 匹配路径 $router.params
/user/:username /user/evan {username:\'evan\'}
/user/:username/post/:post_id /user/evan/post/123

{username:\'evan\',post_id:123}

路由模式:mode:\'hash\'或mode:\'history\'

\"\"\"\"

3-3嵌套路由

路由嵌套路由

3-4编程式路由

  • 什么是编程式路由

​​​​​​​通过js来实现页面的跳转

$router.push(\"name\")

$router.push({path:\"name\"})

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

$router.go(1)

3-5命名路由和命名视图

  • 什么是命名路由和命名视图

​​​​​​​给路由定义不同的名字,根据名字进行匹配

给不同的router-view定义名字,通过名字进行对应组件的渲染

<router-  to=\"/cart\">跳转到购物车页面</router- >
//通过命名路由跳转,要用v-bind绑定
<router-  v-bind:to=\"{name:\'cart\'}\">跳转到购物车页面</router- >

 

//params是路由参数,不是页面之间跳转的参数
<router-  v-bind:to=\"{name:\'cart\',params:{cartId:123}}\">跳转到购物车页面</router- >

{
      path:\'/cart/:cartId\',
      name:\'cart\',
      component:Cart
    }

第4章Vue-resource和Axios

4-1 vue-resourse使用

  • <  src=\"https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js\"></ >
  • npm install vue-resource --save

vue-resource的请求API是按照REST风格设计的,它提供了7种请求API

  • get(url,[options])
  • head(url,[options])
  • delete(url,[options])
  • jsonp(url,[options])
  • post(url,[body],[options])
  • put(url,[body],[options])
  • patch(url,[body],[options])
参数 类型 描述
url string 请求的URL
method string 请求的HTTP方法,例如:\'GET\',\'POST\'或其他HTTP方法
body ,FormDatestring request body
params 请求的URL参数对象
headers request header
timeout number 单位为毫秒的请求超时时间(0表示无超时时间)
before function(request) 请求发送前的处理函数,类似于jQuery的beforeSend函数
progress function(events) ProgressEvent回调处理函数
credientials boolean 表示跨域请求时是否需要使用凭证
emulateHTTP boolean 发送PUT,PATCH,DELETE,请求时以HTTP POST的方式发送,并设置请求头的x-HTTP-Method-Override
emulateJson boolean 将request body以application/x-www-form-urlencoded content类型,让服务器端识别

 

  • 全局拦截器interceptors
Vue.http.interceptors.push((request,next)=>{
    //...
    //请求发送前的处理逻辑
    //...
    next((response)=>{
        //...
        //请求发送后的处理逻辑
        //...
        //根据请求的状态,response参数会返回给successCallback或errorCallback
        return response
    })
})

jsonp跨域

  • jsonp发送的不是ajax请求
  • 通过动态创建一个 标签实现跨域,因为 标签是没有同源策略限制的
  • 把这个 标签的src指向我们请求的服务端地址,这个地址会携带一个参数:callback,一个回调函数.服务端会把数据通过这个回调函数返回给客户端.但客户端没有这个函数怎么接收呢?所以在发送请求钱,要在全局(window)注册这样的一个方法,利用这个方法来获得数据
  • <!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < > </ >
  <  rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin=\"anonymous\">
  <  src=\"node_modules/vue/dist/vue.js \"></ >
  <  src=\"node_modules/vue-resource/dist/vue-resource.js\"></ >
</head>
<body>
<div id=\"app\" class=\"container\">
  <h1>vue-resource插件</h1>
  <a href=\" :;\" class=\"btn btn-primary\" v-on:click=\"get\">GET请求</a>
  <a href=\" :;\" class=\"btn btn-primary\" v-on:click=\"post\">POST请求</a>
  <a href=\" :;\" class=\"btn btn-primary\" v-on:click=\"jsonp\">JSON请求</a>
  <a href=\" :;\" class=\"btn btn-primary\" v-on:click=\"http\">http请求</a>
  <br>
  {{msg}}
</div>
< >
  new Vue({
    el:\"#app\",
    data(){
      return {
        msg:\'\'
      }
    },
    mounted:function(){
      Vue.http.interceptors.push(function (request,next) {
        console.log(\"request init\");
        next(function (response) {
          console.log(\"response init\");
          return response;
        })
      });
    },
    http:{
      root:\"http://localhost:63342/my-web-shop/\"
    },
    methods:{
      get:function () {
        this.$http.get(\"package.json\",{
          params:{
            userId:\"101\"
          },
          headers:{
            token:\'abcd\'
          },
        }).then(res=>{
          this.msg=res.data;
        },error=>{
          this.msg=error;
        });
      },
      post:function () {
        this.$http.post(\"package.json\",{
          userId:\"102\"
        },{
          headers:{
            access_token:\"abc\"
          }
        }).then(function (res) {
          this.msg=res.data;
        })
      },
      jsonp:function () {
        this.$http.jsonp(\"http://www.imooc.com/course/AjaxCourseMembers?ids=796\").then(function (res) {
          this.msg=res.data;
        });

      },
      http:function () {
        this.$http({
          url:\"package.json\",
          params:{
            userId:\"103\"
          },
          headers:{
            token:\"123\"
          },
          timeout:5,
          before:function () {
            console.log(\"before init\")
          }
        }).then(function (res) {
          this.msg=res.data;
        })
      }
    }
  });
</ >
</body>
</html>

     

4-2 axios介绍

  • ​​​​​​​< src=\"https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js\"></ >
  • npm install axis --save
  • axios.request(config)
  • axios.get(url[,config])
  • axios.delete(url[,config])
  • axios.head(url[,config])
  • axios.options(url[,config])
  • axios.post(url[,data[,config]])
  • axios.put(url[,data[,config]])
  • axios.natch(url[,data[,config]])
function getUserAccount(){
    return axios.get(\'/user/12345\');
}
function getUserPermissions(){
    return axios.get(\'/user/12345/peimissions\')
}
axios.all([getUserAccount(),getUserPeimissions()])
    .then(axios.spread(function(accept,perms){
    }));
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < > </ >
  <  rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin=\"anonymous\">
  <  src=\"node_modules/vue/dist/vue.js \"></ >
  <  src=\"node_modules/axios/dist/axios.js\"></ >
</head>
<body>
<div id=\"app\" class=\"container\">
  <h1>axios插件</h1>
  <a href=\" :;\" class=\"btn btn-primary\" v-on:click=\"get\">GET请求</a>
  <a href=\" :;\" class=\"btn btn-primary\" v-on:click=\"post\">POST请求</a>
  <a href=\" :;\" class=\"btn btn-primary\" v-on:click=\"http\">http请求</a>

  <br>
  {{msg}}
</div>
< >
  new Vue({
    el:\"#app\",
    data(){
      return {
        msg:\'\'
      }
    },
    mounted:function(){
      axios.interceptors.request.use(function (config) {
        console.log(\"request init\");
        return config
      });
      axios.interceptors.response.use(function (response) {
        console.log(\"response init\");
        return response;
      })
    },
    methods:{
      get:function () {
        axios.get(\"./package.json\",{
          params:{
            userId:\"999\"
          },
          headers:{
            token:\"jack\"
          },
        }).then(res=>{
          this.msg=res.data;
        }).catch(function (error) {
          console.log(\"error init \"+error);
        });
      },
      post:function () {
        axios.post(\"./package.json\",{
          userId: \"888\"
        },{
          headers:{
            token:\"tom\"
          }
        }).then(res=>{
          this.msg=res.data;
        }).catch(function (error) {

        })
      },
      http:function () {
        axios({
          url:\"./package.json\",
          method:\"get\",
          //post请求在data中定义
          data:{
            userId:\"101\"
          },
          //get请求在params中定义
          params:{
            userId:\"102\"
          },
          headers:{
            token:\"http-test\"
          }
        }).then(res=>{
          this.msg=res.data;
        }).catch(function (error) {

        });
      }
    }
  });
</ >
</body>
</html>

​​​​​​​第5章ES6常用语法

5-1 ES6简介

  • 1995: 诞生
  • 1997:ECAM 标准确立
  • 1999:ES3出现,与此同时IE5风靡一时
  • 2009:ES5出现,例如foreach, .keys, .create和JSON标准
  • 2015:ES6/ECMA 2015出现
  • 目标: 语言可以用来编写复杂的大型应用程序,成为企业其开发语言

5-2 ES6常用命令

  • 函数的Rest参数和扩展
  • Promise使用
  • module.exports和ES6 import/export的使用
  • <!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >ES6</ >
</head>
<body>
  < >
    function sum (x,y,z) {
      let total=0;
      if(x)total+=x;
      if(y)total+=y;
      if(z)total+=z;
      console.log(`total:${total}`)
    }
    sum(5,\"\",9);
    //rest参数
    function sum2 (...m) {
      let total=0;
      for(var i of m){
        total+=i;
      }
      console.log(`tatal:${total}`)
    }
    sum2(1,2,3,4,5,6);
    //ES6写法
    let sum3=(...m)=>{
      let total=0;
      for(var i of m){
        total+=i;
      }
      console.log(`tatal:${total}`)
    }
    sum3(1,2,3,4,5,6);
    //函数的扩展
    //...和数组结合,称为数组的扩展
    //var [x,y]=[4,8];
    console.log(...[4,8]);
    //函数的扩展
    let arr1=[1,3];
    let arr2=[4,8];
    console.log(\"concat:\"+arr1.concat(arr2));

    //[...arr1,...arr2];
    console.log(\"concat:\"+[...arr1,...arr2]);
    var [x,...y]=[4,8,10,30];

    //对字符串的扩展
    let [a,b,c]=\"ES6\";
    let xy=[...\'ES6\'];


  </ >
</body>
</html>

     

5-3 拓展参数讲解

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >promise</ >
</head>
<body>
  < >
    let checkLogin=function () {
      //resolve,接口调用成功需要执行的回调,reject是接口报错执行的回调
      return new Promise(function (resolve,reject) {
        let flag=document.cookie.indexOf(\"userId\")>-1?true:false;

        if(flag=true){
          resolve({
            status:0,
            result:true
          })
        }else{
          reject(\"error\");
        }
      })
    }
    let getUserInfo=()=>{
      return new Promise((resolve,reject)=>{
        let userInfo={
          userId:\"101\"
        }
        resolve(userInfo);
      });
    }
    //返回promise才可以通过.then获取回调
    checkLogin().then((res)=> {
      if(res.status==0){
        console.log(\"login success\")
        return getUserInfo();
      }
    }).catch(error=>{
      console.log(`errors: ${error}`)
    }).then((res2)=>{
      console.log(`userId:${res2.userId}`)
    });
    Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=>{
      console.log(`res1: ${res1.result},res2: ${res2.userId}`)
    });

  </ >
</body>
</html>

5-4 Promise讲解

5-5 ES6模块化开发讲解

5-6 AMD、CMD、CommonJS和ES6差异

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章