您的位置:首页> 日志> 前端技术 正文
DTOP

vue组件学习小实例

chenke | 2020年04月10日 |

>>收藏本文 已有 0条评论

一、组件理解:

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

2、注册组件语法格式:

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

3、组件调用:<tagName></tagName>

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

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

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

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

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

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

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

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

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

<template> 
    <div>
     <header class="header">{{ msg }}</header>
   </div>
</template>
<script>
export default {
  name: 'vheader',
  data () {
    return {
      msg: '页面头部'
    }
  }
}
</script>
<style scoped>
header{font-size:30px;font-weight:bold;border: 1px solid #000;margin-bottom: 20px;text-align: center;}
</style>

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

<template> 
    <div id="app">
      <vheader></vheader> 
      <h1>汽车介绍</h1>    
      <ul v-for="car in cars":key="index">        
        <li >
           品牌:{{car.name}}
        </li>
        <li >
           颜色:{{car.color}}
        </li>
        
      </ul>
      <vfooter></vfooter> 
    </div>
</template>

<script>
import vheader from'@/components/views/vheader'
import vfooter from'@/components/views/vfooter'
export default {  
  data () {
    return {
      cars:[]
    }
  },
  mounted(){
    let c={
      name:"保时捷 ",
      color:"黑色",

    }
    this.cars.push(c)
  },
  components:{
    vheader,vfooter    
  }
}
</script>

<style scoped>
ul {  list-style-type: none;  padding: 0;}
li {  display: inline-block;  margin: 0 10px;}
</style>

4、修改E:\project01\src下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: '<vlist/>',
 components: {vlist}  
})

5、修改E:\project01\src\router下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/  刷新后显示如下: