java后端需要学习的Vue知识点
【摘要】
文章目录
Vue入门程序Vue常用指令v-text 指令v-html 指令v-on 指令v-show指令v-if 指令v-bind 指令v-for指令v-mode 指令
axios钩子函数
...
文章目录
Vue入门程序
引入Vue.js库
写html页面
写Vue对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第一步：引入vue.js库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<!-- 第二步：写html页面 -->
<div id="app">
{{name}}
</div>
</body>
<script>
// 创建vue对象
var VM = new Vue({
el: '#app',
data:{
name:"lihuikang"
}
});
</script>
</html>
{{}}: 插值表达式：通常用来获取Vue实例中定义的数据(data)
el: 挂载点：定义 Vue实例挂载的元素节点,表示vue接管该区域
data: 数据对象
<script>
// 创建vue对象
var VM = new Vue({
el: '#app',
data:{
name:"lihuikang",
school:{
name:"拉勾教育",
id:"123"
},
names:["小王","小明","小李"]
}
});
</script>
Vue常用指令
v-text 指令
获取data数据, 设置标签的内容.这个标签会覆盖标签内部的所有数据
但是使用{{}}差值表达式就不会覆盖，只会相连。
<h2 v-text="message">百度</h2>
<h2>{{message}}百度</h2>
v-html 指令
可以向元素中写入新的标签
<h2 v-html = "url"></h2>
data:{
name:"lihuikang",
school:{
name:"拉勾教育",
id:"123"
},
names:["小王","小明","小李"],
message:"java程序员",
url: "<a href='https://www.baidu.com'>百度一下</a>"
}
v-on 指令
为元素绑定事件的指令，就比如说给按钮绑定事件等，点击按钮之后就可以跳转到对应的事件。
比如: v-on:click,可以简写为 @click=“方法”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="button" value="点击按钮" v-on:click="alert">
<input type="button" value="点击实现第二种方法" @click="alert2">
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
},
methods:{
alert:function() {
console.log("第一种方法已经实现了");
},
alert2:function() {
console.log("第二种简写方法已经实现了");
}
}
})
</script>
</html>
v-show指令
v-show指令, 根据真假值,切换元素的显示状态
这个指令的属性值是boolean类型的，这个v-show标签可以绑定图片，然后控制图片的显示或者隐藏，当点击按钮时候，触发相应的事件，然后修改data中的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="changeShow">
<img v-show="isShow" src="./a.jpg" width="400px">
<img src="./b.jpg" width="400px">
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
changeShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</html>
v-if 指令
根据表达值的真假,切换元素的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="changeShow">
<img v-if="isShow" src="./a.jpg" width="400px">
<img src="./b.jpg" width="400px">
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
changeShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</html>
频繁切换使用 v-show ,反之使用v-if
v-bind 指令
设置元素的属性 （比如:src,title,class）
完整写法 v-bind:属性名，可以简写为 :属性名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<div id="app">
<!-- 使用v-bind设置src属性值 -->
<img v-bind:src="imgSrc" alt="">
<!-- 简写 设置title -->
<img :src="imgSrc" alt="" :title="imgTitle">
<!-- 设置class -->
<div :style="{ fontSize: size + 'px'}">v-bind指令</div>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
imgSrc:"./a.jpg",
imgTitle:"拉钩教育",
size:100
}
})
</script>
</html>
v-for指令
v-for="(item,i) in list list是在data中的数组，i指的是数组下标，item指的是数组的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="(item,i) in list">--索引值--{{i}} --每一项值--{{item}}</p>
<p v-for="(key,value) in user">{{value}},{{key}}</p>
</div>
</body>
<script>
var VM = new Vue({
el: "#app",
data: {
list: [6, 7, 8, 9, 10],
user: {
id: 1,
name: '托尼.贾',
gender: '男'
}
}
})
</script>
</html>
v-mode 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<!-- 第二步：写html页面 -->
<div id="app">
<input v-model="name">
<h2>{{name}}</h2>
</div>
</body>
<script>
// 创建vue对象
var VM = new Vue({
el: '#app',
data:{
name:"张子怡",
}
});
</script>
</html>
axios
axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
{});
axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})
钩子函数
文章来源: blog.csdn.net，作者：花花叔叔，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/qq_52077949/article/details/123015478
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）