【Vue】如何使用vue進行開發(簡單入門的架構)

一、引用CDN

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue@next"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>

二、創vue實體

const vm = Vue.createApp({});

三、自定義元件

vm.component("select-component",{
            data(){
                return {
                    selected_employee:"",
                    seller_array:[],
                }
            },
            methods:{
                append_seller(){
                    //dosometing
                },
                ajax(){
                        axios.post('saveEmployeeWorkRecords',{
                            some_key: 'some value',
                        })
                        .then( (response) => console.log(response))
                        .catch( (error) => console.log(error))
                },
            },
            template:`
                <div class="row offset-1">
                        <select style="width:110px;" id="seller_employee_name" v-model="selected_employee">
                            <option value="Apple">蘋果</option>
                            <option value="Grape">葡萄</option>
                        </select>
                    </div>
                    `
        });

四、掛載

vm.mount("#app");