前端Vue框架
封装了HTML，CSS ，JS的代码 按需搭建特点：是一个轻量级的前端框架，双向绑定，数据动态更新是一个渐进式的框架，其核心是数据驱动，组件化前端开发Vue关注的，操作的是数据，第一步：需要将vue.js文件导入到你的工程中并把文件引入到html中第二步：准备解析vue的数据，渲染区 展示的形式必须是 {{xxx}}第三步：给第二步准备数据,需要写在script中，因为vue是基.........
封装了HTML，CSS ，JS的代码 按需搭建
特点 ： 是一个轻量级的前端框架，双向绑定，数据动态更新
是一个渐进式的框架，其核心是数据驱动，组件化前端开发
Vue关注的，操作的是数据，
第一步：需要将vue.js文件导入到你的工程中
并把文件引入到html中
第二步：准备解析vue的数据，渲染区 展示的形式必须是 {{xxx}}
第三步： 给第二步准备数据,需要写在script中，因为vue是基与JS的一个前端框架
创建的Vue对象格式 必须是： new Vue（{xxxxx}）固定格式
new vue（{el:" xxx", date : a}）此为固定步骤。先创建Vue对象。定义挂载点，把数据挂载到指定的位置。data 为准备的数据。
便捷方式：更简洁 将创建的a对象数据直接写在 data中。
演示案例：
测试Vue的基础语法：格式必须严格要求
VUE中的方法在按钮中的使用规范：使用 v-on：click=" "的格式
注意:方法必须写在methods代码段中
方法体中访问数据代码段中声明的变量，前面加this
方法和属性声明方式的差异在于function（）{}
方法和属性调用的差异是{{ c }} {{show()}},名称后加小括号
M 是model 是指数据
V是view 是指视图
VM是viewModel 是指在指定视图里渲染指定数据
---------------------------------------------------------------------------------------------------------
在vue中定义函数及调用：使用数组下标就可以进行得到其中具体的数据
Vue解析数据
定义是属性都是可以进行执行一系列的操作
在vue中使用按钮有两种方法执行：第一种v-on:click="play()"
第二种就是@click=“play()” 更方便
定义数组必须使用[],定义数组中每个下标的数据使用{}，在中扩张使用大{}。每一个大括号代表一个数组中的一个数据。
data的三种写法：
高级用法：v-命令
指令集：
指令是带有 v- 前缀的特殊属性，以表示它们是 Vue 提供的特殊特性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
常见的Vue指令:v-if v-for v-on v-bind v-model v-cloak等
v-model双向绑定：
当数据进行双向绑定后，在同一个操作区域中的同个数据都会被改变。使用的是一个数值。原理java中的静态变量相同，多个对象调用操作是同一个数据
v- cloak 闪现：
遇到插值表达式加载时闪烁对用户不好的现象，那怎么解决呢？
在标签中增加指令，需要写在<style>标签中 并且渲染器中也要进行定义 v-cloak
v-if v-for：
v-if是判断指令 判断数据是否正确，正确则显示，错误则不显示
v-for指令可以绑定数组的数据来渲染一个项目的列表：
通过for得到数组的每个下标的数据
v-on: 绑定指定的数据，在按钮上进行输出
@click为v-on:click的缩写。函数是可以进行简化的，可以直接将function进行简写
例如：show：function（）{}---可以简化成---show（）{}。
V-bind 绑定：
当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理
全称：v-bind：href 后面跟变量名。html中使用a就可以进行定义超链接，在vue中必须进行绑定才行
VUE中的组件：
全局组件：创建方法：Vue.conponent('名字'，{template:"内容"})
名字后面必须是 逗号 不是冒号----------------------
组件的优点：组件可以扩展HTML元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
全局组件可以在任何的渲染区进行使用
局部组件：必须按照严格格式要求进行设定，局部组件只能在当前的渲染区进行使用
局部组件格式：components:{ 组件名字：{ template：“组件内容”}}
组件的内容必须是以根元素（使用标签进行包裹起来）的形式进行输入
组件是可以定义多个的：
VUE中的路由功能：
根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
使用步骤：需要引入JS 路由需要依赖vue 必须按顺序引入
1.创建特定组件
2.创建路由的细则。路由的的细则也必须使用创建变量
3.使用组件：依旧需要写在渲染区中，并且渲染区需要被挂载
点击主页 匹配地址路径 进行跳转到组件中 进行展示。只能使用特定的组件
完整程序：
vue中的Ajax
可以避免刷新整个网页，而实现了局部刷新的效果，异步访问(谁快谁先执行，不必排队)，提高网页的响应速度。
语法：axios.get(java程序的访问方式).then(a => { console.log(a); } )
语法格式一定要规范，写在methods方法中
@CrossOrigin 跨域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
</head>
<body>
<div id="app">
<p>{{info}}</p>
<button @click="init()">点我获取数据</button>
</div>
<div id="app1">
<p>{{info1}}</p>
<button @click="init1()">点我获取数据1</button>
</div>
<script>
new Vue({
el:"#app",
data:{
info:''
},
// 发ajax请求，用以获取数据
methods:{
init(){
axios.get('http://localhost:8090/form/core/dsFromApplyforInfoController/pppp').then( //可以跨域请求服务器数据
a => ( //a就是访问成功后返回的数据
// this.info = a.data.name
this.info = a.data.data //data已经是js对象了
)
)
}
}
})
new Vue({
el:"#app1",
data:{
info1:''
},
// 发ajax请求，用以获取数据
methods:{
init1(){
axios.post('http://localhost:8090/form/core/dsFromApplyforInfoController/getAllApplyforGd').then( //可以跨域请求服务器数据
a => ( //a就是访问成功后返回的数据
this.info1 = a.data.data //data已经是js对象了
)
)
}
}
})
// axios.post(url,datas).then(res=>{
// //post提交给后台的是一个JSON串
// //后台需要把JSON串转成一个java对象,使用@RequestBody
// console.log(res.data);
// })
</script>
</body>
</html>
//前端
let url = 'http://localhost:8080/user/addUser';
let datas = {id:100,name:'tony'} ;
//get查询数据,post提交数据,update修改数据,delete删除数据
//axios.get(url,{params:datas}).then(res=>{
axios.post(url,datas).then(res=>{
//post提交给后台的是一个JSON串
//后台需要把JSON串转成一个java对象,使用@RequestBody
console.log(res.data);
})
//后端
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
//@RequestMapping("/addUser")
//@GetMapping("/addUser") //以get方式提交的请求,单独使用
//@PutMapping("/addUser") //提交的修改请求+@RequestBody获取数据
//@DeleteMapping("/delUser")//提交的删除请求
@PostMapping("/addUser") //以post方式提交的请求+@RequestBody获取数据
//@RequestBody获取form提交的数据,否则都是null
public void addUser(@RequestBody User u){
System.out.println(u);
}
}
获取前端输入框里的参数，并返回给后端，并得到后端结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<h1>{{address}}</h1>
<div id="app">
<h2>{{address}}</h2>
<h3>{{address}}</h3>
<input type="text" v-model="address"/ id="user" name="username"> <!-- 输入框，配置id，获得id参数 -->
<button @click="init1()">点我获取数据1</button>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
address: ""
},
methods:{
init1(){
var name = document.getElementById("user").value; //得到参数并放入请求中
// console.log("name"+name);
alert(name);
axios.post('http://localhost:8090/form/core/dsFromApplyforInfoController/studentData',name).then( //可以跨域请求服务器数据
a => ( //a就是访问成功后返回的数据
this.address = a.data.data //data已经是js对象了
)
)
}
}
});
</script>
</html>
from表单发送post请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 原生js提交form数据</title>
</head>
<body>
<form method="post" id="form">
<table style="margin: 30px;">
<h2 style="padding-left: 100px;">学生管理系统</h2>
<tr>
<td>姓名:</td>
</tr>
<tr>
<td>
<input type="text" name="name" id="name" placeholder="请输入姓名..."/>
</td>
</tr>
<tr>
<td>年龄:</td>
</tr>
<tr>
<td>
<input type="text" name="age" id="age" placeholder="请输入年龄..." />
</td>
</tr>
<tr>
<td>
性别：(单选框)
<input type="radio" name="sex" id="sex" checked="checked" value="0"/>男
<input type="radio" name="sex" id="sex" value="1" />女
</td>
</tr>
<tr>
<td>
爱好：(多选)
<input type="checkbox" name="hobby" id="hobby" checked="checked" value="ppq"/>乒乓球
<input type="checkbox" name="hobby" id="hobby" value="ps"/>爬山
<input type="checkbox" name="hobby" id="hobby" value="cg"/>唱歌
</td>
</tr>
<tr>
<td>
学历：(下拉框)
<select name="edu">
<option value ="1">本科</option>
<option value ="2">专科</option>
<option value ="3">研究生</option>
</select>
</td>
</tr>
<tr>
<td>
入学日期:
</td>
</tr>
<tr>
<td>
<input type="date" name="intime"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="保存" onclick="change()"/>
<input type="reset" value="取消" />
</td>
</tr>
</table>
</form>
<script>
function change(){
// 1. 创建xhr对象,用于同幕后服务器交换数据
var xhr = new XMLHttpRequest();
// 2. 定义当 readyState 属性发生变化时被调用的函数
xhr.onreadystatechange=function(){
//3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
if(this.status==200 && this.readyState==4){
console.log(this.responseText);
}
}
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var sex = document.getElementById("sex").value;
var hobby = document.getElementById("hobby").value;
var name = document.getElementById("name").value;
var name = document.getElementById("name").value;
console.log(name+age+sex+hobby);
xhr.open('post','http://localhost:8090/form/core/dsFromApplyforInfoController/studentData',true);
xhr.send(name); //发送post请求
}
---------------------------------使用vue发送请求
new Vue({
el:"#form",
data:{
info1:''
},
// 发ajax请求，用以获取数据
methods:{
change(){
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var sex = document.getElementById("sex").value;
var hobby = document.getElementById("hobby").value;
console.log(name+age+sex+hobby);
var xxx = {name:name,age:age,sex:sex}
axios.post('http://localhost:8090/form/core/dsFromApplyforInfoController/studentData',xxx).then( //可以跨域请求服务器数据
a => ( //a就是访问成功后返回的数据
this.info1 = a.data.data //data已经是js对象了
)
)
}
}
})
</script>
</body>
</html>
使用JSONObject 获取参数。
@PostMapping("/studentData")
public JsonResult studentData(@RequestBody JSONObject jsonObject){
String name = jsonObject.getString("name");
String sex = jsonObject.getString("sex");
String age = jsonObject.getString("age");
System.out.println(name+sex+age);
JsonResult jsonResult = new JsonResult();
jsonResult.setData(name);
return jsonResult;
}
VScode 进行创建用户代码片段
{
"create a new vue": {
"scope": "",
"prefix": "vm",
"body": [
"const v = new Vue({",
" el: '#root',",
// "new Vue({",
//使用空格缩进，不能使用tab键缩进
// "\t\tdata: {$2},", //我们也可以使用\t缩进
// "\t\tmethods: {$3}",
// "\t})",
" data:function(){",
" return{" , //第二种写法 函数试
" name:'6666'",
" }",
" }",
"})",
],
"description": "快速创建vm实例"
},
"creat a new style":{
"scope": "css",
"prefix": "newStyle",
"body": [
"* {\n\tpadding:0;", //使用\n换行 使用\t缩进
"\tmargin:0;\n}"
],
"description": "关闭默认样式"
}
}数组，给数组添加新的灵活属性，遍历枚举
Object.defineProperty更高级，更灵活的得到、更改属性
let number = 188;
let person = {
name:'6666',
age:'18',
sex:"男"
}
//更高级，可以添加更多高级的设置
Object.defineProperty(person,'adders',{ //可以给上面的数组赋予新的属性
//value:'中原', //属性的值
//enumerable:true, //表示是否可以进行枚举，不需要则删除
//writable:true, //表示是否可以被修改
get:function(){
return number //当调用时才会去寻找上面的数据
},
set(value){ //修改对应属性时才会调用
console.log('有人修改了adders属性。且值是：',value)
number = value //并将修改的值赋给上面的属性
}
})
for(let key in person){ //对数组进行遍历枚举
console.log(person[key])
}
进行设计页面元素的样式
事件的设定： @click等都是事件。在后面可加设定
滚动条事件 @scroll
<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>
<script src="../js/vue.js"></script>
<style>
.list{
width: 200px;
height: 200px;
background-color: chocolate;
overflow: auto; /*形成滚动条*/
}
li{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<h1>{{name}}</h1>
<ul @scroll="demo" class="list"> <!--@scroll是滚动条的事件 -->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
const v = new Vue({
el: '#root',
data:function(){
return{
name:'6666'
}
},
methods:{
demo(){ //绑定滚动条的事件
alert(this.name)
}
}
})
</script>
</body>
</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>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model:value="name"><br/>
名：<input type="text" v-model:value="names">
姓名：<span>{{fullName}}</span>
</div>
<script>
const v = new Vue({
el: '#root',
data:function(){
return{
name:'',
names:''
}
},
computed:{ //此处进行计算属性的定义
fullName:{ //当有人读取fullName属性时，才会被调用
get(){
console.log("get被调用")
return this.name + this.names
}
}
}
})
</script>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献3条内容
所有评论(0)