美文网首页
在原生HTML文件中引入 vue.js（非单文件组件方式）

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

作者: EngineerPan | 来源:发表于2022-10-10 21:07 被阅读0次

引入流程

  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引入成功。

相关文章