Vue入门（一）

现在前端被提及最多的就是vue，那么vue如何学习呢？接下来我准备用几篇内容来详细展示vue的学习历程。

Vue核心是允许一个采用简洁的模板语法来生命式地将数据渲染进DOM的系统。我们学习任何一门语言时都是先学习打印Hello World，这次也不例外，我们开始吧。

<div class="app">  {{ message }}</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({ el: '#app', data: {  message: 'Hello World!'  }  })  </script>

复制上面代码后保存打开文件预览，在页面上则显示Hello World。在这里app变量则为一个应用，el为指定哪个id容器来进行DOM渲染，必须以id来选中元素，其中data内message则为页面显示的元素，如果在html内运用data内数据，必须加{{}}大括号来使用，这个就是王八的脑袋——规定了。

我们打开页面后按下f12打开开发者模式，打开console（控制台），然后输入app.message后回车，会显示Hello World，然后输入app.message = '你好，世界'后回车，我们可以看到页面上的Hello World改成了“你好，世界”，这就是双向绑定的魅力所在，当元素值变化后，那么页面上也会自动改变，而并不需要我们使用Jquery进行后端请求来重新获取数据了。

除了我们在标签内部使用变量，我们也可以通过变量来绑定元素。我们看看有什么区别。

<div id="app">  <div class="test01" :title="title">我是绑定元素的div</div></div>

<script type="text/javascript">  var app = new Vue({   el: '#app',     data: {      message: 'Hello World!',      title: '你好啊'      }    })</script>

刷新页面后页面会出现“我是绑定元素的div”字样，当鼠标悬浮在内容上方几秒后，会显示“你好啊”字样，这样变量就绑定成功了。我们可以看到，如果需要绑定变量时，就需要在类似title的前面加“:”，同理也可以应用在style、class等，在值内直接使用下方data内的变量，而不再需要使用{{}}，这样也简化了我们的代码量。快来试试吧。

这篇文章我们讲述了如何在标签内部使用变量与标签如何绑定变量的方法，请大家认真试验，因为这两种方法的使用会在我们今后应用中大量出现。