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

相关推荐
吴鹰飞侠15 分钟前
AJAX的学习
前端·学习·ajax
JNU freshman21 分钟前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼25 分钟前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
我是日安38 分钟前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
我的xiaodoujiao1 小时前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 19--测试框架Pytest基础 3--前后置操作应用
python·学习·测试工具·pytest
lzj_pxxw1 小时前
嵌入式开发技巧:舍弃标志位,用宏定义函数实现程序单次运行
笔记·stm32·单片机·嵌入式硬件·学习
江苏世纪龙科技1 小时前
【世纪龙科技】新能源汽车动力电池拆装与检测虚拟实训软件介绍
学习
润 下1 小时前
C语言——回调函数的典型示例(分析详解)
c语言·开发语言·人工智能·经验分享·笔记·程序人生
朝新_1 小时前
【EE初阶 - 网络原理】传输层协议
java·开发语言·网络·笔记·javaee