vue组件简单介绍与使用
2016-09-03 17:52
946 查看
简单记录一下vue的使用方式和大致流程,参照官方栗子。
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
vue组件使用主要分为3部分,声明组件模板、注册组件、创建组件实例*
全局注册组件demo-grid,传入一个选项对象(自动调用 Vue.extend)
Vue.component(‘demo-grid’, { /* … */ })
js部分
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
vue组件使用主要分为3部分,声明组件模板、注册组件、创建组件实例*
template
<!-- component template --> <script type="text/x-template" id="grid-template"> <table> <thead> <tr> <th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}"> {{key | capitalize}} <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"> </span> </th> </tr> </thead> <tbody> <tr v-for=" entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]"> <td v-for="key in columns"> {{entry[key]}} </td> </tr> </tbody> </table> </script>
组件注册
对于template初始状态是一个script中的html,加上type=”text/x-template”特殊的type,然后根据id和type过滤 0获取script元素获取其中的html,获取到模板内容// 注册组件 //关于组件中的this,执行Vue.component会根据组件名来创建的一个function对象,然后然后用原型方式继承Vue对象。 //所以这里的demo-grid会创建一个DemoGrid对象,,this指向DemoGrid对象 Vue.component('demo-grid', { //组件模板 ,可以使script形式,也可以使用html template: '#grid-template', //是否替换原标签 replace: true, //参数定义 //data: Array中data为参数名称,Array为参数类型验证,支持自定义函数验证 //原生构造器String,Number,Boolean,Function,Object,Array props: { data: Array, columns: Array, filterKey: String }, //数据初始化 data: function () { var sortOrders = {} this.columns.forEach(function (key) { sortOrders[key] = 1 }) return { sortKey: '', sortOrders: sortOrders } }, //组件模板中事件声明 methods: { sortBy: function (key) { this.sortKey = key this.sortOrders[key] = this.sortOrders[key] * -1 } } })
全局注册组件demo-grid,传入一个选项对象(自动调用 Vue.extend)
Vue.component(‘demo-grid’, { /* … */ })
创建实例
html部分<div id="demo"> <form id="search"> Search <input name="query" v-model="searchQuery"> </form> //组件标签,注册过的demo-grid组件将会在这个地方渲染 //:data="gridData"为默认单向绑定 //:data.sync="gridData"双向绑定 //:data.once="gridData"单次绑定 <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"> </demo-grid> </div>
js部分
//创建实例 var demo = new Vue({ //指定根元素,根元素下面的所有被声明的组件标签都会执行组件化操作 el: '#demo', //传参给组件, 4000 如果组件有参数声明;没有则忽略,多余的参数传递不会报错 data: { searchQuery: '', gridColumns: ['name', 'power'], gridData: [ { name: 'Chuck Norris', power: Infinity }, { name: 'Bruce Lee', power: 9000 }, { name: 'Jackie Chan', power: 7000 }, { name: 'Jet Li', power: 8000 } ] } })
相关文章推荐
- Android Design Support Library 中控件的使用简单介绍(一)介绍 在这个 Lib 中主要包含了 8 个新的 material design 组件!最低支持 Android
- 21-Vue单文件组件的使用方式介绍
- vue.js的简单使用及组件套用
- 四大组件之service简单介绍和AIDL的简单使用
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 使用Vue组件实现一个简单弹窗效果
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- 简单介绍下我使用了一年多还不知道的Sql server 2005 组件知识
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- vue-cli之组件的简单使用
- 解决vue组件中使用v-for出现告警问题及v for指令介绍
- vue 自定义全局方法,在组件里面的使用介绍
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- Vue单文件组件的如何使用方式介绍
- Intelligencia.UrlRewriter简单介绍(urlRewrite组件使用简单介绍)