vuejs 自定义了一种.vue文件，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。 在webpack构建中，需要安装vue-loader 对.vue文件进行解析。在 sumlime 编辑器中，我们 书写.vue 文件，可以安装vue syntax highlight 插件，增加对文件的支持。
用vue-cli 新建一个vue项目，看一下.vue文件长什么样？ 在新建项目的过程中，命令行中会询问你几个问题，当询问是否安装vue-router 时，这里先选择否。项目完成后，我们看到src 目录下有一个componet 目录，里面有一个 Hello.vue 文件，内容如下，这里对template 里面的内容做了一些删减
<template> <div> <h1>{{ msg }}</h1> <h2>Essential Links</h2> </div> </template> <script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
可以看到，在 .vue 文件中， template 中都是html 代码，它定义了在页面中显示的内容，由于里面还有变量，也可以说定义了一个模版；script中都是js 代码，它定义这个组件中所需要的数据和及其操作，style 里面是css 样式，定义这个组件的样式，scoped 表明这里写的css 样式只适用于该组件，可以限定样式的作用域。
script 标签中 export defalut 后面的对象的理解。
在不使用.vue 单文件时，我们是通过 Vue 构造函数创建一个 Vue 根实例来启动vuejs 项目，Vue 构造函数接受一个对象，这个对象有一些配置属性 el, data, component, template 等，从而对整个应用提供支持。
new Vue({ el: '#app', data: { msg: "hello Vue" } })
在.vue文件中，export default 后面的对象 就相当于 new Vue() 构造函数中的接受的对象，它们都是定义组件所需要的数据（data）, 以及操作数 据的方法等， 更为全面的一个 export default 对象，有methods, data, computed, 这时可以看到, 这个对象和new Vue() 构造函数中接受的对象是一模一样的。但要注意data 的书写方式不同。在 .vue 组件, data 必须是一个函数，它return（返回一个对象），这个返回的对象的数据，供组件实现。
把项目中自带的hello.vue 内容清空，我们自己写一个组件来体验一下这种相同。
<template> <div> <input type="txet" placeholder="请输入文字" v-model="msg" @keypress.enter="enter"> <p>{{upper}}</p> </div> </template> <script> export default { data () { return { msg: 'hello' } }, methods:{ enter () { alert(this.msg); } }, computed: { upper () { return this.msg.toUpperCase(); } } } </script> <style scoped> input { width: 200px; height: 20px; } p { color: red; } </style>
页面中有一个input输入框，当进行输入的时候，输入框下面的内容会进行同步显示，只不过它是大写，当输入完成后，按enter键就会弹出我们输入的内容。获取用户输入的内容，我们用的是v-model 指令，这个指令将用户输入的内容绑定到变量上，并且它响应式的，我们的变量值会随着用户输入的变化而变化，也就是说我们始终获取的都是用户最新的输入。下面大写的显示，用的是computed属性，弹窗则是给绑定了一个keypress事件，通过描述，你会发现，它简直就是一个vue实例，实际上它就是个vue实例。每一个vue组件都是一个vue实例，更容易明白 export default 后面的对象了。
父子组件之间的通信
每一个.vue 文件就是一个 组件，组件和组件相互组合，就成了一个应用，这就涉及到的组件和组件之间的通信，最常用的就是父子之间的通信。在vue 中， 在一个组件中通过 import 引入另一个组件，这个组件就是父组件，被引入的组件就是子组件。
在我们这个vue-cli 项目中，src 文件夹下有一个App.vue 文件，它的script标签中，import Hello from './components/Hello'，那么 App.vue 就是父组件，components 文件夹下的Hello.vue 就是子组件。父组件通过props 向子组件传递数据，子组件通过自定义事件向父组件传递数据。
父组件向子组件传值, 它主要是通过元素的属性进行的. 在App.vue 的template中,有一个 <hello></hello>, 这就是我们引入的子组件. 给其添加属性如 mes-father="message from father"; 父组件将数据传递进去,子组件需要接收才能使用. 怎样接收呢?