Vue快速入门-个人笔记
程序员文章站
2022-06-06 19:13:49
...
Vue实战
1 Vue入门
下载Vue.js
//开发版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue第一个入门应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue第一个入门案例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "app">
{{msg}} {{username}}
<br>
<span>
{{username}}
<h1>{{msg}}</h1>
</span>
</div>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue定义一个作用范围
data: {
msg: "欢迎你！！",
username:"Hello!",
}, //用来给Vue实例定义一些相关数据
});
</script>
</body>
</html>
# 总结：
1.Vue实例中的el属性，代表Vue作用范围，日后在Vue的范围内都可以使用Vue语法！
2.Vue实例中的data属性，代表给Vue实例绑定一些数据，绑定的数据可以通过{{变量名}}的形式取出来！
3.在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式，运算符，调用响应的方法以及逻辑运算！
4.el属性汇总可以书写任意的css选择器【jquery选择器】，但在Vue开发中推荐使用id选择器！！
data中复杂对象的取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue第一个入门案例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "app">
<h3> {{msg}} </h3>
<h4> {{user.name}}</h4>
<h3> {{list[0]}} </h3>
<h4>{{duixiang_list[0].name}}</h4>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"hello vue",
user:{name:"汤米",msg:"欢迎你！"},
age:23,
list:["henan","beijing"],
duixiang_list:[{name:"小黑",age:23},{name:"小红",age:24}]
},
});
</script>
</body>
</html>
1.1 v-text
v-text用来获取data中的数据，把数据以文本形式渲染到指定标签内部，类似于js中的innertext
<div id = "app">
<span>{{msg}}</span>
<span v-text="msg"></span>
</div>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue定义一个作用范围
data: {
msg: "欢迎你",
username:"Hello!",
}, //用来给Vue实例定义一些相关数据
});
</script>
# 总结：
1.{{}}插值表达式和v-text获取数据的差别在于
a.使用v-text会把标签中原有的数据覆盖，使用插值表达式的形式不会覆盖标签原有数据
b.使用v-text可以避免在网络环境较差的时候出现插值闪烁
1.2 v-html
v-html用来获取data中的数据将数据中含有html标签先解析在渲染到指定标签的内部，类似于js中的innerHTML
<div id = "app" class="aa">
<span>{{alink}}</span>lalala
<br>
<span v-html="alink">lalala</span>
</div>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue定义一个作用范围
data: {
msg: "欢迎你",
username:"Hello!",
alink:"<a href = ''>欢迎来到百度！</a>"
}, //用来给Vue实例定义一些相关数据
});
</script>
1.3 v-on事件绑定
- 在Vue中绑定事件是通过v-on完成的，v-on:事件名 如v-on:click(change)
- v-on:事件名的赋值语句是当前时间触发调用的函数名
- 在Vue中事件的函数定义到methods:{}中
- 在vue中定义的事件中this值得就是当前的实例，日后可以再事件中通过使用this获取vue实例中相关数据
<body>
<!--
点击按钮，年龄+1
1.页面提供按钮
2.按钮绑定事件 onclick onmouseover onmove onkeyup
3.在单击中，更新值
-->
<div id = "app">
<h2 v-text="message"></h2>
<h2>年龄：{{age}}</h2>
<br>
<input type="button" value="点我改变年龄" v-on:click="changeage">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello,欢迎来到NGA阴阳师！",
age:23,
},
methods:{
changeage:function(){
alert('单击触发')
}
}
});
</script>
Vue事件的简化语法
# v-on:click = "xxxx"
# @click = "xxxx"
<div id = "app">
<h2>{{age}}</h2>
<input type = "button" value = "通过v-on修改年龄" v-on:click="changeage">
<input type = "button" value = "通过@绑定事件修改年龄-1" @click = "editage">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //用来指定vue作用范围
data:{
age:23,
},
methods:{
changeage:function(){
this.age++;
},
editage:function () {
this.age--;
}
}
});
</script>
Vue事件的两种写法
<div id ="app">
<span>{{count}}</span>
<input type = "button" value = "改变count的值" @click="changecount">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
// changecount:function(){
// this.count++;
// }
changecount(){
this.count++;
}
},
});
</script>
# 总结：
1. 在Vue中事件定义存在两种写法
一种是 函数名:function(){}
一种是 函数名(){}
Vue中事件参数传递
<div id = "app">
<span>{{count}}</span>
<input type="button" value="改变count为指定的值" @click="changecount(23,'xiaoc')">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
changecount(count,name){
this.count = count;
alert(name);
}
}
})
</script>
# 总结：
1.在使用事件时，可以直接在事件调用给出事件进行参数传递，在事件定义出通过定义对应变量接收传递的参数。
复习案例1 v-text v-html以及事件绑定
<div id = "app">
<!--
v-show:用来控制标签是显示还是隐藏
-->
<!--插值表达式-->
<span>{{msg}}</span><br>
<span>{{age}}</span><br>
<span>{{arr[0]}}</span><br>
<span>{{user}}</span><br>
<!--v-text相当于js innerText，指令里面不需要写插值表达式了-->
<span v-text="msg"></span>
<!--v-html相当于js innerHtml，指令里面不需要写插值表达式了-->
<span v-text="message"></span>
<span v-html="message"></span>
<br>
<!--
事件的三要素 1.事件源 html标签是谁 2.事件：特定动作 单击/双击等等 3.事件处理程序：使用函数完成
Vue中事件的定义
1. v-on 指令 用来给标签绑定时间
2. 事件参数传递
-->
<input type = "button" value="点我触发事件" @click="click"><br>
<input type = "button" value="点击获取事件参数" @click="getnum('20')">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"<a herf='#'>阴阳师官网</a>",
msg:"欢迎来到阴阳师",
age:23,
arr:["北京校区","天津校区","恒安校区"],
user:{name:"橘瑠衣",age:23,content:"很擅长料理！"}
},
methods:{
click(){
alert("按钮已经点击！");
},
getnum(count){
alert(count);
console.log(count);
console.log(this.msg); //拿到Vue实例中的值
},
}
})
</script>
1.4 v-show v-if v-bind
<div id = "app">
<!--
1.v-show 用来控制页面中的标签元素是否显示，底层通过控制元素的display属性是true还是false
-->
<h1 v-show="true">欢迎来到阴阳师！</h1>
<h1 v-show="isShow">欢迎来到阴阳师！</h1> <!--绑定data中的值-->
<input type = "button" value="点我有惊喜！" @click="showhide">
<br>
<!--
2.v-if 用来控制页面中的标签元素是否显示，底层通过对dom树节点进行添加和删除来控制显示和隐藏
-->
<h1 v-if="true">永生之海风云再起</h1>
<br>
<!--
3.v-bind 用来给页面中的标签元素绑定相应的属性
-->
<img width="300px" v-bind:title="title"
v-bind:src="src">
<br>
<input type = "button" value="改变图片的title" @click="changeTitle('铃鹿山之主')">
<br>
<input type = "button" value="点击更换图片" @click="changeSrc('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605973740480&di=f0fea30e1e487019d19302b4f1a9b4e5&imgtype=0&src=http%3A%2F%2Fimg.nga.178.com%2Fattachments%2Fmon_202005%2F12%2FeyQ5-emecZ26T3cSp0-xc.jpg')">
<!--v-bind:属性="" ======> 简易写法 :属性="" -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isShow:true,
title:"铃鹿御前",
src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605973176004&di=a133827cedbe52a3c02e0551ae071a75&imgtype=0&src=http%3A%2F%2Fpic.veryhuo.com%2Fupload%2Farticle%2F20200519%2F243aea99c45690c39e8c78d92fd96667.jpg",
},
methods:{
showhide(){
this.isShow=!this.isShow;
},
changeTitle(title) {
this.title = title;
},
changeSrc(src){
this.src = src;
}
}
})
</script>
1.5 v-for
v-for:作用就是用来对数据或者对象进行遍历的（数组就是对象的一种）
<div id="app">
<span>{{user.name}} {{user.age}}</span>
<!--
通过v-for进行遍历对象
-->
<br>
<!-- u代表整个对象
<span v-for="u in user">
{{u}}
</span>
-->
<span v-for="(value,key,index) in user">{{value}}:{{key}}:{{index}}</span>
<!--
通过v-for进行遍历数组
-->
<ul>
<li v-for="a,index in arr">
{{index}} {{a}}
</li>
</ul>
<!--
通过v-for遍历数组中的对象
v-bind:key 便于vue内部做重用排序
-->
<ul>
<li v-for="user,index in users" v-bind:key="user.id">
{{user.index}} === {{user.name}} === {{user.age}} === {{user.content}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element 用来给Vue定义一个作用范围
data: {
user:{name:"小陈",age:23},
arr:["北京校区", "天津校区", "河南校区"],
users:[
{id:1,name:"xiaochen",age:23,content:"我曾经也是一个单纯的少年。"},
{id:2,name:"xiaoliu",age:27,content:"好想快点买房！"},
]
}, //用来给Vue实例定义一些相关数据
methods: {}
});
</script>
# 总结
在使用v-for的时候一定要加入:key方便vue做重用排序的唯一key
1.6 v-model双向绑定
v-model:作用用来绑定标签元素的值与vue实例对象中data数据保持一致，从而实现双向的数据绑定
什么叫做双向绑定
文本框中数据发生变化，data中的值也发生变化。
data中的值发生变化，文本框中的数据也发生变化。
<div id="app">
<!--v-model把文本框中的数据绑定到Vue实例中-->
<input type = "text" v-model="message">
<br>
<span>{{message}}</span>
<br>
<input type="button" value="改变Data中的值" @click="changeValue">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element 用来给Vue定义一个作用范围
data: {
message:""
}, //用来给Vue实例定义一些相关数据
methods: {
changeValue(){
this.message = "xxxxx";
}
}
});
</script>
# 总结:
1. v-model使用可以实现数据的双向绑定
2. 所谓双向绑定 表单中的数据导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化
# MVVM架构
Model:数据 VUE实例中绑定数据
VM：ViewModel 监听器
View：页面
记事本案例
<div id = "app">
<input type="text" v-model="msg"> <input type="button" value="添加到记事本" @click="save">
<br>
<ul>
<li v-for="item,index in lists">
{{index+1}} {{item}} <a href="javascript:;" @click="delRow(index)">删除</a>
</li>
</ul>
<br>
<span>总数量：{{lists.length}} 条 </span><input type="button" value="删除所有" v-show="lists.length!=0" @click="delAll">
</div>
<!--
1.完成记事本查询所有思路：1）将所有数据绑定为Vue实例 2）遍历Vue实例中数据到页面
2.添加 1) 添加按钮去绑定事件 2）在事件中获取输入框中数据 3）将获取到的数据放入到list里面
3.删除
4.删除所有 总数量
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue定义一个作用范围
data: {
lists:["阴阳师神乐新皮肤上线","sp山风降临平安京"],
msg:"",
}, //用来给Vue实例定义一些相关数据
methods:{
save(){//添加到记事本
console.log(this.msg);
this.lists.push(this.msg); //文本框中的数据push到list里面
this.msg = ''; //清空文本框中的数据
},
delRow(index){//删除一条记录
//根据下标删除数组中的某个元素
this.lists.splice(index,1); //参数1代表删除的下标从哪个下标开始删除 参数2代表删除几个元素
},
delAll(){ //删除所有数据
this.lists = [];
}
}
});
</script>
1.7 事件修饰符
修饰符：用来和事件连用，用来决定事件触发条件或者是阻止事件的触发机制
# 常用的事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
stop事件修饰符
用来阻止事件冒泡
<div id="app">
<div class = "aa" @click="divClick">
<input type = "button" value="按钮" @click.stop="btnClick">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element 用来给Vue定义一个作用范围
data: {}, //用来给Vue实例定义一些相关数据
methods: {
btnClick(){
alert("按钮被点击了")
},
divClick(){
alert("div被点击了")
}
}
});
</script>
prevent事件修饰符
用来阻止标签的默认行为
<a href = "https://www.baidu.com" @click.prevent="aClick">百度</a>
1.8 按键修饰符
作用：用来与键盘按键事件绑定在一起，用来修饰特定的按键事件的修饰符。
# 按键修饰符
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
enter回车
用来触发回车按键之后触发的事件
<div id="app">
<!--enter按键修饰符,在回车之后触发事件-->
<input type="text" v-model="msg" @keyup.enter = "keyups">
<br>
<input type="text" @keyup.delete="keytabs">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element 用来给Vue定义一个作用范围
data: {
msg:"",
}, //用来给Vue实例定义一些相关数据
methods: {
keyups(){
alert("键盘抬起");
alert(this.msg);
},
keytabs(){
alert("删除！");
}
}
});
</script>
2 Axios 异步使用
Axios是一个异步请求技术，核心作用是用来在页面中发异步请求，并获取对应数据在页面中的渲染，跟Ajax相似
2.1 Axios第一个程序
Axios官方网站
安装：
2.1.1 GET方式的请求
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//发送GET方式请求
axios.get("http://localhost:8080/user/findAll").then(function(response){
console.log(response.data)
}).catch(function(err){
console.log(err);
});
const app = new Vue({
el: "#app", //element 用来给Vue定义一个作用范围
data: {}, //用来给Vue实例定义一些相关数据
methods: {}
});
</script>
///输入参数
//发送GET方式请求
axios.get("http://localhost:8080/user/findAll?name=xiaochen").then(function(response){
console.log(response.data)
}).catch(function(err){
console.log(err);
});
2.1.2 POST方式的请求
<script>
axios.post("http://localhost:8080/user/save",{
username:"xiaochen",
age:23,
email:"[email protected]",
phone:15363150846
}).then(function(response){
console.log(response.data);
}).catch(function(err){
console.log(err);
})
const app = new Vue({
el: "#app", //element 用来给Vue定义一个作用范围
data: {}, //用来给Vue实例定义一些相关数据
methods: {}
});
</script>
2.1.3 Axios并发请求
并发请求：将多个请求在同一时刻发送到后端服务接口，最后再集中处理每个请求的响应结果
<script>
//并发请求
//1.创建一个查询所有的请求
function findAll(){
return axios.get("http://localhost:8080/user/findAll?name=xiaochen");
}
//2.创建一个保存的请求
function save(){
return axios.post("http://localhost:8080/user/save",{
username:"xiaochen",
age:23,
email:"[email protected]",
phone:15363150846
});
}
//3.并发执行
axios.all([findAll(),save()]).then(
axios.spread(function(res1,res2){ //用来将一组函数的响应结果汇总处理
console.log(res1.data);
console.log(res2.data);
})
); //用来发送一组请求
const app = new Vue({
el: "#app", //element 用来给Vue定义一个作用范围
data: {}, //用来给Vue实例定义一些相关数据
methods: {}
});
</script>
2.1.4 VUE结合Axios实现天气查询
<div id="app">
<input type="text" v-model="name" @keyup.delete="shows" @keyup.enter="searchCity"/>
<input type="button" value="搜索" @click="searchCity"/><br>
<span v-for="city in hotCitys">
<a href="" @click.prevent="searchCitys(city)">
{{city}}
</a>
</span>
<hr>
<span v-show="isShow">{{name}}，今天的天气是：{{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el: "#app", //element 用来给Vue定义一个作用范围
data: {
name:"",
hotCitys:["北京","上海","深圳","广州","天津"],
message:"",
isShow:false,
}, //用来给Vue实例定义一些相关数据
methods: {
searchCity(){
//获取输入的城市信息
console.log(this.name);
let _this = this; //把外部的this赋值给内部的this
//发送axios请求
axios.get("http://localhost:8080/city/find?name="+this.name).then(function(response){
console.log(response.data.message);
_this.message=response.data.message;
_this.isShow=true;
}).catch(function(err){
console.log(err);
});
},
searchCitys(name){
this.name = name;
this.searchCity();
},
shows(){
this.isShow = false;
}
}
});
</script>
VUE CLI使用
CLI --> 命令行
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用脚手架之后我们开发的将是一个完整的系统（项目）
VUE 优势
- 通过vue-cli交互式项目脚手架，boostrap，css，js，jquery等通过命令行直接安装依赖