修改时间：2021年2月8日
作者：pp_x
邮箱：[email protected]
文章目录
Vue.js介绍
- 用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js基础
Vue.js使用
- 在html页面使用script引入vue.js的库即可使用
远程CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>
- 使用Vue脚手架
Vue.js的语法
- 插值表达式{
{}}
- 通常用来获取Vue实例中定义的数据(data)
- **属性节点中不能够使用插值表达式 **
- ** el: 挂载点**
- 定义 Vue实例挂载的元素节点,表示vue接管该区域
- Vue管理el选项命中元素及其内部元素
- 可以使用其他选择去但建议使用Id选择器
- 可以关联其他元素，但是建议关联DIV
- Data:数据对象
- Vue中用到的数据对象在Data中
- 可以定义复杂数据类型
- 渲染复杂数据类型的时候，遵循JavaScript语法
<body>
<!-- 创建id为app的div -->
<div id="app">
{
{
name}} {
{
school.name}} {
{
school.mobile}}
<ul>
<li>{
{
names[0]}}</li>
<li>{
{
names[1]}}</li>
</ul>
</div>
</body>
<!-- 引入vue.js -->
<script src="js/vue.min.js"></script>
<script>
// 创建Vue实例
var VM = new Vue({
el: "#app",
data: {
name: "hello vue!!",
//对象类型
school: {
name: "拉勾教育",
mobile: "10011001",
},
//数组类型
//数组类型
names: ["小斌", "张百万", "刘能"],
},
});
</script>
声明式渲染的好处
- Vue中的声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML
- 和DOM进行解耦，在Vue中只需要关注定义数据即可，渲染数据由Vue执行
Vue常用的指令
v-text指令
- 作用: 获取data数据, 设置标签的内容
- 注意: 和插值表达式不同，此指令会覆盖之前的内容
<body>
<div id="app">
<!-- 插值表达式 不会覆盖原来的内容体 -->
<h2>{
{
message}}高薪训练营</h2>
<!-- v-text 获取data数据,设置标签的内容, 会覆盖之前的内容体 -->
<h2 v-text="message">高薪训练营</h2>
<!-- 拼接字符串 -->
<h2 v-text="message+1"></h2>
<h2 v-text="message+'abc'"></h2>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
message: "Java程序员",
},
});
</script>
v-html指令
- 相当于设置元素的innerHTML（可以写入新的标签）
<body>
<div id="app">
{
{
message}}
//类似设置innerHtml属性
<h2 v-html="url"></h2>
<h2 v-text="url"></h2>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
message:"Java程序员",
url:"<a href='www.baidu.com'>百度一下</a>",
}
})
</script>
v-on指令
- 作用: 为元素绑定事件, 比如:
v-on:click="方法" - 可以简写为
@click="方法" - 绑定的方法写在Vue实例中的methods属性中
- 函数调用可以传参
- 事件修饰符可以对时间的触发方式进行限制
<style>
/*
1.函数调用传参
事件绑定方法后,可以传递参数
定义方法时,需要定义形参,来接收参数
2.事件修饰符
可以对事件进行限制, .修饰符
.enter 可以限制触发的方式为 回车
*/
</style>
</head>
<body>
<div id="app">
<!-- 函数传参 -->
<input
type="button"
value="礼物刷起来"
@click="showTime(666,'爱你老铁!')"
/>
<!-- 事件修饰符 指定哪些方式可以触发事件 -->
<input type="text" @keyup.enter="hi" />
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
},
methods: {
showTime: function (p1, p2) {
console.log(p1);
console.log(p2);
},
hi: function () {
alert("你好吗?");
},
},
});
</script>
v-show指令
- 作用: v-show指令, 根据真假值,切换元素的显示状态
- 原理使修改元素的
display属性
<body>
<div id="app">
<input type="button" value="切换状态" @click="changeShow" />
<img v-show="isShow" src="./img/car.gif" />
<img v-show="age > 18" src="./img/car.gif" />
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
isShow: true,
age: 19,
},
methods: {
changeShow: function () {
//触发方法, 对isShow进行取反
this.isShow = !this.isShow;
},
},
});
</script>
v-if属性
- 作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )
- 和v-show不同的是v-show更改的是元素的display属性，而v-if修改dom元素本身（删除或添加）
- 频繁显示和隐藏使用v-show，反之用v-if
<body>
<div id="app">
<input type="button" value="切换状态" @click="changeShow" />
<img v-if="isShow" src="img/car.gif" />
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
isShow: false,
},
methods: {
changeShow: function () {
this.isShow = !this.isShow;
},
},
});
</script>
v-bind指令
- 可以设置元素的属性
- 语法格式
v-bind:属性名=表达式 - 省略写法
:属性名=表达式
<body>
<div id="app">
<img src="img/lagou.jpg" alt="" />
<!-- 使用 v-bind 设置src属性 -->
<img v-bind:src="imgSrc" />
<!-- v-bind 可以简写为 : -->
<img v-bind:src="imgSrc" :title="imgTitle" />
<!-- 设置class -->
<div :style="{ fontSize: size color:color}">v-bind指令</div>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
imgSrc: "img/lagou.jpg",
imgTitle: "拉钩教育",
size: "50px",
color:"red",
},
});
</script>
v-for指令
- 遍历数据 生成列表结构
- 语法格式:
(item,index) in 数据 - 数组的长度变换会响应式的更新到页面上
<body>
<div id="app">
<input type="button" value="添加数据" @click="add" />
<input type="button" value="移除数据" @click="remove" />
<ul>
<!-- 在li标签中 获取数组的元素 -->
<li v-for="(item,index) in arr">
{
{
index+1}}城市: {
{
item}}
</li>
</ul>
<!-- 使用h2标签显示
-->
<h2 v-for="p in persons">
{
{
p.name}}
</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
//数组
arr: ["上海", "北京", "广东", "深圳"],
//对象数组
persons: [
{
name: "尼古拉斯·赵四" },
{
name: "莱昂纳多·小沈阳" },
{
name: "多利安·刘能" },
],
},
methods: {
add: function () {
//向数组添加元素 push
this.persons.push({
name: "小斌" });
},
remove: function () {
//移除数据
this.persons.shift();
},
},
});
</script>
MVVM模式
- MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式
- MVVM模式将页面,分层了 M 、V、和VM ,解释为：
- Model: 负责数据存储
- View: 负责页面展示
- View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
DOM Listeners和Data Bindings是实现数据双向绑定的关键所在- 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
- 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素
MVVM的思想
- 为了开发更加的方便，提供数据的双向绑定
<body>
<div id="app">
<!-- View部分 -->
<h2>{
{
name}}</h2>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
//创建的Vue实例 ViewModel部分
var VM = new Vue({
el:"#app",
// model部分
data:{
name:"hello",
}
})
</script>
v-model指令
- 获取和设置表单元素的值(实现双向数据绑定)
- 双向数据绑定
- 单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
- 双向绑定: 用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定
<body>
<div id="app">
<input type="button" value="修改message" @click="update" />
<!-- view视图 -->
<!-- <input type="text" v-bind:value="message" /> -->
<!-- v-model实现双向数据绑定 -->
<input type="text" v-model="message" />
<input type="text" v-model="message" />
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
// VM
var VM = new Vue({
el: "#app",
// Model 数据存储
data: {
message: "皮皮潇",
},
methods: {
update() {
this.message = "潇哥哥";
},
},
});
</script>
axios
- VUE中结合网络数据进行应用的开发
- 是目前十分流行的网络请求库，其内部还是Ajax，封装后更为方便
axios的作用
- 在浏览器中可以帮助我们完成 ajax异步请求的发送.
axios使用步骤
- 导入包
//本地
<script src="./js/axios.min.js"></script>
//在线地址
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- 确定请求方式：GET和POST
- Get方式
axios.get(地址?key=value&key2=value2).then(function(response){
},function(error) {
});
- Post方式
axios.post(地址,{
key:value,key2:value2}).then(function(response) {
},function(error){
})
- 根据接口文档，访问测试接口
- 代码示例
<body>
<input type="button" value="get请求" id="get" />
<input type="button" value="post请求" id="post" />
</body>
<script src="./js/axios.min.js"></script>
<script>
/*
随机笑话接口测试
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.getElementById("get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
function (resp) {
//调用成功
console.log(resp);
},
function (err) {
//调用失败
console.log(err);
}
);
};
/*
用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username:"用户民"
响应内容:注册成功或失败
*/
document.getElementById("post").onclick = function () {
axios
.post("https://autumnfish.cn/api/user/reg", {
username: "张abc" })
.then(
function (resp) {
console.log(resp);
},
function (error) {
console.log(error);
}
);
};
</script>
computed计算属性
什么是计算属性
- 在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读
- 比如下面的代码：
<div>
写在双括号中的表达式太长了,不利于阅读
{
{text.split(',').reverse().join(',')}}
</div>.
将这段操作text.split(',').reverse().join(',') 放到计算属性中,最终返回一个结果值就可以
computed的作用
- 减少运算次数, 缓存运算结果. 运用于重复相同的计算
<body>
<div id="app">
<!-- <h1>{
{
a*b}}</h1>
<h1>{
{
a*b}}</h1> -->
<!--
<h1>{
{
res()}}</h1>
<h1>{
{
res()}}</h1> -->
<h1>{
{
res2}}</h1>
<h1>{
{
res2}}</h1>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
a: 10,
b: 20,
},
methods: {
res: function () {
console.log("res方法执行了! !"); //调用两次执行两次
return this.a + this.b;
},
},
//使用计算属性 进行优化,减少运算次数,用于重复的运算
computed: {
res2: function () {
console.log("res2方法执行了! !"); //调用多次执行一次
return this.a + this.b;
},
},
});
</script>
过滤器
什么是过滤器
- 过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
过滤器使用的位置
- 双括号插值内
{
{ msg | filterA }}
msg是需要处理的数据
filterA是过滤器
| 这个竖线是管道
- v-bind绑定值的地方
<h1 v-bind:id=" msg | filterA"> {
{ msg }} </h1>
局部过滤器
需求: 通过过滤器给电脑价格前面 添加一个符号¥
<body>
<div id="app">
<!-- 使用插值表达式,调用过滤器 -->
<p>电脑价格: {
{
price | addIcon}}</p>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
//局部过滤器 在vue实例的内部创建filter
var VM = new Vue({
el: "#app", //挂载点
data: {
//model
price: 200,
},
methods: {
//方法
},
computed: {
//计算属性
},
//局部过滤器
filters: {
//定义处理函数 value = price
addIcon(value) {
return "$" + value;
},
},
});
</script>
全局过滤器
- 必须创建Vue实例之前创建
将用户名开头字母大写
<body>
<div id="app">
<p>{
{
user.name | changeName}}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
//创建Vue之前创建全局过滤器
Vue.filter("changeName", function (value) {
//将姓名的开头字母大写
return value.charAt(0).toUpperCase() + value.slice(1);
});
var VM = new Vue({
el: "#app",
data: {
user: {
name: "liuxiao" },
},
});
</script>
Watch侦听器
什么是侦听器
- Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。
侦听器作用
- 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性
<body>
<div id="app">
<h2>计数器：{
{
count}}</h2>
<input type="button" @click="count++" value="点我+1" />
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
count: 1,
},
watch: {
//检测属性的值的变化
count: function (nval, oval) {
//参数一 新的值 参数二 原来的值
alert("计数器发生变化：" + oval + "变化为" + nval);
},
},
});
</script>
案例
监听姓名变化 实时显示
<body>
<div id="app">
<label>名:<input type="text" v-model="fristName" /></label>
<label>姓:<input type="text" v-model="lastName" /></label>
{
{
fullNameComputed}}
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
fristName: "",
lastName: "",
fullName: "",
},
//侦听器
watch: {
fristName: function (nval, oval) {
//参数 1.新值,2.旧值
this.fullName = nval + " " + this.lastName;
},
lastName: function (nval, oval) {
this.fullName = this.fristName + " " + nval;
},
},
});
</script>
Componenet组件
什么是组件
- 组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能，将相同的功能进行抽取，封装为组件，这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用
- 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
全局组件
- 语法格式
Vue.component("组件名称", {
template: "html代码", // 组件的HTML结构代码
data(){
//组件数据
return {
}
},
methods: {
// 组件的相关的js方法
方法名(){
// 逻辑代码
}
}
})
- 组件名以小写开头，采用短横线分割命名: 例如 hello-Word
- 组件中的data 必须是一个函数，注意与Vue实例中的data区分
- 在template模板中, 只能有一个根元素
- 代码示例：
<body>
<div id="app">
<!-- 使用组件 -->
<lagou-header></lagou-header>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
//定义全局组件
//组件的命名规则: 一般用短横线进行连接,左边是公司名 右边组件的作用名称
Vue.component("lagou-header", {
template: "<div>HTML <h1 @click='hello'>{
{msg}}</h1> </div>", //template模板中 只能有一个根元素
//组件中的data是一个函数
data() {
return {
msg: "这lagou-header是组件中的数据部分",
};
},
methods: {
hello() {
alert("你好");
},
},
});
var VM = new Vue({
el: "#app",
data: {
},
methods: {
},
});
</script>
局部组件
- 局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。 唯一不同就是：局部组件要写在Vue实例里面。
- 语法格式：
new Vue({
el: "#app",
components: {
组件名: {
// 组件结构
template: "HTML代码",
// data数据
data() {
return { msg:"xxxx" };
},
},
},
});
- 注意：创建局部组件，注意 components，注意末尾有 ‘s’，而全局组件是不用+ ‘s’ 的。这意味着，components 里可以创建多个组件。
<body>
<div id="app">
<web-msg></web-msg>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
//创建局部组件
var VM = new Vue({
el: "#app",
components: {
//组件名
"web-msg": {
template: "<div><h1>{
{msg1}}</h1><h1>{
{msg2}}</h1></div>",
data() {
return {
msg1: "开发中",
msg2: "开发完后",
};
},
},
},
});
</script>
组件和模板分离
- 由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。
<body>
<!-- 使用组件 -->
<div id="app">
<web-msg></web-msg>
</div>
<!-- 将模板写在HTML中 -->
<template id="t1">
<div>
<button @click="show">{
{
msg}}</button>
</div>
</template>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
components: {
"web-msg": {
template: "#t1",
data() {
return {
msg: "点击查询",
};
},
methods: {
show() {
alert("我是按钮");
},
},
},
},
});
</script>
- 浏览器会把 html 里的 template 标签过滤掉。所以 template 标签的内容是不会在页面中展示的。直到它被 JS 中的 Vue 调用。
- 在 html 中，template 标签一定要有一个 id，因为通过 id 是最直接被选中的。 data 和 methods等参数，全部都要放到 Vue 实例里面写
Vue生命周期
钩子函数介绍
- 钩子函数：钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作
| 函数名 | 功能 |
|---|---|
| beforeCreate() | 在创建Vue实例之前,可以执行这个方法. 例如 加载动画操作 |
| created() | 实例创建完成,属性绑定好了,但是DOM还没有生成. |
| beforeMount() | 模板已经在内存中编辑完成了，尚未被渲染到页面中 |
| beforeUpdate() | 数据更新的前一刻 , 组件在发生更新之前,调用的函数 |
| updated() | updated执行时，内存中的数据已更新，并且页面已经被渲染 |
| beforeDestroy () | 钩子函数在实例销毁之前调用 |
| destroyed () | 钩子函数在Vue 实例销毁后调用 |
<body>
<div id="app">
<h2 id="msg">{
{
message}}</h2>
<button @click="next">获取下一句</button>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
message: "巴巴拉拉",
},
methods: {
show() {
alert("show方法执行");
},
next() {
this.message = "拉拉巴巴";
},
},
beforeCreate() {
alert("1.beforeCreate函数在Vue对象实例化之前执行");
console.log(this.message); //undefined
this.show; //this.show is not a function
},
created() {
alert("2.created执行的时候，组件实例化完成，Dom页面还没有生成");
console.log(this.message);
this.show();
},
beforeMount() {
alert(
"3.beforeMount函数执行时，模板已经在内存中编辑完成了，但是还没有被渲染到页面中"
);
console.log("页面中的数据" + document.getElementById("msg").innerHTML);
console.log(this.message);
},
mounted() {
alert("4.mounted函数执行时,模板已经被渲染到页面,执行完就会显示页面");
console.log(
"页面显示的内容" + document.getElementById("msg").innerText
);
},
beforeUpdate() {
alert("5.beforeUpdate执行时,内存中的数据已经更新,但是还没有渲染到页面");
console.log(
"页面显示的内容" + document.getElementById("msg").innerText
);
console.log("data中的数据: " + this.message);
},
updated() {
alert("6.updated执行时,内存中的数据已经更新,此方法执行完显示页面");
console.log(
"页面显示的内容" + document.getElementById("msg").innerText
);
console.log("data中的数据: " + this.message);
},
});
</script>
Vue路由
什么是路由
- 在Web开发中，路由是指根据URL分配到对应的处理程序。 路由允许我们通过不同的 URL 访问不同的内容。
- 通过 Vue.js 可以实现多视图单页面web应用（single page web application，SPA）
什么是SPA
- 单页面Web应用（
single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 - 单页应用不存在页面跳转，它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概念下转变为了 body 内某些元素的替换和更新
SPA的好处
- 用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作
- 适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。
路由相关的概念
router：是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易如反掌 ,router 就相当于一个管理者，它来管理路由。route： ruter相当于路由器, route就相当于一条路由.比如: Home按钮 => home内容， 这是一条route, news按钮 => news内容， 这是另一条路由。routes：是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， {about按钮 => about 内容}]route-link组件：router-link 是一个组件，是对标签的一个封装. 该组件用于设置一个导航链接，切换不同 HTML内容。 to 属性为目标地址， 即要显示的内容route-view组件：路由导航到指定组件后,进行渲染显示页面
使用路由
- Vue.js 路由需要载入 vue-router 库
//方式1: 本地导入
<script src="vue-router.min.js"></script>
//方式2: CDN
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
- 使用步骤
-
定义路由所需的组件
-
定义路由 每个路由都由两部分 path (路径) 和component (组件)
-
创建router路由器实例 ,管理路由
-
创建Vue实例, 注入路由对象, 使用$mount() 指定挂载点
-
Vue 的
$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等）， 之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同 -
代码示例：
<body>
<div id="app">
<h1>渣浪.com</h1>
<p>
<!-- 添加超链接, router-link 组件来进行导航, to属性指定链接 -->
<router-link to="/home">go to home</router-link>
<router-link to="/news">go to news</router-link>
</p>
<!-- 路由的出口, 路由匹配到组件之后,要渲染到这里 -->
<router-view></router-view>
</div>
</body>
<!-- 导入vue 与 router库 -->
<script src="./js/vue.min.js"></script>
<script src="./js/vue-router.min.js"></script>
<script>
//1.定义路由所需的组件
const home = {
template: "<div>首页</div>" };
const news = {
template: "<div>新闻</div>" };
//2.定义路由 每个路由有两部分 path(路径),component(组件)
const routes = [
{
path: "/home", component: home },
{
path: "/news", component: news },
];
//3.创建路由管理器实例
const router = new VueRouter({
routes: routes,
});
//4.创建Vue实例 ,将router注入到 vue实例中,让整个应用都拥有路由的功能
var VM = new Vue({
router,
}).$mount("#app"); //代替el
</script>