Vue.js

这个星期把Vue学习了一下。Vue.js是对JavaScript进行了封装,语法风格和小程序很像,比如双大括号{{}}都是插值表达式。也许它们有相互借鉴的地方,所以说只要熟悉了一门语言,再学习其他语言就会融会贯通。

Vue的官方文档是https://cn.vuejs.org/v2/guide/

W3c的教程是https://www.w3cschool.cn/vuejs/

简单的教程就不说了,这里我搭建了一个springboot+vue的工程,通过axios动态请求获取数据然后显示在table里

效果

工程结构

SpringBoot的搭建过程我就不说了,详见我的博客https://www.cnblogs.com/anni-qianqian/p/11270229.html

前端代码如下

user.html

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>v-fot遍历对象</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    <script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="app">    <table border="1">        <tr>            <td>序号</td>            <td>年龄</td>            <td>姓名</td>            <td>密码</td>            <td>邮箱</td>            <td>性别</td>        </tr>        <tr v-for="(user,index) in userList">            <td>{{user.id}}</td>            <td>{{user.age}}</td>            <td>{{user.username}}</td>            <td>{{user.password}}</td>            <td>{{user.email}}</td>            <td>{{user.sex}}</td>        </tr>    </table></div></body><script src="js/user.js"></script></html>

vue.js

new Vue({    el: "#app",    data: {        user: {            id: "",            age: "",            username: "",            password: "",            email: "",            sex: ""        },        userList: []    },    methods: {        query: function () {            var _this = this;            axios.get('http://127.0.0.1:8080/query')                .then(function (response) {                    _this.userList = response.data;                    console.log("response:" + response.data)                })                .catch(function (error) {                    console.log("error")                })
        },        findById: function (id) {
        },        update: function (user) {
        }    },    created: function () {        this.query();    }});

代码地址:https://github.com/king1039/vue_back

这里遇到两个坑

1.浏览器F12控制台报错:vue warn cannot find element #app

解决方案 <script src="js/user.js"></script> 引用vue.js的代码要放在<body>之下,不然拿不到数据

2.浏览器F12控制台报错:no acces-control-allow-origin header is present on the requested resource

解决方案:需要在Controller的类上加注解@CrossOrigin

@Controller@CrossOriginpublic class UserController {

要学会自主的学习,遇到问题多百度google,少问人,会很有成就感

本文分享自微信公众号 - 安卓圈(gh_df75572d44e4),作者:King磊

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringMVC

    用户3112896
  • 应用程序进程启动过程

    1.AMS在启动应用程序时会检查者应用程序需要的应用进程是否存在,不存在就会请求Zygote进程启动需要的应用程序进程

    用户3112896
  • 理解Context

      1)使用Context调用方法,比如启动Activity、访问资源、调用系统级服务等

    用户3112896
  • 前端-part10-jQuery操作样式三:函数+事件委托+阻止冒泡+鼠标事件+输入框监听

    少年包青菜
  • 《HTML5实战》Lesson03

    Week03     2016/09/28上午1-4节 一、复习上节课内容: 二、自己完成登陆明细部分P43:代码清单2-3 1,<fieldset>、<leg...

    用户1733354
  • 【HTML打印】HTML直接调用window下的打印机并执行打印任务(简单打印任务生成)

    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite...

    IT小马哥
  • .Net Core 导出Html到PDF

      最近由于项目的需求问题,涉及到了在.Net Core中导出PDF的一个问题,最后选择方式是后端拼接到Html页面然后再通过Html导出到PDF。中间也尝试了...

    小世界的野孩子
  • JQ实现计算器功能

    下面是计算器的实现方法,主要是使用了JQ,设计原型依据小米手机计算器,实现了基础的单步骤运算,做了简单的校验判断,实现了加减乘除取余等功能;

    申霖
  • JS示例28-表格搜索search

    专注APP开发
  • JQ实现表格全选、反选功能

    下面代码是使用JQ,实现表格列表的全选和反选功能,实际较为简单,主要做为教学使用:

    申霖

扫码关注云+社区

领取腾讯云代金券