vue再读6-vue的helloworld
  TEZNKK3IfmPf 2024年03月22日 87 0
#### 2.2 HelloWorld

> 作用:将数据应用在html页面中

1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象 new Vue();
4. 设置Vue实例的选项:如el、data...
new Vue({选项:值});
5. 在<div id='app'></div>中通过{{ }}使用data中的数据
<!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>
<!-- 数据渲染界面 -->
<div id="app">
<p>{{msg}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
//模板ajax返回的数据
data: {
msg: '我是歌谣'
}
})
</script>
</body>

</html>

vue再读6-vue的helloworld

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年03月22日 0

暂无评论

推荐阅读
TEZNKK3IfmPf