Vue中如何书写js来渲染页面填充数据的部分代码


new Vue({    el:"#app" ,    data:{        user:{            id:"",            username:"",            password:"",            age:"",            sex:"",        },        userList:[]    },    methods:{        findAll:function () {            //在当前方法中定义一个变量,表明是vue对象            var _this= this;            axios.get(‘/day01_eesy_vuejsdemo/user/findAll.do‘)                .then(function (response) {                    // handle success                    _this.userList=response.data;                    console.log(response);                })                .catch(function (error) {                    // handle error                    console.log(error);                })                .finally(function () {                    // always executed                });        },        findById:function (userid) {            //在当前方法中定义一个变量,表明是vue对象            var _this= this;            axios.get(‘/day01_eesy_vuejsdemo/user/findById.do‘,{params:{id:userid}})                .then(function (response) {                    // handle success                    _this.user=response.data;                    $("#myModal").modal("show");                    console.log(response);                })                .catch(function (error) {                    // handle error                    console.log(error);                })                .finally(function () {                    // always executed                });        },        update:function (user) {  //post请求            //在当前方法中定义一个变量,表明是vue对象            var _this= this;            axios.post(‘/day01_eesy_vuejsdemo/user/updateUser.do‘, _this.user)                .then(function (response) {                    _this.findAll();                    console.log(response);                })                .catch(function (error) {                    console.log(error);                });        }    },    created:function(){        this.findAll();    }});
 

原文地址:https://www.cnblogs.com/newcityboy/p/12222730.html

时间: 2024-10-06 20:16:48

Vue中如何书写js来渲染页面填充数据的部分代码的相关文章

JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面)

JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面) 注:只是用到js中的setTimeout();具体使用方法:  setTimeout(函数名, 时间(毫秒)); setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method.setTimeout( ) 通常是与 function一起用. 样例: 1 <%@ page language="j

vue中使用raphael.js实现地图绘制

一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> 3 <div id='streetMap'> 4 <div class="tips" v-show="tipsShow" :style="tipsStyle"> 5 <span v-html="tipsCo

vue react 与原生 js jquery 渲染时间简单对比

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

在vue中让某个组件重新渲染的笨方法

在vue中,推崇的是数据驱动也就是数据更新进而使组件得以重新渲染:在某些情况下,我们想要在数据不改变的情况下,重新渲染组件:我遇到的一个情况是:同一个页面,两个tab页分别为tab1和tab2,公用了一个组件,在tab1页修改了数据,再去tab2页查看的时候,发现tab1修改的数据会在tab2中的组件中显示,为了能够使得公用的组件重新渲染,可以使用v-if指令进行合理处理. 原文地址:https://www.cnblogs.com/llcdxh/p/9357661.html

在VUE中使用QRCode.js

什么是QRCode.js QRCode.js是用于制作二维码的JavaScript库.QRCode.js支持在HTM中使用HTML5画布和表格标签进行交叉浏览.QRCode.js没有依赖关系 VUE里安装QRCode.js包 npm i qrcodejs2 VUE中引入qrcodejs2包 import QRCode from 'qrcodejs2' 创建DOM元素,存储二维码的位置 <div id="qrcode" ref="qrcode"></

vue中引入mock.js

1.安装 npm i mockjs --save 2.直接在main.js里面引用,如图:(此处有坑,因为只在开发环境使用.if里面不能用import方式导入,只能用require方式引入) if (process.env.NODE_ENV !== 'production') require('./mock') 当项目启动后,mock会拦截他规则内的http请求 3.src下新建mock文件夹 index.js import Mock from 'mockjs' import { getUser

vue中img的src动态渲染不显示问题

在vue中写动态展示图标的需求时,遇到个小坑: 需求:(根据权限动态展示图标,如果没有显式默认图标) 错误写法1: 错误写法2: 报错:(实际img文件夹是有这些图片的,没找到) 审查元素发现:(图片并没有被打包,显示引入路径) 解决办法: 方法一: 使用require引入图片: 方法二: 使用img的onerror属性: 审查元素已经被成功打包转为base64: 原文地址:https://www.cnblogs.com/zixuan00/p/12598953.html

vue中使用router全局守卫实现页面拦截及安全问题的一点感想

一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论) 二.使用场景 静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的: 动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了.假如用户

VUE中引入第三方JS

1.若第三方中的对象或者方法,已经暴露出来(export),则可以直接引用,比如: import '../../../common/geolocation.min.js'; // 引入腾讯地图前端定位组件的js 2.若第三方中的对象或者方法,没有暴露出来,则引用如下: let bBox = require('../../../assets/js/baguetteBox.js'); bBox.baguetteBox.run('.gallery'); 原文地址:https://www.cnblogs