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

引入流程

  1. head标签中通过script标签引入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标签中加上挂载到的节点;
    <div id="container">
        <!-- 使用自定义组件 -->
        <ul>
            <todo-item v-for="(item, idx) in list" :key="idx" :item="item"></todo-item>
        </ul>
    </div>
    
  3. body标签底部加上script标签,然后在script标签中初始化Vue实例对象;
            // 注册组件(需要在实例化 Vue 对象之前)
            Vue.component("todo-item", {
                // 父组件传值到子组件
                // 定义子组件接收数据的参数
                props: ['item'],
    
                // 定义自定义组件
                template: "<li>{{ item }}</li>",
            });
    
            // 实例化 Vue
            var app = new Vue({
                // 指定挂载节点
                el: "#container",
                // 声明并初始化 Vue 实例的成员变量
                data: {
                    str: "hello, Vue.",
                },
                // 定义 Vue 实例的成员方法
                methods: {
                    click() {
                        console.log("我被点啦!!!");
                        this.str = "我被点啦!!!";
                    },
                },
    
                // 生命周期钩子函数
                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
  • 如果控制台输出上面内容,那么说明vue.js引入成功。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容