1-1.vue的基本使用

最新推荐文章于 2023-02-24 16:03:59 发布

堵车了

最新推荐文章于 2023-02-24 16:03:59 发布

阅读量99

点赞数 2

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_45660035/article/details/110679321

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1-1.vue的基本使用

1.使用步骤

下载vue.js文件
引入vue.js文件
创建一个div,给div一个id属性，用于绑定vue实例
创建一个vue实例，el属性的值为div的id,将两则绑定
添加一个data属性，里面加一个数据
在div里面用mustache语法展示数据

2.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 2.引入vue.js文件 -->
  <script src='../js/vue.js'></script>
  <title>Document</title>
</head>
<body>
  <!-- 3.创建一个div,给一个id属性 -->
  <div id='app'>
    <!-- 6.使用mustache语法展示相关的数据 -->
    {{message}}
  </div>

  <script>
    // 4.创建一个vue的实例，el属性与div绑定
    const app = new Vue({
      el: '#app',
      // 5.添加一个data属性，里面加数据用于展示
      data: {
        message: '展示信息'
      }
    });
  </script>

</body>
</html>

3.结果展示

在这里插入图片描述

堵车了

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-1.vue的基本使用

1-1.vue的基本使用1.使用步骤下载vue.js文件引入vue.js文件创建一个div,给div一个id属性，用于绑定vue实例创建一个vue实例，el属性的值为div的id,将两则绑定添加一个data属性，里面加一个数据在div里面用mustache语法展示数据2.代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=
复制链接

扫一扫

专栏目录