axious请求，新增test.json

{"name":"我爱架构","url":"http://www.52jiagou.com","article":[{"name":"文章1"},{"name":"文章2"}]}

demo:

 <div id="app">
        <p>name:{{info.name}}</p>
        <p>url:{{info.url}}</p>
        <ul>
            <li v-for="item in info.article">{{item.name}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            //element缩写
            el: '#app',
            data() {
                return {
                    info: {
                        name: "",
                        url: "",
                        article: []
                    }
                }
            },
            mounted() {
                axios
                    .get("test.json")
                    .then(response => this.info = response.data);
            }
        })
    </script>

表单绑定：

<input v-model="message" placeholder="编辑">
        <p>Message is :{{message}}</p>
        <textarea v-model="message"></textarea>
        <div>
            <input type="checkbox" id="cbx" v-model="checked" true-value="YES" false-value="NO">
            <label for="checkbox">{{checked}}</label>
        </div>
        <div>
            <input type="checkbox" id="a" value="a" v-model="checkedNames">
            <label for="a">a</label>
            <input type="checkbox" id="b" value="b" v-model="checkedNames">
            <label for="b">b</label>
            <span>{{checkedNames}}</span>
        </div>
        <div>单选<br>
            <input type="radio" id="one" v-bind:value="b" v-model="picked">
            <label for="one">One</label>
            <input type="radio" id="two" value="two" v-model="picked">
            <label for="two">Two</label>
            <span>{{picked}}</span>
        </div>
        <div>
            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option v-bind:value="{number:123}">A</option>
                <option v-bind:value="{number:113}">B</option>
                <option>C</option>
            </select>
            <span>{{selected.number}}</span>
        </div>
        <div>
            <select v-model="selected2" multiple>
                <option>A</option>
                <option>B</option>
            </select>
            <span>{{selected2}}</span>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
<script>
        var app = new Vue({
            //element缩写
            el: '#app',
            data: {
                message: "",
                checked: null,
                checkedNames:[],
                picked:"",
                selected:'',
                selected2:[],
                b:"goood"
            }
        })
</script>

制作第一个组件：

<div id="app">
       <my-first-component v-for="item in items" v-bind:item="item"></my-first-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
<script>
        Vue.component("my-first-component",{
            props:["item"],
            template:'<h1>{{item}}</h1>'
        });
        var app = new Vue({
            //element缩写
            el: '#app',
            data:{
                items:['A','B','C']
            }
        })
</script>