Vue学习笔记
Vue框架
1.Vue简介
Vue开发者是尤雨溪，是受到angular启发，是一个实现UI层的渐进式的js框架
2.什么是框架
框架是指一套非常优秀可被反复使用的代码.
3.框架优势
a.提高了代码的复用率
b.降低模块之间的耦合度
c.提高开发速度
d.提高代码质量4.特点
a.非常好的中文文档
b.体积小
c.基于组件(web component)开发方式
MVVM
vue.js 是当前一个js的 MVVM库，它以数据驱动和组件化的思想构造而成，比其它框架，简洁，上手快.
什么是MVVM库
(1)vue实现挂载到某个元素上
(2)当vue实现创建后，形成双向绑定，上面dom listeners和data binding二个工具
(3)从view侧看，vue中datalistener工具帮助我们监听dom变化,如果dom变化更新model数据
(4)如果从model侧看,当我们更新mode数据,vue中的data bindings工具会帮我们更新view数据.
^-^具体权威解释请自行查询….哈哈
Vue指令
v-if
v-if是条件渲染指令，它根据表达式的true/false来删除或添加元素
案发现场:
<h3>Vue指令 v-ifh3>
<div id="app">
{{message}}
<h3 v-if="yes">yesh3>
<h3 v-if="no">noh3>
<h3 v-if="age>28">age:{{age}}h3>
<h3 v-if="name.indexOf('o')>=0">name:{{name}}h3>
div>
<script type="text/javascript">
// model
var exampleData={
message:"Hello Vue",
yes:true,
no:false,
age:28,
name:"lion"
}
// ViewModel
new Vue({
el:"#app",
data:exampleData
});
script>v-show
v-show也是条件渲染指令，和v-if 指令不同的，使用v-show指令元素始终会渲染到html,它只设置style属性:显示与隐藏
{true}display:block/{false}display:none
案发现场:
<h3>Vue指令 v-showh3>
<div id="app">
{{message}}
<h3 v-show="yes">yesh3>
<h3 v-show="no">noh3>
<h3 v-show="age>=25">age:{{age}}h3>
<h3 v-show="name.indexOf('w')>=0">naem:{{name}}h3>
div>
<script type="text/javascript">
// model
var exampleData={
message:"Hello Vue",
yes:true,
no:false,
age:28,
name:"lion"
}
// ViewModel
new Vue({
el:"#app",
data:exampleData
});
script>v-else/v-else-if同理
v-else 指令必须跟在v-if元素后，否则不能够被识别.
案发现场:
<h3>Vue指令 v-elseh3>
<div id="app">
<h4 v-if="age>=25">age:{{age}}h4>
<h4 v-else>name:{{name}}h4>
<hr>
<h4 v-if="name.indexOf('l')>0">name:{{name}}h4>
<h4 v-else>没查找到指定字符h4>
div>
<script>
// model
var exampleData={
sex:"Mala",
age:24,
name:"lion"
}
// ViewModel
new Vue({
el:"#app",
data:exampleData
});
script>v-for
v-for 指令基于一个数组泻染,它语法与js遍历相似
案发现场:
<h3>Vue指令 v-forh3>
<div id="app">
<h4>显示数组中内容h4>
<ul>
<li>{{mylist[0]}}li>
<li>{{mylist[1]}}li>
<li>{{mylist[2]}}li>
<li>{{mylist[3]}}li>
<li>{{mylist[4]}}li>
ul>
<hr>
<ul>
<li v-for="item in mylist">{{item}}li>
ul>
<hr>
<ul>
<li v-for="(value,key) in mylist">下标{{key}}:{{value}}li>
ul>
div>
<script>
// model
var exampleData={
mylist:[101,102,103,104,105]
}
// ViewMode
new Vue({
el:"#app",
data:exampleData
});
script>v-bind
v-bind指令后带一个参数,中间放一个冒号分，这个参数通常html特性
语法:
v-bind:argumetns=”expression”
简写:
:argumetns=”expression”
案发现场:
<h3>Vue指令 v-bindh3>
<div id="app">
<p v-bind:class="{myRed:yes}">我是文本p>
<p v-bind:style="{backgroundColor:bgColor}">我有背景色p>
<p :class="{myRed:yes}">我是文本p>
<p :style="{backgroundColor:bgColor}">我有背景色p>
div>
<script>
var exampleData={
bgColor:"#e4393c",
yes:true
};
new Vue({
el:"#app",
data:exampleData,
});
script>v-on
v-on指令用于监听dom事件,用法与v-model相似
简写:
@事件=”方法命”
修饰指令:
.stop —– 停止事件冒泡
.prevent —– 阻止事件默认行为
.13/.enter —– 键盘回车
.once —– 只触发一次
.left —– 鼠标左键触发(版本2.2.0+)
.right —– 鼠标右键触发(版本2.2.0+)
.middle —– 鼠标中键触发(版本2.2.0+)
案发现场:
<div id="app">
<input type="text" v-model="message"/>
<br/>
<button v-on:click="say">点一下1button>
<br/>
<button @click="say">点一下2button>
<br/>
<button @click="run('vue')">点一下3button>
<br/>
<input type="button" @click="clickMe" value="btn1"/>
<br/>
<input type="button" @click.stop="clickMe" value="btn2"/>
<br/>
<input type="text" @keydown.enter="clickMe"/>
<br/>
<input type="text" @keydown.13="clickMe"/>
<br/>
<form action="#" @submit.prevent="handleSubmit">
<button>loginbutton>
form>
<select @change="handleChange">
<option value="red">红色option>
<option value="green">绿色option>
<option value="blue">蓝色option>
select>
div>
<script src="js/vue.js">script>
<script>
//1:model
var exampleData = {
message:"hello"
}
//2:viewmodel
var app = new Vue({
el:"#app",
data:exampleData,
methods:{
say:function(){
alert(this.message);
},
clickMe:function(){
alert(this.message);
},
run:function(mes){
this.message = mes;
},
handleSubmit:function(){
console.log("提交事件被触发了.....");
},handleChange:function(e){
var target = e.target;
console.log(target.value);
}
}
});
script>v-model
v-model指令用于与当前元素绑定,value值
子指令:
v-mode.lazy=”变量” ——– #懒惰回车,onblur触发
v-mode.number=”变量” ——– #输入数值
v-mode.trim=”变量” ——– #去除字符串前后空格
案发现场:
<div id="app">
<p>|{{message}}|p>
<hr>
<input type="text" name="" v-model.lazy="message">
<input type="number" name="" v-model.number="message">
<input type="text" name="" v-model.trim="message">
div>
<script>
var exampleData={
message:"Hello Vue"
};
new Vue({
el:"#app",
data:exampleData
});
script>自定义指令
Vue自带了很多指令，但是这些指令都是比较偏向于工具化，有时候在实现具体业务时，发现指令不够用，这时需要创建自定义指令
语法:
new Vue({
...
directives:{
change:{
bind:function(el,bindings){},
update:function(el,bindings){},
unbind:function(el,bindings){}
}
}
});
在自定义指令时3个处理函数
bind:在自定义指令绑定元素时执行此函数
update:如果调用指令传入参数，参数发生变化时执行此函数
unbind:解除绑定时执行此函数
注意事项：
建议以驼峰命名法给指令命名:比如 changeBackgroundColor
应用时以"烤串式书写法"应用:比如 "myBgcolor">Text
案发现场:
<div id="app">
{{count}}
<br>
<input type="button" name="" value="+1" @click="updateCount" v-if="count<6" v-change-background-color="count">
div>
<script>
var exampleData={
message:"hello vue",
count:0
};
new Vue({
el:"#app",
data:exampleData,
methods:{
updateCount:function(){
this.count++;
}
},
directives:{
changeBackgroundColor:{
bind:function(el,bindings){
console.log(el);
console.log(bindings);
console.log("初始化指令");
},
update:function(){
console.log("指令绑定数值发生了变化");
},
unbind:function(){
console.log("解除绑定");
}
}
}
});
script>自定义过滤器
过滤器的基本功能是实现数据筛选，过滤，格式化等操作。在vue1.*版本中内置了很多过滤器，但是在vue2版本中未内置过滤器所以需要自定义过滤器
语法:
new Vue({
filters:{
myFilter:function(vaule,parameter){
//处理数据
return 处理后的数据;
}
}
});
使用:
示例：
<any>{{表达式|过滤器}}<any>
<h1>{{price | myCurency}}h1>案发现场:
<div id="app">
价格{{price}}
<h3>{{price | myCurrency('$')}}h3>
<h3>{{price | myCurrency('￥')}}h3>
div>
<script>
var exampleData={
price:250
};
new Vue({
el:"#app",
data:exampleData,
filters:{
myCurrency:function(vaule,parameter){
return this.price=parameter+vaule;
}
}
});组件
创建组件
Vue.component("组件名称",{组件内容,template:'模块
'});
示例:
Vue.component("my-component",{
template:'模块
'
});组件的使用
组件的使用就像一个普通html标签一样
<div id="app">
<my-component>my-component>
div>
注意事项:
(1)组件的命名和使用建议使用烤串命名规则
(2)如果一个组件中渲染多个元素，将多个元素放到一个根标签，否则报错创建复合组件
复合组件并不是一个新概念，就是一个组件，只不过该组件又调其它组件。
案发现场:
<h3>复合组件h3>
<div id="app">
<my-article>my-article>
div>
<script>
//复合组件三部分组件: 复合组件 article[title/detail]
//创建title
Vue.component("my-title",{
template:`副标题</h4>`
});
//创建detail
Vue.component("my-detail",{
template:`详细信息p>`
});
//创建article {复合组件}
Vue.component("my-article",{
template:`
<my-title>my-title>
<my-detail>my-detail>
div>
`
});
new Vue({
el:"#app"
});
script>
组件的生命周期
4个阶段8个处理函数，每个阶段都有对应的处理函数;分为create/mount(挂载)/update/destroy 4个阶段
其实Vue对象也可以看做一个根组件，也拥有生命周期
create:
beforeCreate created #{创建->初始化操作}
mount:
beforeMount mounted #{挂载DOM树}
update:
beforeUpdate updated #{数据更新->操作或逻辑判断}
destroy:
beforeDestroy destroyed #{销毁->清理工作}
案发现场:
<div id="app">
<button @click="isShow=!isShow">切换组件是否显示button>
<my-component v-if="isShow">my-component>
div>
<script>
//组件的创建--生命周期
Vue.component("my-component",{
template:`
<button @click="handleClick">clickMebutton>
<h4>Hello {{count}}</h4>
div>
`,
data:function(){
return {count:0}
//小心:写法特殊:确保每个模板对象中数据独立
},
methods:{
handleClick:function(){
this.count++;
}
},
beforeCreate:function(){console.log("1:创建前")},
created:function(){console.log("2:创建后")},
beforeMount:function(){console.log("3:挂载前")},
mounted:function(){console.log("4:创建后")},
beforeUpdate:function(){console.log("5:更新前")},
updated:function(){console.log("6:创建后")},
beforeDestroy:function(){console.log("7:消毁前")},
destroyed:function(){console.log("8:消毁后")}
});
var exampleData = {
isShow:true
};
new Vue({
el:"#app",
data:exampleData
});
script>
watch
监听属性，当监听的数据发生改变即刻执行相应的自定义操作
案发现场:
<div id="app">
<my-component>my-component>
div>
<script>
Vue.component("my-component",{
data:function(){
return {
myAddress:"",
myPhone:139
}
},
template:`
<input type="text" v-model="myAddress" />
<input type="text" v-model="myPhone" />
<h5>{{myAddress}}</h5>
{{myPhone}}</h5>
div>
`,
watch:{//监听属性
//前面属性名称:函数
myAddress:function(){
console.log("数据发生修改:"+this.myAddress);
},
myPhone:function(){
console.log("数据发生修改:"+this.myPhone);
}
}
});
new Vue({
el:"#app"
});
script>
组件之间的通信(父组件传递数据到子组件)
步骤:
(1)父组件在调用子组件 (传值)
...
"money">
...
(2)子组件中获取父组件传来的值
Vue.component("child",{
props:["myValue"], //声明:父组件传递参数名
template:`{{myValue}}`
});
案发现场1:
<div id="app">
案发现场2:
<div id="app">
组件之间的通信(子组件传递数据到父组件)
子组件像父组件发送数据通过事件的方式来完成数据的传输
(1)在父组件中先定义一个方法，用于接收子组件通过事件发送来的数据.
methods:{
getData:function(msg){
//参数msg:就是子组件通过事件传递过来的数据
}
}
(2)在父组件模板:绑定事件处理函数
"方法名">
示例:
"getData">
(3)在子组件中触发事件,并且传递数据
this.$emit("触发事件名",传递数据);
示例:
this.$emit("dataEvent","交话费");
案发现场:
"app">
<parent>parent>
组件之间的通信($parent;$refs)
$parent,$refs与上叙通信方法的区别是，$parent$refs预定义字符只能获取到组件的data数据，无法获取data以外的数据，如果ref作用html标签上则获取的是标签对应的DOM元素，在开发时应以具体业务为准，选择合适的方法。
父组件要想获取子组件的(数据)——$refs
(1)在父组件调用子组件时候，指定属性ref
ref="子组件变量名"> //表示子组件对象
示例:
ref="mySon">
(2)根据指定名称，找到子组件实例对象
this.$refs.mySon
案发现场:
"app">
<parent>parent>
子组件要想获取父组件的(数据)——$parent
(1)在父组件调用子组件时候，指定属性ref
ref="子组件变量名"> //表示子组件对象
示例:
ref="mySon">
(2)根据指定名称，找到子组件实例对象
this.$refs.mySon
(3)子组件想获取父组件数据
this.$parent
继上一个案发现场:
"app">
<parent>parent>
组件之间通信 (兄弟之间)
借助于一个公共vue实例对象，不同的组件可以通过该对象完成事件绑定和触发.
var public = new Vue();
public.$on(); //绑定事件
public.$emit(); //发送事件
熊大(发)想发消息给熊二(收)
接收方(熊二):事件绑定
public.$on("dataEvent",function(msg){
//msg就是通过事件，传递来的数据
});
发送方(熊大):触发事件
bus.$emit("dataEvent ","发送内容");
案发现场(熊大呼叫熊二)1:
"app">
案发现场(熊大呼叫熊二，熊二回复)2:
"app">
Vue Router(路由)
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
SPA(single page application)
SPA(single page application)单页面应用程序，在一个完成的应用或者站点中，只有一个完整的HTML页面，这个页面有一个容器，可以把需要加载的代码插入到该容器中.
SPA的工作原理
示例:
http://127.0.0.1/index.html#/start
(1)根据地址栏中url解析完的页面index.html 加载index.html
(2)根据地址栏解析#后的路由地址:start，根据路由地址，去当前应用的配置中找路由地址配置对象去查找路由地址，所对
应的模块页面地址发起异步请求加载该页面地址
(3)把请求来的数据加载到指定容器中
SPA的实现步骤
(1)引入对应 vue-router.js 文件
(2)显示组件
"app">
案发现场:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js">script>
<style>
.base{
width:320px;
height:300px;
background:#ddd;
border:3px solid #1b6d85;
padding:12px;
text-align: center;
}
style>
head>
<body>
<div id="app">
<router-view>router-view>
div>
<script>
// 创建多组件
var collect=Vue.component('collect',{
template:`
class="base">
<h1>收藏页面h1>
div>
`
});
var detail=Vue.component('detail',{
template:`
<div class="base">
<h1>详情页面h1>
div>
`
});
var order=Vue.component('order',{
template:`
<div class="base">
<h1>订单页面h1>
div>
`
});
// 创建路由词典
const routerDictionary=[
{path:'',component:collect},
{path:'/collect',component:collect},
{path:'/detail',component:detail},
{path:'/order',component:order}
];
// 创建路由对象
const routerObject=new VueRouter({
routes:routerDictionary
});
// 创建Vue对象
new Vue({
el:"#app",
router:routerObject
});
script>
body>
html>
SPA 通过VueRouter来实现组件之间跳转
VueRouter提供了3种方式实现跳转
(1)直接修改地址栏中路由地址
(2)通过router-link标签实现跳转
<router-link to="/order">订单</router-link>
(3)通过js的编程方式来实现
jumpToLogin:function(){
this.$router.push("/login");
}
案发现场:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js">script>
<style>
.base{
width:320px;
height:300px;
background:#ddd;
border:3px solid #1b6d85;
padding:12px;
text-align: center;
}
style>
head>
<body>
<div id="app">
<router-view>router-view>
div>
<script>
// 创建多组件
var collect=Vue.component('collect',{
template:`
class="base">
<h1>收藏页面h1>
<button @click="jumpDetail">详细button>
<button @click="jumpOrder">订单button>
div>
`,
methods:{
jumpDetail:function(){
this.$router.push('/detail');
},
jumpOrder:function(){
this.$router.push('/order');
}
}
});
var detail=Vue.component('detail',{
template:`
<div class="base">
<h1>详情页面h1>
<router-link to="/collect">收藏router-link>
div>
`
});
var order=Vue.component('order',{
template:`
<div class="base">
<h1>订单页面h1>
<router-link to="/detail">详情router-link>
div>
`
});
// 创建路由词典
const routerDictionary=[
{path:'',component:collect},
{path:'/collect',component:collect},
{path:'/detail',component:detail},
{path:'/order',component:order}
];
// 创建路由对象
const routerObject=new VueRouter({
routes:routerDictionary
});
// 创建Vue对象
new Vue({
el:"#app",
router:routerObject
});
script>
body>
html>
SPA 通过VueRouter来实现组件之间跳转传递参数
(1)明确发送方和接收方
(2)配置接收方法路由地址
{path:"/main/:uname/:upwd", component:MainComponent }
(3)接收方法获取传递的数据
this.$route.params //params 数据里面多个参数对象
this.$route.params.uname
this.$route.params.upwd
(4)跳转时,发送参数
this.$router.push("/main/tom");
"/main/jerry">跳转
案发现场1:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js">script>
<style>
.base{
width:320px;
height:300px;
background:#ddd;
border:3px solid #1b6d85;
padding:12px;
text-align: center;
}
style>
head>
<body>
<div id="app">
<router-view>router-view>
div>
<script>
// 创建多组件
var login=Vue.component('my-login',{
template:`
class="base">
用户名："text" v-model="user_name">
<br>
密码：<input type="text" v-model="user_pwd">
<br>
<button @click="login">登录button>
<router-link :to="'/main/'+yklogin+'/'+ykpwd">游客登录router-link>
div>
`,
data:function(){
return {user_name:'',user_pwd:'',yklogin:'游客',ykpwd:'无'}
},
methods:{
login:function(){
this.$router.push('/main/'+this.user_name+'/'+this.user_pwd);
}
}
});
var main=Vue.component('my-main',{
template:`
<div class="base">
<h3>首页h3>
<p>用户：{{uname}}</p>
密码：
{{upwd}}</p>
div>
`,
data:function(){
return {uname:'',upwd:0};
},
mounted:function(){
this.uname=this.$route.params.userName;
this.upwd=this.$route.params.userPwd;
}
});
var notFound=Vue.component('not-found',{
template:`
class="base">
<h1>404 Page Not Foundh1>
<router-link to="/login">返回登录页router-link>
div>
`
});
// 创建路由词典
const routerDictionary=[
{path:'',component:login},
{path:'/login',component:login},
{path:'/main/:userName/:userPwd',component:main},
// *表示没有匹配到上述任何一个路由地址
{path:'*',component:notFound}
];
// 创建路由对象
const routerObject=new VueRouter({
routes:routerDictionary
});
// 创建Vue对象
new Vue({
el:"#app",
router:routerObject
});
script>
body>
html>
案发现场2:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js">script>
<style>
.base{
width:320px;
height:300px;
background:#ddd;
border:3px solid #1b6d85;
padding:12px;
text-align: center;
}
.base>ul{
list-style: none;
}
style>
head>
<body>
<div id="app">
<router-view>router-view>
div>
<script>
// 创建各个组件
var list=Vue.component('my-list',{
template:`
class="base">
<ul>
<li v-for="(item,idx) in lists">
<router-link :to="'/detail/'+idx">{{item}}</router-link>
li>
ul>
div>
`,
data:function(){
return {lists:['Mac','MacPro','Surface','Lenovo']};
}
});
var detail=Vue.component('my-detail',{
template:`
<div class="base">
<h1>详情页(接收list组件传过来的商品下标)h1>
<p>产品下标：{{productId}}</p>
div>
`,
data:function(){
return {productId:0};
},
mounted:function(){
this.productId=this.$route.params.pid;
}
});
var notFound=Vue.component('not-found',{
template:`
class="base">
<h1>404 Page Not Foundh1>
<router-link to="/list">返回首页router-link>
div>
`
});
// 创建路由词典
const routerDictionary=[
{path:'',component:list},
{path:'/list',component:list},
{path:'/detail/:pid',component:detail},
{path:'*',component:notFound}
];
// 创建路由对象
const routerObject=new VueRouter({
routes:routerDictionary
});
// 创建Vue对象
new Vue({
el:"#app",
router:routerObject
});
script>
body>
html>
SPA 路由设置高级用法
alias 别名(访问路径)
{path:"/list",component:MyList,alias:"/lists"}
redirect 重定向
{path:"/productList",redirect:"/list"}
path:"*" 异常处理
{path:"*", component:NotFound}
路由嵌套
路由嵌套的SPA实现的步骤:
栗子:A(/a)组件跳转到B组件(/c /d)，B组件包含嵌套/c,/d组件
(1)准备嵌套其它组件的父组件指定一个容器在B组件指定容器:模板
案发现场:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js">script>
<style>
.base{
width:320px;
height:300px;
background:#ddd;
border:3px solid #1b6d85;
padding:12px;
text-align: center;
}
.base>ul{
list-style: none;
padding: 0;
margin: 0;
}
style>
head>
<body>
<div id="app">
<router-view>router-view>
div>
<script>
// 创建各个组件
var login=Vue.component('my-login',{
template:`
class="base">
<h1>登录组件h1>
<button @click="jumpMain">登录button>
div>
`,
methods:{
jumpMain:function(){
this.$router.push('/main');
}
}
});
var main=Vue.component('my-main',{
template:`
<div>
<h1>邮箱主页面h1>
<ul>
<li>
<router-link to="/inbox">收件箱router-link>
li>
<li>
<router-link to="/outbox">发件箱router-link>
li>
ul>
<router-view>router-view>
div>
`
});
var inbox=Vue.component('my-inbox',{
template:`
<div>
<ul>
<li>未读邮件1li>
<li>未读邮件2li>
<li>未读邮件3li>
<li>未读邮件4li>
ul>
div>
`
});
var outbox=Vue.component('my-outbox',{
template:`
<div>
<ul>
<li>已发邮件1li>
<li>已发邮件2li>
<li>已发邮件3li>
<li>已发邮件4li>
ul>
div>
`
});
var notFound=Vue.component('not-found',{
template:`
<div class="base">
<h1>404 Page Not Foundh1>
<router-link to="/lg">返回首页router-link>
div>
`
});
// 创建路由词典
const routerDictionary=[
{path:'',redirect:'/login'},
{path:'/login',component:login,alias:'/lg'},
{
path:'/main',component:main,
children:[
{path:'/inbox',component:inbox},
{path:'/outbox',component:outbox}
]
},
{path:'*',component:notFound}
];
// 创建路由对象
const routerObject=new VueRouter({
routes:routerDictionary
});
// 创建Vue对象
new Vue({
el:'#app',
router:routerObject
});
script>
body>
html>
vue-resource
vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为.
vue-resource特点
vue-resource插件具有以下特点：
1. 体积小
vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2. 支持主流的浏览器
和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
3. 支持Promise API和URI Templates
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
4. 支持拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。
vue-resource的使用
引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。
// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。
then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：
// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
// 响应成功回调
}, function(response){
// 响应错误回调
});
// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
// 响应成功回调
}, (response) => {
// 响应错误回调
});
你可能感兴趣的:(Vue学习笔记)