vue组件开发

1. 概念

vue是一套构建用户界面的 渐进式框架，通过简洁的API提供高效的mvvm数据绑定和灵活的组件系统

安装

独立版本

下载vue.js（http: cn.vuejs.org/v2/guide/installation.html）
在html页中引用vue.js: <script src="js/vue.js"></script>

Npm安装

在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或Browserify 模块打包器配合使用。

npm install vue

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$  vue init webpack my-project

# 安装依赖

$ cd my-project

$ npm install

$ npm run dev

使用

<!-- 模板-->

<div id= "app" >

    <p> {{ message }} </p>

</div>

<script>

创建一个ViewModel实例

  new Vue({

      //选择目标元素

      el: '#app',

      //提供初始数据

      data: {

            message: 'Hello Vue.js!'

      }

 })

</script>

渲染结果：

<div id= "app" >

   <p> Hello Vue.js! </p>

</div>

在Vue.js的设计中将组件作为一个核心概念。可以说，每一个Vue.js应用都是围绕着组件来开发的。

//注册一个Vue.js组件

Vue.component('my-component', {

    // 模板

    template: ' <div> {{ msg }} {{ privateMsg }} </div> ',

    // 接受参数

    props: {

        msg: ‘hello’    

    },

    // 私有数据，需要在函数中返回以避免多个实例共享一个对象

    data: function () {

        return {

            privateMsg: 'component!'

        }

    }

})

注册之后即可在父组件模板中以自定义元素的形式调用一个子组件：

<my-component msg= "hello" ></my-component>

渲染结果：

<div> hello component! </div>

Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项，但最核心的是以下几个：

• 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
• 初始数据（data）：一个组件的初始数据状态。
• 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。
• 方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
• 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一些自定义的逻辑。

基于构建工具的单文件组件格式

在构建大型应用时，推荐使用Webpack+vue-loader这个组合以使针对组件的开发更高效。可以用这样的单文件格式 (*.vue) 来书写Vue组件：

< style >

. my - component h2 {

  color: red;

}

</ style >

< template >

  < div class = "my-component" >

    < h2 > Hello from {{msg}} </ h2 >

    < other - component ></ other - component >

  </ div >

</ template >

< script >

  import otherComponent from './other-component'

// 或者var otherComponent = require( './other-component' )

// 导出组件定义

module . exports = {

  data: function () {

    return {

      msg: 'vue-loader'

    }

  },

  components: {

    'other-component' : otherComponent

  }

}

</ script >

这样的组件格式，把一个组件的模板、样式、逻辑三要素整合在同一个文件中，即方便开发，也方便复用和维护。