基础代码结构
导入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
基础代码结构
<body>
//new的Vue实例会控制ID为app的div元素中的所有内容
//Vue实例所控制的这个元素区域,就是MVVM模式中的V
<div id="app">
</div>
<script>
//创建Vue实例
//当我们导入包以后,在浏览器的内存中,就多了一个Vue构造函数
//new出来的这个VM对象就是MVVM模式中的VM调度者
var VM=new Vue({
el:"#app"//表示Vue实例要控制的区域
//这里的data就是MVVM模式中的M,专门用来保存每个页面中的数据的
data:{//data属性中,存放的是el中要用到的数据
msg:"欢迎学习vue"
}
})
</script>
</body>
插值表达:{{}}
<body>
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
//将data里的msg的值放入到p标签里
<p v-cloak>{{msg}}</p>
</div>
<script>
var VM=new Vue({
el:"#app",
data:
msg:"欢迎学习vue"
}
})
</script>
</body>