vue组件开发

1. 概念

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

安装

独立版本

下载vue.js（http: cn.vuejs.org/v2/guide/installation.html）
在html页中引用vue.js:

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

使用

id= "app" >

   

{{ message }}

渲染结果：

id= "app" >

  

Hello Vue.js!

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

//注册一个Vue.js组件

Vue.component('my-component', {

    // 模板

    template: '

{{ msg }} {{ privateMsg }}

',

    // 接受参数

    props: {

        msg: ‘hello’    

    },

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

    data: function () {

        return {

            privateMsg: 'component!'

        }

    }

})

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

msg= "hello" >

渲染结果：

hello component!

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 >

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