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

相关推荐
花海如潮淹10 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
Andy杨1 小时前
20250718-5-Kubernetes 调度-Pod对象:重启策略+健康检查_笔记
笔记·容器·kubernetes
杭州杭州杭州7 小时前
Python笔记
开发语言·笔记·python
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
iFulling10 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
香蕉可乐荷包蛋10 小时前
AI算法之图像识别与分类
人工智能·学习·算法
谢白羽10 小时前
jenkins搭建笔记
运维·笔记·jenkins
xiaoli232710 小时前
课题学习笔记1——文本问答与信息抽取关键技术研究论文阅读(用于无结构化文本问答的文本生成技术)
笔记·学习
人生游戏牛马NPC1号11 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter