Vue ----------- 了解, 展示json 數據


Vue.js  是一套構建用戶界面的漸進式框架。

優點:

與大型框架不同的是采用自底向上的增量開發的設計,

只聚焦於視圖層,不僅易於上手,還便於與第三方庫或既有項目整合

當與現代化工具鏈以及各種類庫結合使用時,也完全能為復雜的單頁應用提供驅動

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統

 

 

使用vue展示json對象中數據

特點:采用聲明式渲染  、使用需要實例化

看起來這跟渲染一個字符串模板非常類似,但是 Vue 在背后做了大量工作。

現在數據和 DOM 已經被建立了關聯,所有東西都是響應式的,當你打開你的瀏覽器的 JavaScript 控制台 (就在這個頁面打開),

並修改message的值,你將看到上例相應地更新。

 

瀏覽器上

使用js方式展示json對象中數據 

 

 瀏覽器上

與js或jQuery相比有什么優點

js或jquery需要通過操作HTML DOM 的方式,把數據顯示上

如果使用Vue ,只需要提供數據,以及數據綁定的元素id,就可以了,不需要顯示地操作HTMl DOM,

代碼:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>vue學習</title>
    <!--引入vue-->
    <script src="http://www.obge.top/js/vue/v2.5.16/vue.min.js"> </script>
</head>
<body>
<!--准備一個盒子-->
<div id="d1" style="border: solid">
    <!--獲取 在兩個大括號中 直接通過  名.屬性-->
    <p>{{obge.name}} </p>
    <h1 style="color: brown"> {{obge.age}}</h1>
</div>
<!--Vue.js 使用了基於 HTML 的模版語法,允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。
     狀態發生改變時重新渲染組件,應用在DOM上
-->
<script>
    //准備一個json 對象
    var obge = {"name":"小喬","age":17}
    //通過vue.js 把數據和對應的視圖關聯起來
    //每個 Vue 應用都需要通過實例化 Vue 來實現
    var vm = new Vue({
        //獲取前端元素 id  注意有個#
        el: '#d1',
        data:{
            //關聯json對象
            message:obge
        }
    })
</script>


<!--<script>-->
    <!--//准備一個json 對象-->
    <!--var obge  = {"name":"周瑜","age":12};-->
    <!--//獲取 盒子的 id-->
    <!--var div1 = document.getElementById("d1");-->
    <!--//在盒子里面顯示數據-->
    <!--div1.innerHTML = obge.name;-->
<!--</script>-->

</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM