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

核心步骤

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中的数据

相关推荐
高林雨露6 分钟前
Java对比学习Kotlin的详细指南(一)
java·学习·kotlin
安建资小栗子22 分钟前
2025年汽车加气站操作工备考题库
笔记
齐尹秦1 小时前
HTML5 Web Workers 学习笔记
笔记·学习
_未知_开摆1 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
DarkBule_1 小时前
零基础驯服GitHub Pages
css·学习·html·github·html5·web
喝拿铁写前端1 小时前
不同命名风格在 Vue 中后台项目中的使用分析
javascript·vue.js
余多多_zZ2 小时前
鸿蒙学习手册(HarmonyOSNext_API16)_应用开发UI设计:Swiper
学习·ui·华为·harmonyos·鸿蒙系统
淬渊阁2 小时前
汇编学习之《扩展指令指针寄存器》
汇编·学习
lalapanda2 小时前
UE5学习记录part12
学习·ue5
lvbb662 小时前
框架修改思路
前端·javascript·vue.js