Vue入门详解之Vue实现hello world!
前几天搞了从入门到放弃系列的Vue文章,发现每篇文章有点乱,可能思路不太清晰,用了几天发现Vue,恩,真香!继续来搞Vue,接下来详细介绍Vue入门,本篇来看一下Vue入门级程序Hello World!
首先看一下Hello world程序Vue的实现方式!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello Vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{content}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
content:"hello Vue!"
}
})
setTimeout(()=>{
app.$data.content="Bye Bye Vue";
},2000)
</script>
</body>
</html>首先在js文件中我们要新建一个Vue实例,所以我们要进行new一个Vue,在这个实例对象中,存在一个el表示需要使用Vue渲染的区域,data是数据层,在html调用{{content}},双花括号,里面调取数据层的数据,既可渲染完毕!app表示这个Vue实例,$data是这个Vue的数据层,Vue采用的是MVVM模式,即数据和视图层是双向绑定,数据层改变同时视图层也同时被渲染了.定时器2s后修改app.$data.content的内容发现,2s后页面内容自动刷新
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读