VUE学习笔记1__创建VUE实例

古斯塔斯hugh2025-01-16 12:01

核心步骤

javascript 复制代码

<div id="app">
  <!-- 这里存放渲染逻辑代码 -->
  <h1>{{ msg }}</h1>
  <a href="#">{{count}}</a>
</div>


<!-- 引入在线的开发版本核心包 -->
<!-- 引入核心包后全局可使用VUE构造函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    // 创建VUE实例
    const app = new Vue({
            el: '#app',//指定VUE管理的是哪个盒子
            //通过data提供数据
            data: {
              msg: 'helloWorld',
              count:666
            }
          })
</script>

预览效果

测试下el指定管理的盒子

javascript 复制代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
<!-- 
创建VUE实例，初始化渲染
1 准备容器，VUE所管理的范围
2 引包
3 创建实例
4 添加配置项->完成渲染
-->
<!-- box1和box2并没有配置到el中，因此{{}}语法不生效 -->
<div class="box1">box1_{{msg}}</div>
<div class="box2">box2_{{count}}</div>

<div id="app">
  <!-- 这里存放渲染逻辑代码 -->
  <h1>{{ msg }}</h1>
  <a href="#">{{count}}</a>
</div>

<!-- 引入在线的开发版本核心包 -->
<!-- 引入核心包后全局可使用VUE构造函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    // 创建VUE实例
    const app = new Vue({
            el: '#app',//指定VUE管理的是哪个盒子
            //通过data提供数据
            data: {
              msg: 'helloWorld',
              count:666
            }
          })
</script>

</body>
</html>

预览效果

总结

TIP：

1，vscode需要安装open in browser才能使用alt+b预览当前html

2、每次更改代码后需要ctrl+s手动保存

3、vue的{{}}语法，用于拿到data中的数据