VUE学习笔记1__创建VUE实例
核心步骤
<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指定管理的盒子
<!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中的数据
原文地址：https://blog.csdn.net/houmenghu/article/details/145127253
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！