admin管理员组文章数量:1794759
前端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('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('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 = '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('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','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('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>版权声明：本文标题：前端Vue框架 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686500487a74475.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论