vue概述
mvvm模式
image-20201001110548401
- M:即Model,模型,包含数据和一些基本操作
- V:即View,视图,页面渲染后果
- VM:即View-Model,模型与视图间的双向操作(无需开发人员干预)
在MVVM之前,开发人员从后端获取须要的数据模型,而后要通过DOM操作Model渲染到View中。而后当用户操作视图,咱们还须要通过DOM获取View中的数据,而后同步到Model中。
而MVVM中的VM要做的事件就是把DOM操作齐全封装起来,开发人员不必再关怀Model和View之间是如何相互影响的:
- 只有咱们Model产生了扭转,View上天然就会体现进去。
- 当用户批改了View,Model中的数据也会跟着扭转。
把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上。
mvvm模式的劣势:
- 低耦合
视图(View)能够独立于Model变动和批改,一个ViewModel能够绑定到不同的”View”上,当View变动时Model能够不变,当Model变动时View也能够不变
- 可重用性
能够把一些视图逻辑放在一个ViewModel外面,让多个View重用这段视图逻辑代码
- 独立开发
开发人员能够专一于业务逻辑和数据的开发(ViewModel),设计人员能够专一于页面设计。
而咱们明天要学习的,就是一款MVVM模式的框架:Vue
疾速入门
装置vue
下载安装
下载地址:https://github.com/vuejs/vue
能够下载2.5.16版本https://github.com/vuejs/vue/…
下载解压,失去vue.js文件。能够在页面中间接通过script引入vue.js文件
应用cdn
或者也能够间接应用公共的CDN服务:
<!-- 开发环境版本,蕴含了用帮忙的命令行正告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue 入门案例(演示用,不做解说)
HTML模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{name}},十分酷!</h2>
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app", // el即element,要渲染的页面元素
data: {
name: "Vue测试"
}
});</script>
</body>
</html>
- 首先通过
new Vue()
来创立Vue
实例 -
而后构造函数接管一个对象,对象中有一些属性:
- el :是
element
的缩写,通过id
选中要渲染的页面元素,本例中是一个div
-
data:数据,数据是一个对象,外面有很多属性,都能够渲染到视图中
name
:这里指定了一个name
属性
- el :是
- 页面中的
h2
元素中,通过{{name}}
的形式,来渲染刚刚定义的name
属性
更神奇的在于,当你批改name
属性时,页面会跟着变动。
双向绑定
对方才的案例进行简略批改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}},十分酷!
有{{num}}个酷炫性能!
</h2>
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app", // el即element,要渲染的页面元素
data: {
name: "Vue测试",
num: 1
}
});</script>
</body>
</html>
- 在
data
中增加了新的属性:num
- 在页面中有一个
input
元素,通过v-model
与num
进行绑定 - 同时通过
{{num}}
在页面输入
能够察看到,输入框的变动引起了data
中的num
的变动,同时页面输入也跟着变动。
input
与num
绑定,input
的value
值变动,影响到了data
中的num
值- 页面
{{num}}
与数据num
绑定,因而num
值变动,引起了页面成果变动。
没有任何dom
操作,这就是双向绑定的魅力。
事件处理
在页面增加一个按钮:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">点我</button>
<h2>
{{name}},十分酷!
有{{num}}个酷炫性能!
</h2>
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app", // el即element,要渲染的页面元素
data: {
name: "Vue测试",
num: 1
}
});</script>
</body>
</html>
- 这里用
v-on
指令绑定点击事件,而不是一般的onclick
,而后间接操作num
- 一般
onclick
是无奈间接操作num
的
Vue 实例
创立Vue实例
每个 Vue
利用都是通过用 Vue
函数创立一个新的 Vue
实例开始的:
var vm = new Vue({
// 选项
})
在构造函数中传入一个对象,并且在对象中申明各种Vue须要的数据和办法,包含:
- el
- data
- methods
- … …等
接下来,一一介绍。
模板或元素
每个Vue
实例都须要关联一段Html
模板,Vue
会基于此模板进行视图渲染;能够通过el属性来指定。
例如一段html模板:
<div id="app">
</div>
而后创立Vue
实例,关联这个div
var vm = new Vue({
el:"#app"
})
这样,Vue
就能够基于id
为 app
的div
元素作为模板进行渲染了。在这个div
范畴以外的局部是无奈应用vue
个性的。
数据
当Vue实例被创立时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监督data中的属性变动,当data产生扭转,所有相干的视图都将从新渲染,这就是“响应式“零碎。
html:
<div id="app">
<input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"ZHANGSAN"
}
})
name
的变动会影响到input
的值input
中输出的值,也会导致vm
中的name
产生扭转
办法
Vue实例中除了能够定义data属性,也能够定义方法,并且在Vue的作用范畴内应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="add">点我</button>
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app",
data: {},
methods: {
add: function () {
console.log("点我了...233")
}
}
});</script>
</body>
</html>
生命周期钩子函数
每个 Vue 实例在被创立时都要通过一系列的初始化过程 :创立实例,装载模板,渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
所有的生命周期钩子主动绑定 this 上下文到实例中,因而你能够拜访数据,对属性和办法进行运算。
20200710065238953
生命周期
每个 Vue 实例在被创立之前都要通过一系列的初始化过程
生命周期函数
含意
beforeCreate(vue对象创立前)
组件实例刚被创立,组件属性计算之前,比方data属性等
created(创立后)
模板编译、挂载之前
mounted(载入后)
模板编译、挂载之后
beforeUpdate(更新前)
组件更新之前
updated(更新后)
组件更新之后
beforeDestroy(销毁前)
组件销毁前调用
destroyed(销毁后)
组件销毁后调用
vm.$el :Vue 实例应用的根 DOM 元素
vm.$root :以后的 Vue 实例。
Vue在实例化的过程中,会调用这些生命周期的钩子,给咱们提供了执行自定义逻辑的机会。那么,在这些vue钩子中,vue实例到底执行了那些操作,咱们先看上面执行的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs生命周期</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript"> var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function () {
console.log(this);
showData('创立vue实例前', this);
},
created: function () {
showData('创立vue实例后', this);
},
beforeMount: function () {
showData('挂载到dom前', this);
},
mounted: function () {
showData('挂载到dom后', this);
},
beforeUpdate: function () {
showData('数据变动更新前', this);
},
updated: function () {
showData('数据变动更新后', this);
},
beforeDestroy: function () {
showData('vue实例销毁前', this);
},
destroyed: function () {
showData('vue实例销毁后', this);
}
});
function showData(process, obj) {
console.log(process);
console.log('data 数据:' + obj.message)
console.log('挂载的对象:')
console.log(obj.$el)
}</script>
</body>
</html>
钩子函数
例如:created
代表在vue实例创立后;
能够在Vue
中定义一个created
函数,代表这个期间的构造函数:
创立示例html页面如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
// 初始化为空
msg: ""
},
// 钩子函数
created() {
// this 示意Vue实例
this.msg = "hello vue.created";
console.log(this)
}
});</script>
</body>
</html>
this
能够看下在vue外部的this变量是谁,在created的时候,打印this
var app = new Vue({
el:"#app",
data:{
msg: ""
},
//钩子函数
created() {
//this示意vue实例
this.msg = "hello vue. created.";
console.log(this);
}
});
控制台的输入; 总结: this 就是以后的Vue实例,在Vue对象外部,必须应用 this 能力拜访到Vue中定义的data内属性、办法等。
利用场景
- 在beforeCreate生命周期函数运行时,能够增加loading动画
- 在created生命周期函数运行时,能够完结loading动画,还能够做一些初始化,实现函数自执行等操作
- 最常常应用的是mounted生命周期函数
能够发动后端数据申请,取回数据
能够接管页面之间传递的参数
能够子组件向父组件传递参数等
指令
什么是指令?
指令 (Directives) 是带有 v-
前缀的非凡属性。例如在入门案例中的v-model
,代表双向绑定。
插值表达式
花括号
格局:
{{表达式}}
阐明:
- 该表达式反对JS语法,能够调用js内置函数(必须有返回值)
- 表达式必须有返回后果。例如 1 + 1,没有后果的表达式不容许应用,如:var a = 1 + 1;
- 能够间接获取Vue实例中定义的数据或函数
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app",
data: {
msg: "hello vue."
}
});</script>
</body>
</html>
插值闪动
应用{{}}
形式在网速较慢时会呈现问题。在数据未加载实现时,页面会显示出原始的 {{}}
,加载结束后才显示正确数据,称为插值闪动。解决办法是通过v-text和v-html替换
v-text 和 v-html
应用v-text
和v-html
指令来代替 {{}}
阐明:
v-text
:将数据输入到元素外部,如果输入的数据有HTML代码,会作为一般文本输入v-html
:将数据输入到元素外部,如果输入的数据有HTML代码,会被渲染
示例,革新原页面内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--{{msg}}-->
v-text:<span v-text="msg"></span><br/>
v-html:<span v-html="msg"></span><br/>
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app",
data: {
// msg: "hello vue."
msg: "<h2>hello vue.</h2>"
}
});</script>
</body>
</html>
并且不会呈现插值闪动,当没有数据时,会显示空白。
v-model
方才的v-text
和v-html
能够看做是单向绑定,数据影响了视图渲染,然而反过来就不行。
接下来学习的v-model
是双向绑定,视图(View
)和模型(Model
)之间会相互影响。
既然是双向绑定,肯定是在视图中能够批改数据,这样就限定了视图的元素类型。
目前v-model
的可应用元素有:
- input
- select
- textarea
- checkbox
- radio
- components(Vue中的自定义组件)
基本上除了最初一项,其它都是表单的输出项。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br/>
<input type="checkbox" value="PHP" v-model="language">PHP<br/>
<input type="checkbox" value="Swift" v-model="language">Swift<br/>
<h2>
你抉择了:{{language.join(",")}}
</h2>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
language: []
}
});</script>
</body>
</html>
- 多个
checkbox
对应一个model
时,model
的类型是一个数组,单个checkbox
值是boolean类型 radio
对应的值是input的value值input
和textarea
默认对应的model是字符串select
单选对应字符串,多选对应也是数组
v-on
根本用法
v-on
指令用于给页面元素绑定事件。
语法:
v-on:事件名="js片段或函数名"
简写语法:
@事件名="js片段或函数名"
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--间接写js片段-->
<button @click="num++">减少</button>
<!--应用函数名,该函数必须要在vue实例中定义-->
<button @click="decrement">缩小</button>
<h2>
num={{num}}
</h2>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decrement() {
this.num--;
}
}
});</script>
</body>
</html>
事件修饰符
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是十分常见的需要。
只管咱们能够在办法中轻松实现这点,但更好的形式是:办法只有纯正的数据逻辑,而不是去解决 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on
提供了事件修饰符。之前提过,修饰符是由点结尾的指令后缀来示意的。
.stop
:阻止事件冒泡.prevent
:阻止默认事件产生.capture
:应用事件捕捉模式.self
:只有元素本身触发事件才执行。(冒泡或捕捉的都不执行).once
:只执行一次
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--间接写js片段-->
<button @click="num++">减少</button>
<!--应用函数名,该函数必须要在vue实例中定义-->
<button @click="decrement">缩小</button>
<h2>
num={{num}}
</h2>
<hr>
事件冒泡测试:<br/>
<div style="background-color: lightblue;width: 100px;height: 100px" @click="print('div被点击了')">
<button @click.stop="print('点击了button')">点我试试</button>
</div>
<br>阻止默认事件:<br>
<a href="http://www.baidu.com" @click.prevent="print('点击了超链接')">百度</a>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decrement() {
this.num--;
},
print(str) {
console.log(str);
}
}
});</script>
</body>
</html>
v-for
遍历数据渲染页面是十分罕用的需要,Vue中通过v-for
指令来实现。
遍历数组
语法:
v-for="item in items"
items
:要遍历的数组,须要在vue的data中定义好。item
:循环变量
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
users: [
{"name": "小明", "age": 13, "gender": "男"},
{"name": "小红", "age": 13, "gender": "女"},
{"name": "小绿", "age": 4, "gender": "男"}
]
}
});</script>
</body>
</html>
数组角标
在遍历的过程中,如果须要晓得数组角标,能够指定第二个参数:
语法:
v-for="(item,index) in items"
- items:要迭代的数组
- item:迭代失去的数组元素别名
- index:迭代到的以后元素索引,从0开始。
示例:
<div id="app">
<ul>
<li v-for="(user,index) in users">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
遍历对象
v-for
除了能够迭代数组,也能够迭代对象。语法根本相似
语法:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
- 1个参数时,失去的是对象的值
- 2个参数时,第一个是值,第二个是键
- 3个参数时,第三个是索引,从0开始 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<ul>
<li v-for="(user,index) in users">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<ul>
<!--1个参数时,失去的是对象的值-->
<li v-for="value in person">
{{value}}
</li>
</ul>
<hr>
<ul>
<!--2个参数时,第一个是值,第二个是键-->
<li v-for="(value,key ) in person">
{{value}}--{{key}}
</li>
</ul>
<hr>
<ul>
<!--3个参数时,第三个是索引,从0开始-->
<li v-for="(value,key,index ) in person">
{{value}}--{{key}} -- {{index}}
</li>
</ul>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
users: [
{"name": "小明", "age": 13, "gender": "男"},
{"name": "小红", "age": 13, "gender": "女"},
{"name": "小绿", "age": 4, "gender": "男"}
],
person: {"name": "zhangsan", "age": 13, "gender": "男", "address": "中国"}
}
});</script>
</body>
</html>
key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的程序被扭转,Vue 将不会挪动 DOM 元素来匹配数据项的程序, 而是简略复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
如果应用key这个性能能够无效的进步渲染的效率;key个别应用在遍历完后,又增、减汇合元素的时候更有意义。
然而要实现这个性能,你须要给Vue一些提醒,以便它能跟踪每个节点的身份,从而重用和从新排序现有元素,你须要为每项提供一个惟一 key 属性。现实的 key 值是每项都有的且惟一的 id。 也就是key是该的惟一标识。
示例:
<ul>
<li v-for="(item,index) in items" :key="index"></li>
</ul>
- 这里应用了一个非凡语法:
:key=""
前面会讲到,它能够让你读取vue中的属性,并赋值给key属性 - 这里绑定的key是数组的索引,应该是惟一的
v-if 和 v-show
根本应用
v-if
,顾名思义,条件判断。当失去后果为true时,所在的元素才会被渲染。
语法:
v-if="布尔表达式"
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
show: true
}
});</script>
</body>
</html>
与 v-for 联合
当v-if
和v-for
呈现在一起时,v-for
优先级更高。也就是说,会先遍历,再判断条件。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul>
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});</script>
</body>
</html>
v-else
能够应用 v-else
指令来示意 v-if
的“else 块
”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul v-if="show">
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
<li v-else style="background-color: blue">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});</script>
</body>
</html>
v-else
元素必须紧跟在带 v-if
或者 v-else-if
的元素的前面,否则它将不会被辨认。 v-else-if
,顾名思义,充当 v-if 的“else-if 块
”,能够间断应用:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
相似于 v-else
, v-else-if
也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-show
另一个用于依据条件展现元素的选项是 v-show
指令。用法大抵一样:
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简略地切换元素的 CSS 属性display
。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul v-if="show">
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
<li v-else style="background-color: blue">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<h2 v-show="show">
你好,世界!
</h2>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});</script>
</body>
</html>
v-bind
属性上应用vue数据
看这样一个案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
<style type="text/css"> div {
width: 100px;
height: 100px;
color: white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
} </style>
</head>
<body>
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<div :class="">
点击按钮扭转背景色彩
</div>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
color: "red"
}
});</script>
</body>
</html>
解读:
- 页面有两个按钮,点击时,会扭转Vue实例中的color值,这个值与后面定义的CSS款式统一。
- 目前div的
class
为空,心愿实现点击按钮后,div的class款式会在.red和.blue之间切换
该如何实现?
大家可能会这么想,既然color值会动态变化为不同的class名称,那么咱们间接把color注入到class属性就好了,于是就这样写:
<div class="{{color}}"></div>
这样写是谬误的!因为插值表达式不能用在标签的属性中。
此时,Vue提供了一个新的指令来解决:v-bind
,语法:
v-bind:属性名="Vue中的变量"
例如,在这里咱们能够写成:
<div v-bind:class="color"></div>
不过,v-bind
太麻烦,因而能够省略,间接写成:
,:属性名='属性值'
,即:
<div :class="color"></div>
class属性的非凡用法
下面尽管实现了色彩切换,然而语法却比拟啰嗦。
Vue对class属性进行了非凡解决,能够接管数组或对象格局
对象语法:能够传给 :class
一个对象,以动静地切换 class:
<div :class="{ red: true,blue:false }"></div>
- 对象中,key是曾经定义的class款式的名称,如本例中的: red 和 blue
- 对象中,value是一个布尔值,如果为true,则这个款式会失效,如果为false,则不失效。
之前的案例能够改写成这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
<style type="text/css"> div {
width: 100px;
height: 100px;
color: white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
} </style>
</head>
<body>
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<!--v-bind 简写为 :-->
<div :class="color">
点击按钮扭转背景色彩
</div>
<hr>
<br>
<button @click="bool=!bool">点我扭转上面色块的色彩</button>
<div :class="{red:bool, blue:!bool}">
点击按钮扭转背景色彩
</div>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
color: "red",
bool:true
}
});</script>
</body>
</html>
首先class绑定的是一个对象: {red:bool, blue: !bool}
red和blue两个款式的值别离是bool和!bool,也就是说这两个款式的失效标记恰好相反,一个失效,另一个生效。
bool默认为true,也就是说默认red失效,blue不失效
当初只须要一个按钮即可,点击时对bool取反,天然实现了款式的切换
计算属性
在插值表达式中应用js表达式是十分不便的,而且也常常被用到。
然而如果表达式的内容很长,就会显得不够优雅,而且前期保护起来也不不便,例如上面的场景,有一个日期的数据,然而是毫秒值:
data:{
birthday:1429032123201 // 毫秒值
}
在页面渲染,心愿失去yyyy-MM-dd的款式则须要如下解决:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>
你的生日是:
{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
</h2>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
birthday: 1429032123201
}
});</script>
</body>
</html>
尽管能失去后果,然而十分麻烦。
Vue中提供了计算属性,来代替简单的表达式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>
你的生日是:
{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
</h2>
<hr>
<h2>
computed计算形式;你的生日为:{{birth}}
</h2>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
birthday: 1429032123201
},
computed: {
birth() {
const date = new Date(this.birthday);
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay();
}
}
});</script>
</body>
</html>
计算属性实质就是办法,然而肯定要返回数据。而后页面渲染时,能够把这个办法当成一个变量来应用。
过滤器
阐明
官网说法:Vue.js 容许你自定义过滤器,可被用于一些常见的==文本格式化==。过滤器能够用在两个中央:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始反对)。过滤器应该被增加在 JavaScript 表达式的尾部,由“管道”符号批示。
艰深的来说:过滤器是对行将显示的数据做进一步的筛选解决,而后进行显示,值得注意的是过滤器并没有扭转原来的数据,只是在原数据的根底上产生新的数据。
过滤器的品种:
- 全局过滤器
- 部分过滤器
过滤器的应用步骤
定义过滤器
-
全局过滤器
Vue.filter('过滤器名称', function (value[,param1,...] ) { //逻辑代码 })
-
部分过滤器
new Vue({ filters: { '过滤器名称': function (value[,param1,...] ) { // 逻辑代码 } } })
利用过滤器
{{ 表达式 | 过滤器名字}}
过滤器不带参数
案例1:日期格式化
<body>
<div id="myDiv">
{{birthday | dateFormat }}
</div>
<script src="../js/vue.js"></script>
<script src="../js/moment.js"></script> // 须要引入一个日期解决的一个工具类
<script type="text/javascript"> // 定义过滤器
Vue.filter("dateFormat",function(value){
return moment(value).format("YYYY-MM-DD HH:mm:ss");
});
const app = new Vue({
el: "#myDiv",
data: {
birthday: new Date()
}
}); </script>
</body>
案例2:文本格式化
<body>
<div id="myDiv">
{{message | messageFormat}} <br/>
{{message }} // 值并没有扭转
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> Vue.filter("messageFormat",function(value){
return value.replace("很棒","优良");
});
const app = new Vue({
el: "#myDiv",
data: {
message: "HelloWorld,是一个很棒的青年"
}
}); </script>
</body>
过滤器带参数
<body>
<div id="myDiv">
{{birthday | dateFormat }} <br/> // 不传递格式化规范就用残缺写法
{{birthday | dateFormat("YYYY-MM-DD") }} // 传入了格式化规范就用传递的写法进行格式化
</div>
<script src="../js/vue.js"></script>
<script src="../js/moment.js"></script>
<script type="text/javascript"> Vue.filter("dateFormat",function(value,pattern = "YYYY-MM-DD HH:mm:ss"){
return moment(value).format(pattern);
});
const app = new Vue({
el: "#myDiv",
data: {
birthday: new Date()
}
}); </script>
</body>
watch
监控
watch
能够让咱们监控一个值的变动。从而做出相应的反馈。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message">
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
message: "hello vue"
},
watch: {
message(newValue, oldValue) {
console.log("新值:" + newValue + ";旧值:" + oldValue)
}
}
});</script>
</body>
</html>
深度监控
如果监控的是一个对象,须要进行深度监控,能力监控到对象中属性的变动,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<hr>
<br>
<input type="text" v-model="person.name"><br>
<input type="text" v-model="person.age">
<button @click="person.age++">+</button>
<h2>
姓名为:{{person.name}};年龄为:{{person.age}}
</h2>
</div>
<script type="text/javascript"> let app = new Vue({
el: "#app",
data: {
message: "hello vue",
person: {"name": "zhangsan", "age": 12}
},
watch: {
message(newValue, oldValue) {
console.log("新值:" + newValue + ";旧值:" + oldValue)
},
person: {
// 开启深度监控,能够监控到对象属性值的变动
deep: true,
// 监控的解决方法
handler(obj) {
console.log("name = " + obj.name + ", age=" + obj.age);
}
}
}
});</script>
</body>
</html>
变动:
以前定义监控时,person是一个函数,当初改成了对象,并且要指定两个属性:
deep
:代表深度监控,不仅监控person变动,也监控person中属性变动handler
:就是以前的监控处理函数
组件化
在大型利用开发的时候,页面能够划分成很多局部。往往不同的页面,也会有雷同的局部。例如可能会有雷同的头部导航。
然而如果每个页面都单独开发,这无疑减少了咱们开发的老本。所以咱们会把页面的不同局部拆分成独立的组件,而后在不同页面就能够共享这些组件,防止反复开发。
全局组件
咱们通过Vue的component办法来定义一个全局组件。
<div id="app">
<!--应用定义好的全局组件-->
<counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript"> // 定义全局组件,两个参数:1,组件名称。2,组件参数
Vue.component("counter",{
template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
data(){
return {
count:0
}
}
})
var app = new Vue({
el:"#app"
})</script>
- 组件其实也是一个Vue实例,因而它在定义时也会接管:data、methods、生命周期函数等
- 不同的是组件不会与页面的元素绑定,否则就无奈复用了,因而没有el属性。
- 然而组件渲染须要html模板,所以减少了template属性,值就是HTML模板
- 全局组件定义结束,任何vue实例都能够间接在HTML中通过组件名称来应用组件了。
- data必须是一个函数,不再是一个对象。
组件的复用
定义好的组件,能够任意复用屡次:
<div id="app">
<!--应用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
你会发现每个组件互不烦扰,都有本人的count值。怎么实现的?
组件的data属性必须是函数!
当咱们定义这个counter组件时,它的data 并不是像这样间接提供一个对象:
data: {
count: 0
}
取而代之的是,一个组件的 data 选项必须是一个函数,因而每个实例能够保护一份被返回对象的独立的拷贝:
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规定,点击一个按钮就会影响到其它所有实例!
部分注册
一旦全局注册,就意味着即使当前你不再应用这个组件,它仍然会随着Vue的加载而加载。
因而,对于一些并不频繁应用的组件,咱们会采纳部分注册。
咱们先在内部定义一个对象,构造与创立组件时传递的第二个参数统一:
const counter = {
template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
data(){
return {
count:0
}
}
};
而后在Vue中应用它:
var app = new Vue({
el:"#app",
components:{
counter:counter // 将定义的对象注册为组件
}
})
-
components就是以后vue对象子组件汇合。
- 其key就是子组件名称
- 其值就是组件对象的属性
- 成果与方才的全局注册是相似的,不同的是,这个counter组件只能在以后的Vue实例中应用
组件通信
通常一个单页利用会以一棵嵌套的组件树的模式来组织:
image-20201001195026231
- 页面首先分成了顶部导航、左侧内容区、右侧边栏三局部
- 左侧内容区又分为高低两个组件
- 右侧边栏中又蕴含了3个子组件
各个组件之间以嵌套的关系组合在一起,那么这个时候不可避免的会有组件间通信的需要。
父向子传递
- 父组件应用子组件时,自定义属性(属性名任意,属性值为要传递的数据)
- 子组件通过props接管父组件属性
父组件应用子组件,并自定义了title属性:
<div id="app">
<h1>打个招呼:</h1>
<!--应用子组件,同时传递title属性-->
<introduce title="父组件传递的音讯"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript"> Vue.component("introduce",{
// 间接应用props接管到的属性来渲染页面
template:'<h1>{{title}}</h1>',
props:['title'] // 通过props来接管一个父组件传递的属性
})
var app = new Vue({
el:"#app"
})</script>
传递简单数据
咱们定义一个子组件,并承受简单数据:
const myList = {
template: '
<ul>
<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>
</ul>
',
props: {
items: {
type: Array,
default: [],
required: true
}
}
};
- 这个子组件能够对 items 进行迭代,并输入到页面。
-
props:定义须要从父组件中接管的属性
-
items:是要接管的属性名称
- type:限定父组件传递来的必须是数组
- default:默认值
- required:是否必须
-
咱们在父组件中应用它:
<div id="app">
<h2>百知已开设如下课程:</h2>
<!-- 应用子组件的同时,传递属性,这里应用了v-bind,指向了父组件本人的属性lessons -->
<my-list :items="lessons"/>
</div>
var app = new Vue({
el:"#app",
components:{
myList // 当key和value一样时,能够只写一个
},
data:{
lessons:[
{id:1, name: 'java'},
{id:2, name: 'python'},
{id:3, name: 'ui'},
]
}
})
子向父的通信
来看这样的一个案例:
<div id="app">
<h2>num: {{num}}</h2>
<!--应用子组件的时候,传递num到子组件中-->
<counter :num="num"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript"> Vue.component("counter", {// 子组件,定义了两个按钮,点击数字num会加或减
template:'
<div>
<button @click="num++">加</button>
<button @click="num--">减</button>
</div>',
props:['num']// count是从父组件获取的。
})
var app = new Vue({
el:"#app",
data:{
num:0
}
})</script>
- 子组件接管父组件的num属性
- 子组件定义点击按钮,点击后对num进行加或减操作
咱们尝试运行,如同没问题,点击按钮试试:
image-20201001200426862
子组件接管到父组件属性后,默认是不容许批改的。怎么办?
既然只有父组件能批改,那么加和减的操作肯定是放在父组件:
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{ // 父组件中定义操作num的办法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})
然而,点击按钮是在子组件中,那就是说须要子组件来调用父组件的函数,怎么做?
咱们能够通过v-on指令将父组件的函数绑定到子组件上:
<div id="app">
<h2>num: {{num}}</h2>
<counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>
在子组件中定义函数,函数的具体实现调用父组件的实现,并在子组件中调用这些函数。当子组件中按钮被点击时,调用绑定的函数:
Vue.component("counter", {
template:'
<div>
<button @click="plus">加</button>
<button @click="reduce">减</button>
</div>',
props:['count'],
methods:{
plus(){
this.$emit("inc");
},
reduce(){
this.$emit("dec");
}
}
})
- vue提供了一个内置的this.$emit()函数,用来调用父组件绑定的函数
路由vue-router
场景模仿
当初咱们来实现这样一个性能:
一个页面,蕴含登录和注册,点击不同按钮,实现登录和注册页切换。
编写父组件
为了让接下来的性能比拟清晰,咱们先新建一个文件夹:src
而后新建一个HTML文件,作为入口:index.html
而后编写页面的根本构造:
<div id="app">
<span>登录</span>
<span>注册</span>
<hr/>
<div>
登录页/注册页
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript"> var vm = new Vue({
el:"#app"
})</script>
编写登录及注册组件
接下来咱们来实现登录组件,以前咱们都是写在一个文件中,然而为了复用性,开发中都会把组件放入独立的JS文件中,咱们新建一个user目录以及login.js及register.js。
编写组件,这里咱们只写模板,不写性能。
login.js内容如下:
const loginForm = {
template:'
<div>
<h2>登录页</h2>
用户名:<input type="text"><br/>
明码:<input type="password"><br/>
</div>
'
}
register.js内容:
const registerForm = {
template:'
<div>
<h2>注册页</h2>
用 户 名:<input type="text"><br/>
密  码:<input type="password"><br/>
确认明码:<input type="password"><br/>
</div>
'
}
在父组件中援用
<div id="app">
<span>登录</span>
<span>注册</span>
<hr/>
<div>
<!--<loginForm></loginForm>-->
<!--
疑难:为什么不采纳下面的写法?
因为html是大小写不敏感的,如果采纳下面的写法,则被认为是<loginform></loginform>
所以,如果是驼峰模式的组件,须要把驼峰转化为“-”的模式
-->
<login-form></login-form>
<register-form></register-form>
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="user/login.js"></script>
<script src="user/register.js"></script>
<script type="text/javascript"> var vm = new Vue({
el: "#app",
components: {
loginForm,
registerForm
}
})</script>
问题
咱们期待的是,当点击登录或注册按钮,别离显示登录页或注册页,而不是一起显示。
然而,如何能力动静加载组件,实现组件切换呢?
尽管应用原生的Html5和JS也能实现,然而官网举荐咱们应用vue-router模块。
vue-router简介和装置
应用vue-router和vue能够十分不便的实现 简单单页利用的动静路由性能。
官网:https://router.vuejs.org/zh-cn/
应用npm装置:npm install vue-router --save
在index.html中引入依赖:
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
疾速入门
新建vue-router对象,并且指定路由规定:
// 创立VueRouter对象
const router = new VueRouter({
routes:[ // 编写路由规定
{
path:"/login", // 申请门路
component:loginForm // 组件名称
},
{path:"/register",component:registerForm},
]
})
- 创立VueRouter对象,并指定路由参数
-
routes:路由规定的数组,能够指定多个对象,每个对象是一条路由规定,蕴含以下属性:
- path:路由的门路
- component:组件名称
在父组件中引入router对象:
var vm = new Vue({
el:"#app",
components:{// 援用登录和注册组件
loginForm,
registerForm
},
router // 援用下面定义的router对象
})
页面跳转管制:
<div id="app">
<!--router-link来指定跳转的门路-->
<span><router-link to="/login">登录</router-link></span>
<span><router-link to="/register">注册</router-link></span>
<hr/>
<div>
<!--vue-router的锚点-->
<router-view></router-view>
</div>
</div>
- 通过 router-view 来指定一个锚点,当路由的门路匹配时,vue-router会主动把对应组件放到锚点地位进行渲染
- 通过 router-link 指定一个跳转链接,当点击时,会触发vue-router的路由性能。
单文件组件
vue-cli3开发单文件组件
Vue.component('组件名',{
})
new Vue({})
毛病
- 全局定义组件的名字时不能反复
- 字符串模板 es6提供了模板字符串
- 不反对css
在vue中把.vue的文件称为 单文件组件
Vue CLI3 脚手架
根本配置
-
装置Nodejs
- 保障Node.js8.9或更高版本
- 终端中输出
node -v
,保障已装置胜利
-
装置淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 当前的npm能够用cnpm代替
-
装置Vue Cli3脚手架
cnpm install -g @vue/cli
-
查看其版本是否正确
vue --version
疾速原型开发
在命令行工具cmd,或者Intellij IDEA的Terminal中进入想要构建我的项目的目录,输出
vue init webpack project-name
回车,webpack默认版本为2.0。
接下来会呈现几个提醒,别离是输出项目名称、形容、作者等,按理论状况抉择即可。
?Project name ---- 项目名称,init命令时也填了个project-name,如果无需更改,间接回车即可;
?Project description ---- 我的项目形容,按需填写。无需填写能够间接回车;
?Author ---- 作者
?Vue build ---- 构建模式,个别默认第一个;
?Install vue-router? ---- 是否装置vue-router。选Y。后边构建我的项目会用到。
?Use ESLint to lint yout code? ---- 格局校验,按需;
?Set up unit tests ---- 测试相干,按需;
?Setup e2e tests with Nightwatch? ---- 测试相干,按需;
?Should we run ‘npm install’ for you after the project has been created? ---- 按需,这里我选Yes, use NPM。如果选No,后续本人在指标
目录下执行npm install即可。这样构建进去的我的项目,能够间接运行。进入我的项目所在目录,执行npm run dev,执行完看到以下提醒:
Your application is running here: http://localhost:8080
在浏览器关上http://localhost:8080,看到这个页面,接下来就能够开始开发了。
剖析Vue脚手架生成的我的项目构造
node_modules:依赖包目录 public:动态资源目录 src:源码目录 src/assets:资源目录 src/components:组件目录 src/views:视图组件目录 src/App.vue:根组件 src/main.js:入口js src/router.js:路由js babel.config.js:babel配置文件
应用单文件组件开发购物车
<template>
<div id="app">
<h1>{{title}}</h1>
<ul>
<li v-for="item in cartList" :key="item.id">
<h2>{{item.title}}</h2>
<p>${{item.price}}</p>
</li>
</ul>
<my-cart :title="title" :cart-list="cartList"></my-cart>
</div>
</template>
<script> import MyCart from './components/Cart';
export default {
name:"app",
data() {
return {
cartList:[
{id:1,title:"vue实战",price:188,active:true,count:2},
{id:2,title:"react实战",price:288,active:false,count:1}],
title:"购物车"
};
},
components:{MyCart}
} </script>
购物车文件代码:
<template>
<div>
<h1>{{title}}</h1>
<table border="1">
<tr>
<th>#</th>
<th>课程</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr v-for="(c,index) in cartList" :key="c.id">
<td>
<input type="checkbox" v-model="c.active">
</td>
<td>{{c.title}}</td>
<td>{{c.price}}</td>
<td>
<button @click="substract(index)">-</button>
{{c.count}}
<button @click="add(index)">+</button>
</td>
<td>¥{{c.price*c.count}}</td>
</tr>
<tr>
<td></td>
<td colspan="2">{{activeCount}}/{{count}}</td>
<td colspan="2">¥{{total}}</td>
</tr>
</table>
</div>
</template>
<script> export default {
name:"cart",
props:['title','cartList'],
methods: {
remove(i) {
if (window.confirm("确定是否要删除?")) {
this.cartList.splice(i, 1);
}
},
substract(i) {
let count = this.cartList[i].count;
count > 1 ? (this.cartList[i].count -= 1) : this.remove(i);
},
add(i) {
this.cartList[i].count++;
}
},
computed:{
count(){
return this.cartList.length;
},
activeCount(){
return this.cartList.filter(v=>v.active).length;
},
total(){
let sum=0;
this.cartList.forEach(c=>{
if(c.active){
sum+=c.price*c.count;
}
});
return sum;
}
}
}</script>
<style scoped>
</style>
Vuejs Ajax
Vuejs 并没有间接解决ajax的组件,但能够应用axios组件实现对异步申请的操作。
Axios简介
# 如果应用npm则能够如下装置
npm install axios
axios利用
办法阐明
axios能够应用的办法有:
- axios(config)
config申请配置
这些是创立申请时能够用的配置选项。只有 url
是必须的。如果没有指定 method
,申请将默认应用 get 办法。
{
// `url` 是用于申请的服务器 URL
url: '/user',
// `method` 是创立申请时应用的办法
method: 'get', // 默认是 get
// `baseURL` 将主动加在 `url` 后面,除非 `url` 是一个相对 URL。
// 它能够通过设置一个 `baseURL` 便于为 axios 实例的办法传递绝对 URL
baseURL: 'https://some-domain.com/api/',
// `params` 是行将与申请一起发送的 URL 参数
// 必须是一个无格局对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},
// `data` 是作为申请主体被发送的数据
// 只实用于这些申请办法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时,必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属:FormData, File, Blob
// - Node 专属: Stream
data: {
firstName: 'Fred'
},
// `timeout` 指定申请超时的毫秒数(0 示意无超时工夫)
// 如果申请话费了超过 `timeout` 的工夫,申请将被中断
timeout: 1000
}
响应构造
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为申请提供的配置信息
config: {}
}
axios办法示例
能够通过向 axios
传递相干配置来创立申请
axios(config)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users" :key="index">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app",
data: {
users: []
},
created() {
// 初始化加载数据
axios({
method: "get",
url: "data.json"
}).then((res) => {
console.log(res);
// 将获取数据设置到users属性
// 不能应用this,在axios回调函数中示意窗口,不是vue实例
app.users = res.data;
}).catch(error => {
alert(error);
})
}
});</script>
</body>
</html>
综合案例
购物车综合案例
第一步:实现图书的列表显示
<body>
<div id="myDiv">
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
<tr v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price}}</td>
<td>
<button>-</button>
{{book.number}}
<button>+</button>
</td>
<td>
<button>删除</button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [
{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.00, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
}
}); </script>
</body>
第二步:价格小数问题解决
形式一:methods
<body>
<div id="myDiv">
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
<tr v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{getPrice(book.price)}}</td>
<td>
<button>-</button>
{{book.number}}
<button>+</button>
</td>
<td>
<button>删除</button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [
{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
methods: {
getPrice(price){
return '¥' + price.toFixed(2);
}
}
}); </script>
</body>
形式二:过滤器
==能够利用到插值表达式或v-bind表达式中,能够做格式化。==
<body>
<div id="myDiv">
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
<tr v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price | getPrice}}</td>
<td>
<button>-</button>
{{book.number}}
<button>+</button>
</td>
<td>
<button>删除</button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [
{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
filters: {
getPrice(price){
return '¥' + price.toFixed(2);
}
}
}); </script>
</body>
第三步:数量加减操作
<body>
<div id="myDiv">
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
<tr v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price}}</td>
<td>
<button @click="decrement(book)" v-bind:disabled="book.number < 2">
-
</button>
{{book.number}}
<button @click="increment(book)">+</button>
</td>
<td>
<button>删除</button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [
{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
methods: {
decrement(book){
book.number--;
},
increment(book){
book.number++;
}
}
}); </script>
</body>
第四步:移除按钮
<body>
<div id="myDiv">
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price}}</td>
<td>
<button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button>
{{book.number}}
<button @click="increment(book)">+</button>
</td>
<td>
<button @click="deleteHandle(index)">删除</button>
</td>
</tr>
</table>
<h2 v-if="books.length <= 0">
购物车空洞无物
</h2>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [
{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
methods: {
deleteHandle(index){
this.books.splice(index,1);
}
}
}); </script>
</body>
第五步:计算最终价格
<body>
<div id="myDiv">
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price}}</td>
<td>
<button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button>
{{book.number}}
<button @click="increment(book)">+</button>
</td>
<td>
<button @click="deleteHandle(index)">删除</button>
</td>
</tr>
</table>
<h1>总价:{{totalPrice | getPrice}}</h1>
<h2 v-if="books.length <= 0">
购物车空洞无物
</h2>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [
{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
filters: {
getPrice(price){
return '¥' + price.toFixed(2);
}
},
computed: {
totalPrice(){
return this.books.reduce((sum,book)=>{
return sum + book.price;
},0)
}
}
}); </script>
</body>
图书治理综合案例
第一步:实现列表、新增和删除
<body>
<div id="myDiv">
id: <input type="text" v-model="id"/>
图书名称: <input type="text" v-model="name"/>
<button @click="add">增加</button>
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<a href="" @click.prevent="deleteHandle(index)">删除</a> //阻止事件默认行为
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
books: [
{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
},
methods: {
add(){
let book = {id:this.id, name:this.name , pubDate:new Date()};
this.books.push(book);
},
deleteHandle(index){
this.books.splice(index,1);
}
}
}); </script>
</body>
第二步:实现搜寻筛选
<body>
<div id="myDiv">
id: <input type="text" v-model="id"/>
图书名称: <input type="text" v-model="name"/>
<button @click="add">增加</button>
依据图书名称搜寻:<input type="text" v-model="kw"/>
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<tr v-for="(book,index) in search(kw)">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<a href="" @click.prevent="deleteHandle(index)">删除</a>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
kw: '',
books: [
{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
},
methods: {
add(){
let book = {id:this.id, name:this.name , pubDate:new Date()};
this.books.push(book);
},
search(kw){
let result = [];
this.books.forEach((item)=>{
if (item.name.includes(kw)){
result.push(item);
}
});
return result;
}
}
}); </script>
</body>
==换种形式实现:==
search(kw){
return this.books.filter((item)=>{
return item.name.includes(kw);
})
}
第三步:日期格式化
<body>
<div id="myDiv">
id: <input type="text" v-model="id"/>
图书名称: <input type="text" v-model="name"/>
<button>增加</button>
依据图书名称搜寻:<input type="text" v-model="kw"/>
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate | dateFormat}}</td>
<td>
<a href="">删除</a>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script src="../js/moment.js"></script>
<script type="text/javascript"> Vue.filter("dateFormat",(value)=>{
return moment(value).format("YYYY-MM-DD");
});
const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
kw: '',
books: [
{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
}
}); </script>
</body>
第四步:优化增加性能
==需要:下面的案例中,咱们须要点击增加按钮实现增加一本书,有时候是这样子的,咱们按下回车键也能够增加,上面就来做这个性能。==
按下enter键实现增加形式1
图书名称: <input type="text" v-model="name" @keyup.enter="add"/> // 可行
按下enter键实现增加形式2
图书名称: <input type="text" v-model="name" @keyup.13="add"/> // 键码可行
按下F2键实现增加形式1
图书名称: <input type="text" v-model="name" @keyup.f2="add"/> // 可行,低版本不可行
按下F2键实现增加形式2
图书名称: <input type="text" v-model="name" @keyup.113="add"/> // 可行,通过键码代表F2可行
按下F2键盘实现增加形式3
==通过键码代表F2可行,然而浏览性不好,能够自定义按键修饰符,次要是解决低版本Vue的问题。==
图书名称: <input type="text" v-model="name" @keyup.f2="add"/>
Vue.config.keyCodes.f2 = 113
第五步:页面关上的时候就搜寻框取得焦点
依据图书名称搜寻:<input type="text" v-model="kw" v-focus/>
Vue.directive("focus",{
inserted: function(el){
el.focus();
}
});
第五步:实现批改性能
<body>
<div id="myDiv">
id: <input type="text" v-model="id" :disabled="disable"/>
图书名称: <input type="text" v-model="name"/>
<button @click="handle">提交</button>
依据图书名称搜寻:<input type="text" v-model="kw"/>
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<a href="" @click.prevent="update(book.id)">批改</a>
<a href="">删除</a>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
kw: '',
disable: false,
books: [
{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
},
methods: {
// 增加和批改重用
handle(){
if(this.disable){
// 为true,就示意批改
this.books.forEach((item)=>{
if(item.id == this.id){
item.name = this.name;
return item;
}
});
// 批改结束之后还须要对disable设置为true示意容许增加
this.disable = false;
this.id = "";
this.name = "";
}else{
// 就示意增加
let book = {id:this.id, name:this.name , pubDate:new Date()};
this.books.push(book);
}
},
update(bookId){
// 0、禁止批改id文本框
this.disable = true;
// 1、依据bookId查找出要编辑的图书
let book = this.books.filter((item)=>{
return item.id == bookId;
});
// 2、把获取到的图书填充到表单中
this.id = book[0].id;
this.name = book[0].name;
}
}
}); </script>
</body>
第六步:应用计算属性统计图书品种
<h1>总共有{{totalCount}}种不同品种的书</h1>
computed: {
totalCount(){
return this.books.length;
}
}
第七步:不能增加反复的图书【监听器】
<body>
<div id="myDiv">
id: <input type="text" v-model="id" :disabled="disable"/>
图书名称: <input type="text" v-model="name"/>
<button @click="handle" :disabled="flag">提交</button>
依据图书名称搜寻:<input type="text" v-model="kw"/>
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>出版日期</td>
<td>操作</td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<a href="" @click.prevent="update(book.id)">批改</a>
<a href="">删除</a>
</td>
</tr>
</table>
<h1>总共有{{totalCount}}种不同品种的书</h1>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
kw: '',
disable: false,
flag: false,
books: [
{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
},
computed: {
totalCount(){
return this.books.length;
}
},
methods: {
// 增加和批改重用
handle(){
if(this.disable){
// 为true,就示意批改
this.books.forEach((item)=>{
if(item.id == this.id){
item.name = this.name;
return item;
}
});
// 批改结束之后还须要对disable设置为true示意容许增加
this.disable = false;
this.id = "";
this.name = "";
}else{
// 就示意增加
let book = {id:this.id, name:this.name , pubDate:new Date()};
this.books.push(book);
}
},
update(bookId){
// 0、禁止批改id文本框
this.disable = true;
// 1、依据bookId查找出要编辑的图书
let book = this.books.filter((item)=>{
return item.id == bookId;
});
// 2、把获取到的图书填充到表单中
this.id = book[0].id;
this.name = book[0].name;
}
},
watch:{
name(value){
let result = false;
this.books.forEach((item)=>{
if (item.name == value){
result = true;
return;
}
})
if (result){
console.log("11");
this.flag = true;
}else{
this.flag = false;
}
}
}
}); </script>
</body>
第八步:图书数据的初始化
mounted(){
// 模仿ajax申请获取数据
let result = [
{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()}
];
this.books = result;
},
发表回复