Vue指令语法

最新推荐文章于 2024-11-01 14:29:13 发布

终会为一

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量481

点赞数 13

分类专栏： vue.0+vue3.0全套学习目录文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_73992463/article/details/134862365

版权

vue.0+vue3.0全套学习目录专栏收录该内容

30 篇文章 2 订阅

订阅专栏

插值语法的代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr/>   
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = true//设置为 false 以阻止 vue 在启动时生成生产提示
    new Vue({
        el:'#root',
        date:{
            name:'jack'
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr/>   
        <h1>指令语法</h1>
        <a v-bind:href="url">一点就废了你的电脑</a>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = true//设置为 false 以阻止 vue 在启动时生成生产提示
    new Vue({
        el:'#root',
        date:{
            name:'jack',
            url:'http://www.atguigu.com',
            hello:'你好'
        }
    })
</script>
</html>

在你提供的代码中，有一个拼写错误导致了报错。在 Vue 实例选项中，data 被错误地写成了 date，导致 Vue 无法正确初始化数据。

new Vue({
  el: '#root',
  data: {
    name: 'jack',
    url: 'http://www.atguigu.com',
    hello: '你好'
  }
})
·

建议将 script 标签放在 body 标签的末尾，这样可以确保 DOM 元素已经加载完毕后再执行 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>
  <!-- 引入vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 准备一个容器 -->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好,{{name}}</h3>
    <hr/>   
    <h1>指令语法</h1>
    <a v-bind:href="url">一点就废了你的电脑</a>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = true; // 设置为 false 以阻止 vue 在启动时生成生产提示
    new Vue({
      el: '#root',
      data: {
        name: 'jack',
        url: 'http://www.atguigu.com',
        hello: '你好'
      }
    });
  </script>
</body>
</html>

请注意，在使用 Vue.js 时，确保已正确引入 Vue.js 文件，并提供正确的文件路径。这样你的代码应该能够正常运行了。