Day 8. 声明式渲染-跟Vue说Hello

开始Hello Vue前先插播一个错误调试工具- Vue.js devtools
这个chrome浏览器开发套件，是个好用的debug工具，可以在检查组件的相关资料，且可查看 Vuex 的事件与资料的变化，大大提高了除错的效率。

安装方式
直接到chrome 线上应用程序商店下载安装

安装完成後，chrome浏览器右上角会出现一个V字的图示

当访问Vue项目页面时，该V字图示则会变成会变成绿色

声明式渲染 vs命令式渲染

• 声明式: 我们只要声明程序应该要做到什麽，不需要关心具体怎麽实现，只要程序直接做出效果就好。
• 命令式: 需要一步一步告诉程序要到哪里、做什麽(拿什麽资料出来、如果观测到资料变化，要放到哪里)，并关注它如何实现。

Hello Vue!
学习每个程序都从最简单的 Hello World 范例开始
Vue.js 的核心使用简单的模板语法来将数据渲染进网页的DOM系统中
先在body中创建一个id为app的div标签，并声明一个变量message

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

当我们引入Vue.js的时候呢，会声明一个全局变量Vue({ })
new Vue的时候，需要注意传递一个对象作为参数(此处的app)，这个对象有两个非常重要的属性:

• el(element): 绑定 html 档的标签，利用id选择器的方式绑定一个div (操控HTML 里 id 为 app 的 div )。
• data: 是一个用於保存数据的物件，我们在html使用了哪些变量就需要在data里面声明这些变量，这些变量以双大括号写在 html 中，并与 data 中的同名对应属性单向绑定。属性可以赋予各种型别的值：数值、字串、布林值、阵列等等。

<script>
 var app = new Vue({
     el: '#app',
     data: {
       message: 'Hello Vue!'
     }
   })
 </script>

执行结果
按下F12选择Vue我们也能看到里面有我们的变量

参考资料
声明式渲染