2. 程式人生 > >vue 簡單模擬 後臺資料渲染頁面

vue 簡單模擬 後臺資料渲染頁面

阿新 • • 發佈：2019-01-11
第一步

注：首先html,css已經寫好！！！並且本例是以html 結尾的，使用vue獲取本地檔案。

1.新增vue.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

2.使用 axios  來獲取資料：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3.html和css(vue例項)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
    </head>
  <body>
    <div id="app">
          <div class="student" style="width: 80%;margin: 0 auto;">
              <ul style="list-style: none; text-decoration: none;"> 
                  <li v-for="person in persons" style="width: 100%; height: 30px; background: pink;border-bottom: 1px solid #ccc;">
                      <a href="">
                          <div style="float: left;">
                              {{person.name}}
                          </div>
                          <div style="float: right;">
                              {{person.message}}
                          </div>
                      </a>
                  </li>
              </ul>
          </div>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/

[email protected]/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",//例項
                data: {//資料M
                    persons:[],
                },
                created:function() {//掛載
                    var self = this;
                    self.initdata()
                },
                methods:{//定義函式
                    initdata:function() {
                        var url = "one.json";//定義引入地址
                        _this = this;//改變this指向
                        axios.get(url).then(function(result) {//獲取資料
                            console.log(result.data);
                            _this.persons = result.data.persons;
                        })
                    }
                }
            })
        </script>
</body>
</html>

4.本地.json資料

 
{
    "persons":[
        {
            "name":"li","message":"知道了","time":"01:00","url":"images/student/girl.png"
        },
        {
            "name":"ja","message":"在嗎","time":"02:00","url":"images/student/girl.png"
        },
        {
            "name":"he","message":"真的","time":"03:00","url":"images/student/girl.png"
        },
        {
            "name":"lu","message":"好的","time":"04:00","url":"images/student/girl.png"
        },
        {
            "name":"xiao","message":"載入","time":"05:00","url":"images/student/girl.png"
        }                
    ]
}

注意：請開啟服務或者用hbulider黏貼程式碼段！！！

相關推薦

vue 簡單模擬 後臺資料渲染頁面

第一步 注：首先html,css已經寫好！！！並且本例是以html 結尾的，使用vue獲取本地檔案。 1.新增vue.js <script src="https://cdn.jsdeliv

小型網站不使用vue框架如何實現資料渲染到前端頁面

1，先寫ajax請求 eg： <script src="jquery.min.js"></script> <script> $(function(){ var xhrul='http://192.168.31.133:3000/jdap

Vue最新版本修改dev-server.js模擬後臺資料請求，配置express

參照了別人寫的記錄一下 最新的vue裡dev-server.js被替換成了webpack-dev-conf.js 因此我們需要找到webpack-dev-conf.js檔案進行修改 在模擬後臺資料的時候直接在webpack-dev-conf.js檔案中修改 第一步，在const portfi

新版的vue-cli腳手架中少了dev-server.js檔案，怎麼模擬後臺資料呢？

        第一步：，在webpack.dev.conf.js中加入 在webpack.dev.conf.js中引入node中的express框架即後臺模擬資料json檔案，程式碼如下： //這裡是模擬後臺資料 const expres

vue中element UI導航選單(可摺疊式)(導航列表根據後臺資料渲染)

版本一：可摺疊式，資料前臺自定義 <template> <div id="index"> <el-aside width="152px" class="asideNav"> <el-menu :default-act

swiper3 ajax獲取後臺資料渲染實現輪播效果

1.呼叫介面獲取需要渲染的資料，根據返回的介面資料，渲染節點，緊接著在插入節點的後邊呼叫步驟2編寫的初始化方法 // 將資料加入節點後，插入父節點中 $('#swiper_demo').html(html);

vue專案模擬假資料

開發vue專案的時候需要用到一些假資料，這裡我就分享一下用json-server這個包來託管資料。 首先就是npm install -g json-server來全域性安裝。 之後新建一個json檔案，格式大概是這樣的。 { "items":[ {

vue-cli與後臺資料互動增刪改查

1. 安裝vue-resource  npm install vue-resource --save 2.訪問後臺地址，在vue中會出現跨域的問題，以下為解決方案 　　在config下的index.js 中配置proxyTable代理設定 proxyTable: {

MockJs結合json-server模擬後臺資料

Mock.js 結合 json-server 模擬後臺資料 說明 Mock.js 是一款模擬資料生成器，可以根據模板生成資料、模擬網路請求，返回模擬資料等 更多細節參考 官

ajax獲取後臺資料，頁面Json資料按照json格式化輸出

樣式效果圖： 2.頁面程式碼： //查詢出對應的原始碼進行展示 function querySource(label) { var url = base_path+"console/cfg/querySource"; $.ajax({ url:

vue.js與後臺資料互動

第一步：引入js庫： <script src="../js/common/vue.min.js"></script> <script src="../js/commo

Vue.js 請求後臺資料

var that = this; that.$http({ //呼叫介面 method:'GET',

vue專案前端渲染後臺資料：圖片和頁面詳情

1.從後臺獲取圖片處理 需要對圖片字元拼接 <img :src="host+'/'+list.pro_img" alt=""> // <img :src="'http://www.xxx.com'+'/'+list.pro_img" alt=""> data (

laravel關於前臺vue結合寫後臺介面拿資料渲染到頁面上的過程（vant時間元件的運用）

先展示下效果圖，要完成的功能就是通過時間篩選功能，查到每個月的交易資料 點選右上角時間篩選 這就是要完成的功能 先引進的vue元件庫的DatetimePicker 時間選擇元件 接下來編寫一個文字框，賦予一個id="time" 還有一個點選事件 @click=

Vue專案載入本地的json資料模擬請求後臺資料

1. 安裝express和axios npm i express --save &  npm i axios --save  網速不好的，可以安裝淘寶映象，使用cnpm 2. 在main.js中引入axios，並掛載到全域性 import axios from ‘axios

Vue使用v-for渲染資料完成後再次改變資料，頁面資料不改變

v-for不能進行雙向資料繫結,頁面渲染完成後,再次更改v-for遍歷的資料,js裡面列印的資料看到資料值已經更改,但是頁面的資料就是沒有渲染,這是為什麼呢?vue中v-for和angularjs中的ng-repeat不用 ,它對頁面只進行一次渲染。後續如果需要更改資料且顯示在頁面上就需要想想其他辦

Vue.js 通過jQuery ajax獲取資料實現更新後重新渲染頁面

1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script

vue-resource+jsonplaceholder模擬請求後臺資料

最近在學習 vue，在用 vue-resource 外掛的時候發現用來練習請求後臺資料的站點 vue.studyit.io 好像掛了，後來通過文章 Vu文章resource三種請求格式和萬能測試地址 找到了另一個可用的，雖然這個站點好像沒有提供新增和刪除資料的介面，但起碼稍微

vue-cli搭建專案模擬後臺介面資料，webpack-dev-conf.js檔案配置

注：本篇寫於2018-12，基於vue2.xxx   （一）路徑：bulid / webpack.dev.conf.js  1、在webpack.dev.conf.js 裡面找到 const portfinder = require(‘portfinder’),然後在下面寫上以下程式

Vue模擬簡單的訂單列表結算頁面

最近在學習Vue相關課程，最開始真的有點搞不懂，學習起來很吃力（雖然現在也是），d但通過今天做的小練習，真心覺得vue太友好了，js要十幾行程式碼才能搞定的事，vue幾行程式碼就可以了，不多說，直接把我練習的小案例放上來： html程式碼： <div id="app">