在原生HTML文件中引入 vue.js(非單文件組件方式)

引入流程

  1. head標(biāo)簽中通過script標(biāo)簽引入vue.js框架;
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入 vue.js 框架 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    </head>
    
  2. body標(biāo)簽中加上掛載到的節(jié)點(diǎn);
    <div id="container">
        <!-- 使用自定義組件 -->
        <ul>
            <todo-item v-for="(item, idx) in list" :key="idx" :item="item"></todo-item>
        </ul>
    </div>
    
  3. body標(biāo)簽底部加上script標(biāo)簽,然后在script標(biāo)簽中初始化Vue實(shí)例對(duì)象;
            // 注冊(cè)組件(需要在實(shí)例化 Vue 對(duì)象之前)
            Vue.component("todo-item", {
                // 父組件傳值到子組件
                // 定義子組件接收數(shù)據(jù)的參數(shù)
                props: ['item'],
    
                // 定義自定義組件
                template: "<li>{{ item }}</li>",
            });
    
            // 實(shí)例化 Vue
            var app = new Vue({
                // 指定掛載節(jié)點(diǎn)
                el: "#container",
                // 聲明并初始化 Vue 實(shí)例的成員變量
                data: {
                    str: "hello, Vue.",
                },
                // 定義 Vue 實(shí)例的成員方法
                methods: {
                    click() {
                        console.log("我被點(diǎn)啦!??!");
                        this.str = "我被點(diǎn)啦?。。?;
                    },
                },
    
                // 生命周期鉤子函數(shù)
                beforeCreate() {
                    console.log("beforeCreate");
                },
    
                created() {
                    console.log("created");
                },
    
                beforeMount() {
                    console.log("beforeMount");
                },
    
                mounted() {
                    console.log("mounted");
                },
    
                beforeUpdate() {
                    console.log("beforeUpdate");
                },
    
                updated() {
                    console.log("updated");
                },
    
                beforeDestroy() {
                    console.log("beforeDestroy");
                },
    
                destroyed() {
                    console.log("destroyed");
                },
            });
    

怎么確定vue.js框架引入成功?

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
  • 如果控制臺(tái)輸出上面內(nèi)容,那么說明vue.js引入成功。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容