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>