封装了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>

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐