jiansgk 2024-07-29 13:10 采纳率: 50%
浏览 2
已结题

通过CDN使用VUE，无法使用v-bind或v-model等常用命令

html代码如下，CDN使用的版本应该是3.4.34，下列代码无法生效，实现效果为实际效果图；若换成引用实际js文件2.6.10则可以达到预期效果
大概率是vue版本问题导致，想问问3.4.34为何无法生效，若选择通过cdn使用vue实现下列效果该如何操作。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <a v-bind:href="url">百度一下</a><br>

    <input type="text" v-model.v="url">

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!--<script src="js/vue.js"></script>-->
<script>



    new Vue({
        el : "#app",
        data:function(){
            return{
                url:"https://www.baidu.com"
            }
        }
    })

</script>

</body>
</html>

预期效果：

img

实际效果：

img

  • 写回答

2条回答 默认 最新

  • 阿里嘎多学长 2024-07-29 13:10
    关注

    以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

    您好！根据您提供的信息和代码，问题出在Vue.js版本升级后API的使用上。Vue.js 3.x 相较于 2.x 有了一些变化，特别是v-model的使用方式和组件的创建方法。以下是根据您提供的信息修改后的完整代码示例，以及如何使用Vue.js 3.x通过CDN实现预期效果的说明。

    修改后的代码示例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 3.x Example</title>
</head>
<body>
<div id="app">
    <a :href="url">百度一下</a><br>
    <input type="text" v-model="url">
</div>

<!-- 引入Vue.js 3.x版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    // Vue 3.x 使用 createApp 和 mount 方法
    Vue.createApp({
        data() {
            return {
                url: "https://www.baidu.com"
            };
        }
    }).mount("#app");
</script>
</body>
</html>

    使用说明

    1. 移除.v前缀：在Vue.js 3.x中，v-model直接使用，不需要.v-前缀。
    2. 使用:href代替v-bind:href：在Vue.js 3.x中，可以直接使用:href作为简写。
    3. 使用Vue.createApp和mount：Vue.js 3.x中，使用Vue.createApp来创建应用实例，并使用mount方法挂载到DOM元素。

    示例输入和输出

    • 示例输入：在文本框中输入https://www.example.com。
    • 示例输出：点击“百度一下”链接时，浏览器将跳转到用户输入的URL。

    假设的数据

    假设用户没有进行输入，那么链接将默认为https://www.baidu.com。

    运行环境

    • Vue.js版本：3.4.34，通过CDN引入。

    通过上述修改，您的代码应该能够在Vue.js 3.x版本下正常工作，并达到预期效果。如果还有其他问题或需要进一步的帮助，请随时告知。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 8月6日
  • 已采纳回答 7月29日
  • 创建了问题 7月29日

悬赏问题

  • ¥15 nopCommerce开发问题
  • ¥15 torch.multiprocessing.spawn.ProcessExitedException: process 1 terminated with signal SIGKILL
  • ¥15 QuartusⅡ15.0编译项目后，output_files中的.jdi、.sld、.sof不更新怎么解决
  • ¥15 pycharm输出和导师的一样，但是标红
  • ¥15 想问问富文本拿到的html怎么转成docx的
  • ¥15 我看了您的文章，遇到了个问题。
  • ¥15 GitHubssh虚拟机连接不上
  • ¥15 装完kali之后下载Google输入法 重启电脑后出现以下状况 且退不出去 桌面消失 反复重启没用
  • ¥15 ESP-IDP-BLE配网连接wifi
  • ¥15 ue2.6.12版本用的若以，安装gojs，引入import * as go from 'gojs';报错