Vue的基本语法使用
Posted SmallCuteMonkey
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的基本语法使用相关的知识,希望对你有一定的参考价值。
现在项目的趋势,前后端进行分离,一般使用Springboot进行后端的编写,然后使用Vue(前端的框架进行前端页面的编写)
前端的软件:VsCode 需要下载Node.js 和Live Server进行端口号不同的跨域(需要在SpringBoot项目中Controller层中加上@CrossOringinI注解进行)问题的访问 然后通过Springboot中的application.yml进行设置端口号和相关的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue语法练习</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
姓名: {{name}}<br>
<!-- 可以进行相向的绑定 -->
姓名:<input v-model="name"/><br>
性别:<input v-text="sex"/><br>
<!-- 可以进行html的解析显示 -->
标题:<font v-html="title"> </font><br>
num:<input v-model="num"/>
num1:<input v-model="num1"/>
num2:<input v-model="num2"/>
<!-- @click进行按钮的绑定add() -->
求和1:<input type="button" value="求和" @click="add()"/>
{{details()}}
求和2:{{add()}}
<br>
Person:姓名:{{person.name}} 性别:{{person.sex}} 爱好:{{person.habite}}
<br>
请输入姓名:<input v-model="person.name"/>
证输入爱好:<input v-model="person.habite"/>
请输入性别:
<select v-model="person.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<input type="button" @click=""/>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
name:'张三',
sex:'男',
title:'<h1>First to use Vue </h1>',
num:0,
num1:0,
num2:0,
person:{
name:'丁雪',
sex:'男',
habite:'Playing basketball'
}
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术,更是梦想!";
},
add:function(){
return parseInt(this.num1) +parseInt(this.num2);
}
}
})
</script>
</body>
</html>
列表取值的实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>地址</td>
</tr>
<tr v-for="s in list">
<td>{{s.id}}</td>
<td>{{s.name}}</td>
<td>{{s.address}}</td>
</tr>
</table>
<font v-if="num1>num2">
num1比num2大
</font>
{{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()}}
{{getBirthday}}
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
list:[],
num1:23,
num2:35,
birthday:1529032123201 // 毫秒值
},
methods:{
getList:function(){
var list=[
{id:1,name:"张三",address:"北京"},
{id:2,name:"李四",address:"上海"},
{id:3,name:"王五",address:"杭州"},
{id:4,name:"赵柳",address:"广州"}
];
this.list=list;
}
},
computed: {
getBirthday: function(){
return new Date(this.birthday).getFullYear() + '-'+ new Date(this.birthday).getMonth()+ '-' + new Date(this.birthday).getDay()
}
},
created:function(){
this.getList();
console.log(this.list);
}
})
</script>
</html>
添加页面add.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>添加学生</h1>
<table>
<tr>
<td>学生姓名</td>
<td><input v-model="stu.stuName"/></td>
</tr>
<tr>
<td>生日</td>
<td><input type="date" v-model="stu.birthday"/></td>
</tr>
<tr>
<td>地址</td>
<td><input v-model="stu.address"/></td>
</tr>
<tr>
<td>头像</td>
<td><input v-model="stu.photo"/></td>
</tr>
<tr>
<td><input type="button" @click="fanhui" value="返回"/></td>
<td>
<input type="button" @click="chongzhi" value="重置"/>
<input type="button" @click="save" value="保存"/>
</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/moment-with-locales.js"></script>
<script>
new Vue({
el: "#app",
data:
{
stu: {
id: 0,
stuName: "",
birthday: moment(new Date()).format("yyyy-MM-DD"),
address:"",
photo:""
}
},
methods: {
fanhui:function(){
location="stulist.html";
},
chongzhi:function(){
location="add.html";
},
//保存方法
save: function(){
axios.post("http://127.0.0.1:8989",this.stu).then(
resp=>{
console.log(resp);
if(resp.data){
alert("添加成功");
location="stulist.html";
}else{
alert("添加失败");
}
}
);
}
}
})
</script>
</html>
更新页面和后台的数据 进行交互 update.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>修改学生</h1>
<!-- 用v-model进行绑定然后进行修改 -->
<table>
<tr>
<td>学生编号</td>
<td><input v-model="stu.sid" readonly/></td>
</tr>
<tr>
<td>学生姓名</td>
<td><input v-model="stu.sname"/></td>
</tr>
<tr>
<td>生日</td>
<td><input type="date" v-model="stu.birthday"/></td>
</tr>
<tr>
<td>地址</td>
<td><input v-model="stu.address"/></td>
</tr>
<tr>
<td>头像</td>
<td><input v-model="stu.photo"/>VSCode自定义代码片段——.vue文件的模板