Vue.js

時間 2019-11-06

標籤 vue.js vue 欄目 JavaScript 简体版

原文原文鏈接

Vue.js是對JavaScript進行了封裝，語法風格和小程序很像，好比雙大括號{{}}都是插值表達式。也許它們有相互借鑑的地方，因此說只要熟悉了一門語言，再學習其餘語言就會融會貫通。html

Vue的官方文檔是https://cn.vuejs.org/v2/guide/前端

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

簡單的教程就不說了，這裏我搭建了一個springboot+vue的工程，經過axios動態請求獲取數據而後顯示在table裏ios

效果git

工程結構github

SpringBoot的搭建過程我就不說了，詳見個人博客http://www.javashuo.com/article/p-qpqwocef-eg.htmlspring

前端代碼以下npm

user.htmlaxios

<!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 @CrossOrigin public class UserController {

要學會自主的學習，遇到問題多百度google，少問人，會頗有成就感

歡迎關注個人的微信公衆號：安卓圈

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。