您的位置: 首页 >>日志>>前端技术>详细内容

前端技术

vue组件学习小实例

来源:本站原创 发布时间:2020-04-10 09:35:30 浏览次数: 【字体:

一、组件理解:

1、组件可以是说vue最核心的了,它可以扩展 HTML 元素,封装可重用的代码。组件就像我们布局的模板可以相互之间引用。官方的理解是项目抽象为一个组件树。

2、注册组件语法格式:

Vue.component(tagName, options),tagName 为组件名,options 为配置选项。

3、组件调用:

4、组件中的data必须是函数

5、组件通过props属性来声明一个自己的属性,然后父组件就可以往里面传递数据。

6、通过props属性,父组件可以向子组件传递数据,而子组件的自定义事件就是用来将内部的数据报告给父组件的。

7、通过使用保留的元素,动态地绑定到它的 is 特性,可以让多个组件使用同一个挂载点,并动态切换:

二、简单项目组件应用步骤:

1、环境搭建及要求(不再叙述)nodejs+npm+vue+vue-cli+webpack,安装好后文件基本上是这样的,路径自己选择,项目名称自己命名就可以了。

2、启动运行项目:npm run dev

3、修改默认的配置和文件,我的项目路径是:E:project01srccomponentsviews,在下面新建三个组件

vheader.vue组件是项目通用的头部,内容如下:



vlist.vue组件是列表显示及组件,内容如下:





4、修改E:project01src下main.js文件

import Vue from 'vue'
import vlist from './components/views/vlist'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '',
 components: {vlist}  
})

5、修改E:project01srcrouter下index.js文件

import Vue from 'vue'
import Router from 'vue-router'
//list
import vlist from'@/components/views/vlist'
Vue.use(Router)
export default new Router({
 routes: [  
  {
     path: '/vlist',
     name: 'vlist',
     component: vlist
   }
 ]
})

6、浏览器输入http://localhost:8080/  刷新后显示如下: