学习Vue.js

引用vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

创建一个实例

<script type="text/javascript">
    var vm = new Vue({
        el: '#test1',
        data: {
            shops: [{
                    "shop_name": "abc",
                    "shop_address": "123",
                    "imgurl": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548843675715&di=ad328beb6256c799e11c2273c85c1071&imgtype=0&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg"
                },
                {
                    "shop_name": "zxc",
                    "shop_address": "1234",
                    "imgurl": ""
                },
                {
                    "shop_name": "lalala",
                    "shop_address": "1234",
                    "imgurl": ""
                }
            ]
        },
        created: function () {
            this.getList();
        }, //实例创建时被调用
        methods: {
            getList: function () {

            }
        }
    })
</script>
  • el是绑定ID
  • data是数据组,shops内可以是json数组
  • methods是实例函数执行

网页部分代码

    <div id="test1">
        <li v-for="shop in shops">
            <div>
                <h1>{{shop.shop_name}}</h1>
                <p>{{shop.shop_address}}</p>
                <img v-bind:src="shop.imgurl" />
            </div>
        </li>
    </div>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容