引入原生js_vue简单实例对比原生的JavaScript

如果你没有学过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 来说实时跟踪，数据的变化，最后一次性的更新到页面上。