VUE.js 簡單引用

Vue開發的兩種方式：靜態資源引入開發 和 腳手架交互式開發

這里使用的是靜態資源引入開發

首先 引用jquery.js  和  vue.js    

html 標簽內加個

<div id="box">內容</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            lists: [],
            adverts: [],
            page: "",
            airdropLists: [],
            airdropId: ''
        },
        created: function () {
            var that = this
            that.token = localStorage.getItem('token')
            console.log(that.token)
            that.post()
            that.getList()
        },
        mounted() { // 通知公告
            var swiper = new Swiper('.swiper-notice', {
                direction: 'vertical',
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                },
                observer: true,//修改swiper自己或子元素時，自動初始化swiper
                observeParents: true//修改swiper的父元素時，自動初始化swiper
            });
        },
        methods: {
            post: function () {
                var that = this;
                $.ajax({
                    type: "POST", //提交方式 
                    url: URL + "index.php/Api/Member/advert", //廣告
                    dataType: 'json',
                    data: {},
                    success: function (res) { //返回數據根據結果進行相應的處理  
                        console.log(res.data.advert)
                        if (res.code == 1) {
                           that.adverts = res.data.advert
                        }
                    }
                }) 
            },
            // 獲取訂單列表
            getList: function () {
                var that = this
                $.ajax({
                    type: "POST", //提交方式 
                    url: URL + "/index.php/Api/Airdrop/airdrop_list", //空投列表
                    dataType: 'json',
                    data: {
                        // token: that.token,
                        page: 1
                    },
                    success: function (res) { //返回數據根據結果進行相應的處理 
                        console.log(res)
                        if (res.code == 1) {
                            that.airdropLists = res.data
                        }
                    }
                })
            },
            login: function (airdrop_id) {
                var that = this
                console.log(airdrop_id)
                that.airdrop_id = airdrop_id
                console.log(1)
                if (that.token == null) {
                    window.location.href = "loginRegister.html";
                }
                else {
                    window.location.href = "airdropDetails.html?airdrop_id=" + airdrop_id;
                }
            },
            logined: function () {
                var that = this
                if (that.token == null) {
                    window.location.href = "loginRegister.html";
                }
            },
        },
    });

</script>