第一章 课程介绍
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多页面应用文件引用
- 官网拷贝,引入script标签
- npm 安装
npm install vue --save-dev,安装好后script标签可直接引用<script src="node_modules/vue/dist/vue.js"></script>
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-link></router-link>或者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-link to="/cart">跳转到购物车页面</router-link>
//通过命名路由跳转,要用v-bind绑定
<router-link v-bind:to="{name:'cart'}">跳转到购物车页面</router-link>
//params是路由参数,不是页面之间跳转的参数
<router-link v-bind:to="{name:'cart',params:{cartId:123}}">跳转到购物车页面</router-link>
{
path:'/cart/:cartId',
name:'cart',
component:Cart
}第4章Vue-resource和Axios
4-1 vue-resourse使用
-
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> - 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 | Object,FormDatestring | request body |
| params | Object | 请求的URL参数对象 |
| headers | Object | 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请求
- 通过动态创建一个script标签实现跨域,因为script标签是没有同源策略限制的
- 把这个script标签的src指向我们请求的服务端地址,这个地址会携带一个参数:callback,一个回调函数.服务端会把数据通过这个回调函数返回给客户端.但客户端没有这个函数怎么接收呢?所以在发送请求钱,要在全局(window)注册这样的一个方法,利用这个方法来获得数据
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="node_modules/vue/dist/vue.js "></script> <script src="node_modules/vue-resource/dist/vue-resource.js"></script> </head> <body> <div id="app" class="container"> <h1>vue-resource插件</h1> <a href="javascript:;" class="btn btn-primary" v-on:click="get">GET请求</a> <a href="javascript:;" class="btn btn-primary" v-on:click="post">POST请求</a> <a href="javascript:;" class="btn btn-primary" v-on:click="jsonp">JSON请求</a> <a href="javascript:;" class="btn btn-primary" v-on:click="http">http请求</a> <br> {{msg}} </div> <script> 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; }) } } }); </script> </body> </html>
4-2 axios介绍
- <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
- 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>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="node_modules/vue/dist/vue.js "></script>
<script src="node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="app" class="container">
<h1>axios插件</h1>
<a href="javascript:;" class="btn btn-primary" v-on:click="get">GET请求</a>
<a href="javascript:;" class="btn btn-primary" v-on:click="post">POST请求</a>
<a href="javascript:;" class="btn btn-primary" v-on:click="http">http请求</a>
<br>
{{msg}}
</div>
<script>
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) {
});
}
}
});
</script>
</body>
</html>
第5章ES6常用语法
5-1 ES6简介
- 1995:JavaScript诞生
- 1997:ECAMScript标准确立
- 1999:ES3出现,与此同时IE5风靡一时
- 2009:ES5出现,例如foreach,Object.keys,Object.create和JSON标准
- 2015:ES6/ECMAScript2015出现
- 目标:JavaScript语言可以用来编写复杂的大型应用程序,成为企业其开发语言
5-2 ES6常用命令
- 函数的Rest参数和扩展
- Promise使用
- module.exports和ES6 import/export的使用
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ES6</title> </head> <body> <script> 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']; </script> </body> </html>
5-3 拓展参数讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise</title>
</head>
<body>
<script>
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}`)
});
</script>
</body>
</html>
5-4 Promise讲解
5-5 ES6模块化开发讲解
5-6 AMD、CMD、CommonJS和ES6差异
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
