JavaEE学习笔记 2024-1-25 --VUE的入门使用
« 上一篇
个人整理非商业用途，欢迎探讨与指正！！
文章目录
-
- 14.VUE基础
-
- 14.1VUE的入门使用
- 14.2条件判断
- 14.3循环渲染
- 14.4v-bind绑定标签属性
- 14.5v-model表单标签的双向绑定
- 14.6事件处理
- 14.7axios
14.VUE基础
前端框架
UI框架:页面渲染
Bootstrap,Layui...
JS框架:数据渲染
JQuery,React,angular,node.js,vue...
14.1VUE的入门使用
引入方式:
1.引入vue文件
2.使用脚手架
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
{{hello}}
{{emp}}---{{emp.employeeid}}--{{emp.age}}
div>
<script src="js/vue.js">script>
<script>
// 创建vue对象
let vue = new Vue({
// 将vue绑定在指定的盒子上
el:'#app',
// 使用vue绑定的数据
data:{
// 以键值对的形式存在
hello:"hello vue",
emp:{
"employeeid":1,
"employeename":"tom",
"age":19
}
}
});
script>
body>
html>
14.2条件判断
<body>
<div id="app">
<span v-if="gender == 0">男span>
<span v-else>女span>
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#app",
data:{
gender:0
}
});
script>
body>
14.3循环渲染
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
{{list}} <br>
{{list[0]}} <br>
{{list[1]}} <br>
{{list[2]}} <br>
<h2>信息h2>
<ul>
<li v-for="(u,i) in list">
{{u}}--{{i}}--{{u.name}}--{{u.age}}
li>
ul>
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#app",
data:{
list:[
{
"id":1,
"name":"zs",
"age":19
},
{
"id":2,
"name":"ls",
"age":19
},
{
"id":3,
"name":"ww",
"age":19
},
]
}
});
script>
body>
html>
14.4v-bind绑定标签属性
v-bind:属性 简写为:属性
<body>
<div id="app">
<input type="text" v-bind:value="hello">
<input type="text" :value="str">
<img v-bind:src="img" alt="">
<img :src="img" alt="">
div>
<script src="js/vue.js">script>
<script>
// 创建vue对象
let vue = new Vue({
// 将vue绑定在指定的盒子上
el:'#app',
// 使用vue绑定的数据
data:{
// 以键值对的形式存在
hello:"hello vue",
str:"你好",
img:"img/3.jpg"
}
});
script>
body>
14.5v-model表单标签的双向绑定
全写v-model:value
<body>
<div id="app">
{{str}} <br>
<input type="text" v-model:value="str"><br>
<input type="text" v-model="str"><br>
<input type="text" :value="str"><br>
div>
<script src="js/vue.js">script>
<script>
// 创建vue对象
let vue = new Vue({
// 将vue绑定在指定的盒子上
el:'#app',
// 使用vue绑定的数据
data:{
str:"大佐和大佑123"
}
});
script>
body>
14.6事件处理
v-on:事件
简写为
@事件
<body>
<div id="app">
<input type="button" value="添加" v-on:click="insert">
<input type="button" value="添加" v-on:click="insert()">
<input type="button" value="删除" @click="del">
<input type="button" value="修改" @click="update(1,2)">
<input type="text" @blur="check">
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
// 定义方法
insert:function(){
alert('添加');
},
// es6写法
del(){
alert('删除');
},
update(a,b){
alert(a+b);
},
check(){
alert("用户名不可用")
}
}
});
script>
body>
14.7axios
帮助VUE进行通讯的
VUE本身是不能通讯的,通常需要配合axios进行通讯(封装好的ajax)
get
axios.get(url).then(fn)
axios.get(url,{参数}).then(fn)
post:目前不建议使用,post请求会将参数以json的形式发送,目前的技术手段处理起来很麻烦
axios.get(url,{参数}).then(fn)