Vue入门学习(1) 什么是双向绑定?
Vue入门学习(2) 基本语法使用
- IDEA创建JSON数据
源码
{"name": " zhang Java 666 天下无敌","url": "https://blog.csdn.net/qq_45481709?spm&＃61;1000.2115.3001.5343" ,"page": 1,"isNonProfit": true,"address":{"street":"山东","city":"济南","country":"高新区"},"links" : [{"name":"关注我","url":"https://blog.csdn.net/qq_45481709?spm&＃61;1000.2115.3001.5343"},{"name":"MaxHeng","url":"https://blog.csdn.net/qq_45481709?spm&＃61;1000.2115.3001.5343"},{"name":"关注!!!!","url":"https://blog.csdn.net/qq_45481709?spm&＃61;1000.2115.3001.5343"}]
}
代码 :
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>Titletitle><style>[v-cloak]{display: none;}style>head>
<body><div id&＃61;"vue" v-cloak> <div>{{info.name}}div><div>{{info.address.street}}div><div>{{info.address.city}}div><div>{{info.address.country}}div>
<a v-bind:href&＃61;"info.url">点俺~a>
div>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue&＃64;2.5.16/dist/vue.js">script>
<script src&＃61;"https://unpkg.com/axios/dist/axios.min.js">script>
<script type&＃61;"text/Javascript">var vm &＃61; new Vue({el: &＃39;#vue&＃39;,data(){return{ info:{name: null,url:null,address :{street: null,city:null,country:null},url:null,links:[]}}},mounted(){ axios.get(&＃39;data.json&＃39;).then(response&＃61;>(this.info&＃61;response.data));}})script>
body>
html>
最终显示效果
京公网安备 11010802041100号