如果你没有学过vue之前,想在页面上显示 Hello World ,你首想到是是否是这样子,
原生的js :
<div id = 'app'></div>
<script>
// 先定义字符串
var string = 'Hello World';
// 获取 html dom
var app = document.getElementById('#app');
// 最后显示数据(挂载更新到页面上)
app.innerHtml = string
</script>
又或者你对JQuery 很熟练,你可能会这样子实现
<script src="./jquery.js"></script> // 假设你已经下载了JQuery
<div id='app'></div>
<script>
$(document).ready(function(){
$('#app').text('Hello World')
})
</script>
这个时候你会发现JQuery 真的太好用了,真的是太方便,太实用了,省去了document.getElement 等等一系列的语法,我爱上了JQuery ,我太爱JQuery了,
但是敏锐的你,你会发现html dom 只是手段,你想真正想要的只是数据显示在元素上,只不过JQuery 让我们简化了绑定html dom ,实用起来更加便捷,但实际上还是在操作html dom ,我们都知道操作html dom 去更新页面很耗资源,他要从新加载新dom 树,解析等一系列的操作,随着现代前端的发展,一个页面的功能和交互越来越多,当要从新加载新的dom 树,就显得尤为苦难,浪费的资源就很多,加载的时间就会很长,那么有什么办法解决着着难题呢? vue 就是其中的一个,下面我们来看一个vue 简单的实例,看看vue 跟原生的JavaScript 的区别:
同样的,首先引入 vue
<script src= './vue.js'></script>. // 同样的,我们也假设你下载了vue
在html中也是差不多
<div id='#app'>{{message}}</div>
// {{}} 是插值表达式, message 式占位符 vue解析后所要替换掉的
<script >
var. vm = new Vue({
el:'#app', // 这里是挂载(绑定),做了这一步之后呢,相当于app 这个div 跟vue 实例绑定了, 在这个容器(div)里,就可以用vue来操作了
data:{
message:'Hello World'
}
})
</script>
最后,在页面上展示的效果肯定是Hello World 而不是{{message}},此时的message已经被vue 解析成了 Hello World
当你了解了vue 之后,你是否会发现,这里并没有出现document.getElementById等操作dom的语法, 它只是对我们的数据进行了操作,这就是vue 其中的奥秘之处,它内部创建虚拟dom 来说实时跟踪,数据的变化,最后一次性的更新到页面上。