用vue实现helloworld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: '#app',
data: {
content: "hello world"
}
})
</script>
</body>
</html>
这段代码的意思是，首先创建一个vue实例，然后这个实例接受一些配置项，el这个配置项指实例负责管理的一些区域，意思是让让个vue实例去接管id=app这个dom便签里的所有的内容，data这个content这个数据，通过插值来调用data的数据。
改变数据的话...
如果用原生写，我们改变页面数据可能要这样
var dom = document.getElementById("app")
dom.innerHTML = "hello world"
setTimeout(function(){
dom.innerHTML = "bye world"
},2000)
但是我们换成VUE写的话就会变成这样
setTimeout(function(){
app.$data.content = "bye world"
},2000)
总的来说，就是我们不用再关注DOM上的操作，只关注数据改变就行。
网友评论