目录
前言
第一个完整的Vue程序
el:挂载点 和 data:数据对象
v-text指令
v-html指令
v-on指令
v-show指令
v-if指令
v-bind指令
v-for指令
v-on指令补充
v-model指令:
axios网络请求库
axios应用于vue的注意事项
前言
Vue框架数据交互的本质是:dom元素的定位与Vue对象内部el的关联,页面的变量与Vue对象内部data的交互,页面dom的js函数与Vue内部methods的关联
第一个完整的Vue程序
<!DOCTYPE heml>
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue基础</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue"
}
})
</script>
</body>
</html>
注意:必须进行开发环境版本的声明
el:挂载点 和 data:数据对象
el:挂载点是干什么的?就是声明new的Vue实例对象所管理的数据data在HTML页面中的哪一个dom,#代表id属性
data:数据对象,个人理解HTML中使用插值表达式{{变量名}},在Vue对象中,就是为变量赋值,然后值就渲染到页面了,可以通过 this在Vue对象的methods中访问到Vue对象中的data数据
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue"
}
})
</script>
可运行示例代码:
<!DOCTYPE heml>
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>data数据对象</title>
</head>
<body>
<div id="app"> <!--div是文本组件-->
{{ message }} <!--获取普通数据对象-->
<h2> {{ school }} </h2> <!--h2属于标题标签,获取school对象-->
<h2> {{ school.name }} {{ school.mobile }}</h2> <!--获取school对象中的某个属性-->
<ul> <!--ul标签属于无序列表标签,与li标签搭配使用,可以将多个li标签内容打印成一个列表-->
<li> {{ campus }} </li>
</ul>
<ul> <!--ul标签属于无序列表标签,与li标签搭配使用,可以将多个li标签内容打印成一个列表-->
<li> {{ campus[0] }} </li>
<li> {{ campus[1] }} </li>
<li> {{ campus[2] }} </li>
</ul>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app", //el是选择挂载元素点
data:{ //data是挂载元素点所需要渲染的内容
//不同属性之间需要用逗号隔开
message:"你好 小黑!", //普通数据类型
school:{ //对象类型,可以理解为结构体
name:"黑马程序员",
mobile:"15538779937"
},
campus:["北京校区","上海校区","深圳校区"] //数组类型
}
})
</script>
</body>
</html>
v-text指令
v-text指令完成的任务就是将data中值,赋给html页面中挂载点所在的dom元素,有两种表现形式见下
<div id="app">
<h2 v-text=" message+'!' "></h2> <!--形式1:data中变量的值会完全替换整个标签,不管原本存在什么-->
<h2>深圳{{message + "!"}}</h2> <!--形式2:只会用变量值替换差值表达式,不会影响其他原来设定的值-->
</div>
var app = new Vue({
el:#app,
data:{
message:"黑马程序员"
}
})
可运行示例代码:
<!DOCTYPE heml>
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-text指令</title>
</head>
<body>
<div id="app">
<h2 v-text=" message +'!!!!!' ">这几个字不会显示</h2> <!--空格没有影响-->
<h2>{{ message + "!!!!!" }}这几个字会显示</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"v-text指令"
}
})
</script>
</body>
</html>
v-html指令
v-html起作用,是在声明变量值是html语句,比如下述的例子,p标签的内容被解析成为一个a标签
<div id="app">
<p v-html="content"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.itheima.com'>黑马程序员</a>"
}
})
</script>
可运行示例代码:
<!DOCTYPE heml>
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-html标签</title>
</head>
<body>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.itheima.com'>黑马程序员</a>"
}
})
</script>
</body>
</html>
v-on指令
v-on指令,是为了给dom元素绑定对应的逻辑实践,下述例子是为button按钮绑定一个点击事件,有两种变现形式,效果相同
其中click是固定写法,代表点击事件,doIt为自定义函数名称
<div id="app">
<input type="button" value="按钮事件" v-on:click="doIt"><!--表现形式1-->
<input type="button" value="按钮事件" @click="doIt"><!--表现形式2-->
</div>
var app = new Vue({
el:#app,
methods:{
doIt:function(){
//函数的实现逻辑
}
}
})
可运行示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>V-on指令基础</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<h2 @click="changeFood">{{ food }}</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
food: "西蓝花"
},
methods:{
doIt:function(){
alert("做这个");
},
changeFood:function(){
this.food += "很好吃";
}
}
})
</script>
</body>
</html>
v-show指令
v-show指令可根据表达式的真假,切换元素的显示和隐藏
<div id="app">
<img src="地址" v-show="true">
<img src="地址" v-show="isShow">
<img src="地址" v-show="age>=18">
</div>
var app = new Vue({
el:#app,
data:{
isShow:false,
age:16
}
})
可运行示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>v-show指令</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="累加年龄" @click="addAge">
<img v-show="isShow" src="./img/monkey.gif" alt="">
<img v-show="age>=18" src="./img/monkey.gif" alt="">
</div>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:17
},
methods: {
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
},
})
</script>
</body>
</html>
v-if指令
根据表达式的真假,切换和隐藏dom元素
<div id="app">
<p v-if="true">我是一个p标签</p>
<p v-if="isShow">我是一个p标签</p>
<p v-if="表达式">我是一个p标签</p>
</div>
var app = new Vue({
el:#app,
data:{
isShow:false
}
})
可运行示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-if指令</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">黑马程序员</p>
<p v-show="isShow">黑马程序员 - v-show修饰</p>
<h2 v-if="temperature>=35">热死啦</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
temperature:20
},
methods: {
toggleIsShow:function(){
this.isShow = !this.isShow;
}
},
})
</script>
</body>
</html>
v-bind指令
用于dom元素属性值的动态设置,有两种表现形式,见下
<div id="app">
<!--形式1-->
<img v-bind:src="imgSrc">
<img v-bind:title="imgtitle">
<img v-bind:class="{ isActive?'active':'' }"> <!--如果isActive的属性为真,class属性的值为active中的值,否则为空:''-->
<img v-binde:class="{ active:isActive }"> <!--效果与上句相同-->
<!--形式2-->
<img :src="imgSrc">
<img :title="imgSrc">
<img :class="imgSrc">
</div>
var app = new Vue({
el:#app,
data:{
imgSrc:"图片地址",
imgTitle:"黑马程序员",
isActive:false
}
})
可运行示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind指令</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
imgTitle:"黑马程序员",
isActive:false
},
methods: {
toggleActive:function(){
this.isActive = !this.isActive;
}
},
})
</script>
</body>
</html>
v-for指令
用于根据数据生成dom列表结构,可以理解为是数组方式生成dom元素
<div id="app">
<ul>
<li v-for="(item, index) in arr" :title="item"> <!--item是基本的数据类型-->
{{ index }} {{ item }}
</li>
<li v-for="(item, index) in objArr"> <!--item是诸如字典的复杂数据类型-->
{{ item.name }}
</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"Jack"},
{name:"Rose"}
]
}
})
可运行示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for指令</title>
</head>
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(it,index) in arr">
{{ index+1 }}黑马程序员校区:{{ it }}
</li>
</ul>
<h2 v-for="item in vegetables" v-bind:title="item.name">
{{ item.name }}
</h2>
</div>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"西兰花炒蛋"},
{name:"蛋炒西蓝花"}
]
},
methods: {
add:function(){
this.vegetables.push({ name:"花菜炒蛋" });
},
remove:function(){
this.vegetables.shift();
}
},
})
</script>
</body>
</html>
v-on指令补充
v-on所规定的函数是可以进行自定义参数,并且v-on绑定的事件是通过事件修饰符指定,比如回车事件
各种事件的表达方式:https://cn.vuejs.org/v2/api/#v-on
<div id="app">
<input type="button" @click="doIt(p1,p2)"> <!--绑定点击事件-->>
<input type="text" @keyup.enter="sayHei"> <!--绑定回车事件-->
</div>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1, p2){
},
sayHi:function(){
}
}
})
可运行示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-on补充</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" v-on:click="doIt(p1, p2, '哈哈哈', 180)"> <!--带参数的方法-->
<input type="text" @keyup.enter="sayHi"> <!--不带参数的方法-->>
</div>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
p1:"老铁",
p2:"666"
},
methods: {
doIt:function(p1, p2, p3, p4){
console.log(p1 + p2 + p3 + p4);
console.log(p1);
console.log(p2);
console.log(p3);
console.log(p4);
},
sayHi:function(){
alert("吃了没");
}
},
})
</script>
</body>
</html>
v-model指令:
v-model指令可以实现双向数据绑定,通俗点的说,就是当页面dom元素的值发生改变,那么对应data中的数据也会发生改变,反之亦然
<div id="app">
<input type="text" v-model="message">
</div>
var app = new Vue({
el:"#app",
data:{
message:"黑马程序员"
}
})
<h1></h1>
可运行示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model指令</title>
</head>
<body>
<div id="app">
<input type="button" value="修改message" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM"> <!--前端数据影响后端数据-->
<h2>{{ message }}</h2> <!--后端数据影响前端数据-->
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"黑马程序员"
},
methods: {
getM:function(){
alert(this.message);
},
setM:function(){
this.message ="酷丁鱼";
}
},
})
</script>
</body>
</html>
axios网络请求库
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
/*
当后端有请求params的情况,即:currentPage={当前页号}&pageSize={页面大小}
axios的写法如下
*/
axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
axios.get(地址,{
params:{
key1:value1,
key2:value2
}
}).then(function(response){},function(err){})
axios.post(地址?key1=value1&key2=value2).then(function(response){},function(err){})
axios.post(地址,{
params:{
key1:value1,
key2:value2
}
}).then(function(response){},function(err){})
/*
当后端没有请求params的情况,即request内部只有一个body,例如
{
"planAbstract": {
"innerId": 1603960398793,
"outerId": null,
"planName": "观测计划2",
"createUser": null,
"startTime": null,
"planDays": null,
},
"planDetails": [
{
"satelliteId":1,
"detailBand": 0,
"detailPolar": 1,
"sequence": 1
}
]
}
*/
axios的写法为:
var params = {
"planAbstract": {
"innerId": 1603960398793,
"outerId": null,
"planName": "观测计划2",
"createUser": null,
"startTime": null,
"planDays": null,
},
"planDetails": [
{
"satelliteId":1,
"detailBand": 0,
"detailPolar": 1,
"sequence": 1
}
]
}
axios.post(地址,params).then(function(response){},function(err){})
- axios必须先导入才可以使用
- 使用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取相应的内容,或者错误信息
可运行示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>axios基本使用</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
// axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
.then(function (response) {
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
.then(function(response){
console.log(response);
console.log(this.skill);
},function (err) {
console.log(err);
})
}
</script>
</body>
</html>
axios应用于vue的注意事项
- axios回调函数中的this已经改变,无法通过this访问到data当中的数据
- 解决:将this保存起来,回调函数中直接保存的this即可
可运行示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios+vue</title>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p> {{ joke }}</p>
</div>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods: {
getJoke:function(){
// console.log(this.joke);
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function(response){
// console.log(response)
console.log(response.data);
// console.log(this.joke);
that.joke = response.data;
},function (err) { })
}
},
})
</script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)