关于vue.js:Vue项目的第一个Hello-world组件Hello-Vue讨论一下Vue的核心特性以及webpack式开发的项目特点

上一节把一个Vue的残缺目录及其意义记录了一下，接下来就来写一个咱们的第一个Vue组件，一个最简略的Hello Vue

咱们在上回说的components文件夹上面新建一个HelloVue.vue文件。
而后在外面写上上面的代码：

<template>  <div>    <p>Hello, Vue!</p>    <p>{{msg}}</p>  </div></template><script>export default ({  name: 'HelloVue',  data () {    return {      msg: 'Fala oviara'    }  }})</script>

这样第一个组件咱们就算写好了。察看一下组件外部的一些小细节：

在template标签外部写咱们原先的html代码
在script标签外部写组件封装的JS代码
- 其中export default为当别的中央引入这个组件时，组件裸露给内部的办法、变量等等

当然，如果针对这个组件有非凡的款式需要的话，能够在这个组件文件里写style标签去申明款式

看一下咱们第一个Hello Vue组件进去的成果：
这里我想探讨两个Vue框架的个性。

申明式渲染
vue.js的外围是容许采纳简洁的模板语法来申明式地将数据渲染进 DOM
依据文档上形容，Vue中的数据都是以申明的形式渲染进DOM的，在Hello Vue中咱们用了一个最简略的模板，即：
```
// HTML<div id="app">  {{ msg }}</div>// JSvar app = new Vue({  el: '#app'  data: {      msg: 'Fala oviara'  }})
```
并且从此以后，msg这个变量就变成了响应式变量，咱们不用去辛辛苦苦操作DOM上的元素，而是在JS中去操作app这个Vue对象即可。也就是说组件中的所有数据，咱们都是在组件的对象里去操作，至于对象怎么变成HTML，所有都交给Vue就行了。响应式是什么意思呢？只有你在JS中批改了msg的值，（例如app.msg = 'another value'）HTML相应地就会被批改。
然而你们可能会发现，我下面的代码如同和文档上的不太一样？文档上新建了一个Vue的对象，而我的Hello Vue代码里并没有，这是怎么回事呢？这里就引出我想探讨的第二点：

Vue组件中须要新建Vue对象吗？

答案是不须要。这里就引申出咱们创立的vue我的项目的个性了，它是基于webpack开发模式的。我将来会用另一篇博文论述它和其余开发模式的不同。而这个开发模式最大的特点，就是整一个我的项目之中会有一个**入口文件**，在咱们这个我的项目中，就是main.js, 在这个文件里，咱们会申明一个Vue对象，这个对象就作为整个我的项目的App，所有其余的组件应该在这个app外面去援用。咱们写的组件，都会被vue的loader主动重载为实例或组件对象。

如果不明确这个个性，很可能会对组件的写法上产生一些纳闷或者误会。

Hello Vue的内容补充

所以，如果你是在我的项目之中写Hello Vue组件的，你可能会找不到本人写好的组件在哪里，因为入口文件中并找不到你刚刚写好的组件。之前我没有说的是，在我写好Hello Vue组件之后，还有一步就是把这个组件放到咱们的路由文件里。路由文件其实就是一个地图，通知你上哪去找咱们的组件。
在router > index.js中，

在文件头引入咱们的组件。

import HelloVue from '@/components/views/HelloVue'

在Router对象的routes属性外面新增加一个组件path对象：

    {      path: '/views/hellovue', // 门路      name: 'Hello,Vue', // 名称      component: HelloVue // 组件    }

这样一来，在URL中输出以下地址，就能让咱们我的项目APP的路由局部跳转到方才写好的Hello Vue外面了。

入口页面

地址栏写入http://localhost:8080/#/views/helloVue跳转：

当然，咱们一个我的项目中，页面的跳转必定不能让用户本人去地址输出，须要用一些按钮之类的点击跳转，这些内容当前再记录分享给大家。
通过第一个Hello Vue我的项目，咱们探讨了Vue框架的外围：申明式渲染，它带来的渲染个性，以及一个webpack式的Vue我的项目的特点。将来的博文还会持续摸索vue，目前为止，我还是很喜爱这个框架的 :P