首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >框架vue上的绑定

框架vue上的绑定
EN

Stack Overflow用户
提问于 2019-12-10 07:00:58
回答 3查看 40关注 0票数 0

下面是一个代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>

<body>
    <div id="root">
        <input v-model="message" placeholder="Msg">
        <p>Message you typed is: {{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script>

        new Vue({
            data: {
                el: '#root',
                message: ''
            }
        });
    </script>
</body>
</html>

为什么绑定不起作用。我试着用视频

代码语言:javascript
复制
https://laracasts.com/series/learn-vue-2-step-by-step/episodes/1 . 

谢谢

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-12-10 07:13:31

您的vue实例没有连接到元素。

代码语言:javascript
复制
    <script>
            new Vue({
                el: '#root',
                data: {
                    message: 'Hello World!'
                }
            });
    </script>
票数 1
EN

Stack Overflow用户

发布于 2019-12-10 07:05:54

el键应该在传递给Vue构造函数的对象上,而不是在data对象(参考文献)中。

代码语言:javascript
复制
new Vue({
  el: '#root',
  data: {
    message: ''
  }
});
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <input v-model="message" placeholder="Msg">
  <p>Message you typed is: {{message}}</p>
</div>

票数 3
EN

Stack Overflow用户

发布于 2019-12-10 07:05:44

代码语言:javascript
复制
new Vue({
    data: {
        el: '#root',
        message: ''
 }
});

应该取代到

代码语言:javascript
复制
new Vue({
    el: '#root',
    data: {
        message: ''
    }
});
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59261830

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档