<style lang="stylus"> .my-component h2 color red </style> <template lang="jade"> div.my-component h2 Hello from {{msg}} </template> <script lang="babel"> // 利用 Babel 编译 ES2015 export default { data () { return { msg: 'Hello from Babel!' } } } </script>
这样的组件格式，把一个组件的模板、样式、逻辑三要素整合在同一个文件中，即方便开发，也方便复用和维护。另外，Vue.js本身支持对组件的异步加载，配合Webpack的分块打包功能，可以极其轻松地实现组件的异步按需加载。
其他特性
Vue.js还有几个值得一提的特性：
异步批量DOM更新：当大量数据变动时，所有受到影响的watcher会被推送到一个队列中，并且每个watcher只会推进队列一次。这个队列会在进程的下一个 “tick” 异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作，也可以保证所有的DOM写操作在一起执行，避免DOM读写切换可能导致的layout。
动画系统：Vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的CSS Transition或Animation效果，还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。
可扩展性：除了自定义指令、过滤器和组件，Vue.js还提供了灵活的mixin机制，让用户可以在多个组件中复用共同的特性。
利用new Vue()创建一个Vue实例
我们可以先初始化一个html页面，然后我们需要引入Vue 的 JS 文件。引入的方式有很多，我们可以在script中引入Vue的cdn，或者去官网上下载Vue的min.js，或者用 npm 安装一个Vue的依赖。方便起见，本文中就用cdn引入。
<!DOCTYPE html> <html> <head> <title>从零开始学Vue</title> </head> <body> <script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script> </body> </html>
当你在开发过程中，确保你使用的是没有压缩过的版本，因为没有压缩的版本会提供有用的详细的警告，将会给你的代码书写节省很多时间。
我们先在body里面写入一个div，并且创建一个Vue实例，然后将实例和div绑定起来。
当你创建一个新的Vue实例的时候要使用Vue()构造器，然后在你的实例中指出你的挂载点。这个挂载点就是你想要划分出来的Vue实例的边界。挂载点和实例边界是一一对应的，你只能在挂载点上处理你实例边界内的事务，而不能在你的挂载点上处理实例边界外的事务。
在Vue实例中设置挂载点的参数是 “ el ”，el 的值可以用dom元素定义。
<!DOCTYPE html> <html> <head> <title>从零开始学Vue</title> </head> <body> <div>这中间就是实例挂载点的实例边界</div> <script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script> <script> // 创建一个新的Vue实例，并设置挂载点 var V = new Vue({ el : '#vueInstance' }); </script> </body> </html>
就像你在上面看到的那样，new一个Vue()就能创建一个新的实例，然后指定一个DOM元素作为实例的挂载点。定义挂载点的时候，我们用到了css选择器的id来定义。实例化的名字也可以自己来定义，以便之后调用。
利用v-model进行双向数据绑定
我们可以用v-model对input输入框进行绑定，从而我们可以使用动态的获取数据对象的值。你可以认为v-model是一个指定的属性，就像html元素的属性。这里的双向数据绑定可以用在很多表单元素上，比如input、textarea、select。
Vue利用v-model这个指令绑定了一个数据，而这个数据是我们希望能够通过用户输入操作而更新的数据。
比如我们下面这个例子，我们要在input标签上绑定数据name，我们需要在Vue实例中的data对象中实现声明。
<div> 输入您的姓名: <input type="text" v-model="name"> </div>
<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>//之后这行会省略 <script> var V = new Vue({ el : '#vueInstance', data : { name : '_Appian' } }); </script>
无论用户输入多少次，这个name都会被自动更新。并且，如果name的值被改变了，其他有映射name的地方的值也会被修改。
这种input框和映射的同步修改的原因，就是利用v-model这个指令，让数据通过底层的数据流进行绑定后直接修改。这就是数据的双向绑定的概念。
为了证明这个概念，我们可以利用$data打印出数据的映射来看看。
<div> 输入您的姓名: <input type="text" v-model="name"> <p>{{ $data | json }}</p> //#1 <p>{{ name }}</p> //#2 </div>
<script> var V = new Vue({ el : '#vueInstance', data : { name : '_Appian' } }); </script>