时间戳

首页 > 解决方案 > Html 模板未在屏幕上呈现 Vue 内容

javascript - Html 模板未在屏幕上呈现 Vue 内容

问题描述

非常迷失可能导致此问题的原因，因为它甚至无法使用官方网站文档中的复制/粘贴！

只尝试“hello world”（app.js 和 index.html 在同一个文件夹中）

索引.html

<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
    <title>Document</title>
</head>    
<body> 
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="my_view">
    {{ name }} {{ age }}
    </div>
    <div id="app">
        {{ message }}
    </div>
</body>
</html>

app.js 的内容是：

var app = new Vue({ 
el: '#app',
data: {
    message: 'Hello Vue!'
}});

并从教程中尝试过这种方式，但也没有工作......

const app = Vue.createApp({
    template: '<h1>Hello World</h1>',
})

app.mount('#app')

当我重新加载页面时，我不断收到“{{ message }}”，或者使用第二种方法根本没有收到任何内容。谢谢。

标签： javascriptvue.js

解决方案

<div id="app"></div>该示例似乎有效，只需注意在这种情况下“名称”和“年龄”必须在应用程序容器内

试试这个基本的例子：

<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
    <title>Document</title>
</head>    
<body> 
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        {{ message }}
        <p>
            {{ name }} {{ age }}
        </p>
    </div>
        <script>
    var app = new Vue({ 
      el: '#app',
      data: {
        message: 'Hello Vue!',
        name: "ldonis",
        age: "30"
      }});
    </script>
</body>
</html>

你可以玩一点：https ://jsfiddle.net/ldonis/g31Lstde/3/

推荐阅读