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

相关推荐
桃子不吃李子20 小时前
axios的二次封装
前端·学习·axios
明明真系叻20 小时前
最优传输理论学习(1)+PINN文献阅读
深度学习·学习
笨鸟笃行21 小时前
百日挑战之单词篇(第三天)
学习
im_AMBER1 天前
Leetcode 31
学习·算法·leetcode
一个处女座的程序猿O(∩_∩)O1 天前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
Miqiuha1 天前
观察者模式学习
学习·观察者模式
百锦再1 天前
破茧成蝶:全方位解析Java学习难点与征服之路
java·python·学习·struts·kafka·maven·intellij-idea
雨奔1 天前
Django 学习路线图
学习·django·sqlite
老王熬夜敲代码1 天前
C++继承回顾
c++·笔记
麦麦大数据1 天前
F034 vue+neo4j 体育知识图谱系统|体育文献知识图谱vue+flask知识图谱管理+d3.js可视化
javascript·vue.js·知识图谱·neo4j·文献·体育·知识图谱管理