V-ONS标签的问题不起作用

我正在尝试用 Vue. Js 学习温泉。

我正在使用 cdn 链接来使用温泉 vue。ons 标签有效，但 v-ons 标签无效。我得到的错误说

未定义自定义标记。

例如，v-ons 按钮不起作用，但 ons 按钮有效。我只是创建了html文件来测试它。我还可以看到 psen-vue(2.4( 加载在资源中我已经为 Vue 添加了 cdn.js (2.4(

从温泉文档中查看 HelloWorld 的工作示例

它使用 vue-onsenui@2.4 和 vue@2.4 的 cdn 版本

。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/onsenui@2.8.1/css/onsenui.min.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui@2.8.1/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/vue@2.4.0/dist/vue.js"></script>
    <script src="https://unpkg.com/onsenui@2.8.1/js/onsenui.min.js"></script>
    <script src="https://unpkg.com/vue-onsenui@2.4.0/dist/vue-onsenui.js"></script>
</head>
<body>
<template id="main-page">
    <v-ons-page>
        <v-ons-toolbar>
            <div class="center">Title</div>
        </v-ons-toolbar>
        <p style="text-align: center">
            <v-ons-button @click="$ons.notification.alert('Hello World!')">
                Click me!
            </v-ons-button>
        </p>
    </v-ons-page>
</template>
<div id="app"></div>
<script>
    var vm = new Vue({
        el: '#app',
        template: '#main-page'
    });
</script>
</body>
</html>

相关内容

最新更新

热门标签：