vue怎么嵌入到html中

Vue.js作为目前非常流行的一个前端框架，以其易用性、灵活性和高效性受到了广大开发者的喜爱，如何将Vue.js嵌入到HTML中呢？下面就来一步一步地为大家详细介绍。

我们需要在HTML文件中引入Vue.js，你可以选择通过CDN链接引入，也可以下载Vue.js的本地文件进行引入，这里,我们以CDN链接为例进行讲解。

引入Vue.js

在你的HTML文件中的<head>标签内,添加以下代码：

Markup

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

这段代码表示从CDN上引入Vue.js的最新版本（2.6.14），你也可以根据需要引入其他版本的Vue.js。

创建Vue实例

在<body>标签内,你可以选择一个合适的位置创建一个Vue实例。

Markup

<div id="app">
    {{ message }}
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>

在上面的代码中，我们创建了一个id为“app”的div元素，并在其中使用双大括号插值表达式显示了一个名为message的数据，在<script>标签内，我们创建了一个Vue实例，并将这个实例挂载到id为“app”的元素上。

使用Vue组件

在Vue中，组件是构建应用的基础，下面,我们来看一下如何在HTML中使用Vue组件。

vue怎么嵌入到html中

定义一个名为“my-component”的组件：

Markup

<template id="my-component">
    <div>
        <p>{{ msg }}</p>
    </div>
</template>

在Vue实例中注册这个组件：

Markup

<script>
    Vue.component('my-component', {
        template: '#my-component',
        data: function() {
            return {
                msg: '这是一个组件'
            }
        }
    });
    new Vue({
        el: '#app'
    });
</script>

在HTML中像使用普通标签一样使用这个组件：

Markup

<div id="app">
    <my-component></my-component>
</div>

Vue与其他库的兼容性

如果你的项目中已经使用了其他库（如jQuery、React等），需要注意避免冲突，Vue.js在设计时就考虑了与其他库的兼容性,因此可以很容易地与其他库一起使用。

如果你的项目中使用了jQuery,可以按照以下方式创建Vue实例：

Markup

<script>
    $(function() {
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    });
</script>