核心步骤:
1.准备容器
2.引包(官网)-开发版本(开发过程中使用)/生产版本(上线后使用)
官网:
1)vue2:Vue.js
2)vue3:Vue.js - 渐进式 JavaScript 框架 | Vue.js
开发版本:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
生产版本:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
3.创建Vue实例 new Vue()
4.指定配置项->渲染数据
1)el指定挂载点
2)data提供数据
<div id="app">
{
{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
msg:'Hello'
}
})
</script>
响应式特性
响应式数据:数据变化了,视图自动更新。
data中的数据是会被添加到实例上。
1.访问数据 实例.属性名
2.修改数据 实例.属性名=新值