一、概述

一个vue文件主要由三个部分组成：模板页面、js模块对象、css样式。

组件： 组件是一个局部功能界面，它包含了所有要实现这个功能界面的相关资源，如css、html等.

组件化编码的基本流程
1)  拆分界面, 抽取组件
2)  编写静态组件
3)  编写动态组件
　　初始化数据, 动态显示初始化界面；
　　实现与用户交互功能；

二、使用

以下主要演示组件化编码的过程，首先定义一个子组件HelloWorld.vue、然后在在根组件App.vue中引入子组件，

在main.js中将App.vue渲染到主页面index.jsp中去。

1. 组件化编程的步骤

(1) 首先定义一个子组件：HelloWorld.vue

<template>

  <div>

    <h2 class="title">{{msg}}</h2>

  </div>

</template>

<script>

  // 自定义一个子组件

  // 这是默认的写法

  // 向外默认暴露一个配置对象（与vue一直）

  export default {

    // data : {}  // 对象，这里不可以写

    data () { // data里面可以写对象，也可以写函数，但是在组件里面必须写函数

      return {

        msg: '第一个Vue组件'

      }

    }

  }

</script>

<style scoped>

  .title {

    color: red;

    background: yellow;

  }

</style>

(2) 根组件App.vue：在根组件里面使用子组件,最终要将改组件渲染到index.html页面上去

<template>

  <div>

    <img src="./assets/logo.png" alt="logo" class="logo">

    <!--3.使用组件标签-->

    <HelloWorld/>

  </div>

</template>

<script>

  import HelloWorld from './components/HelloWorld.vue' // 1. 引入自己定义的子组件

  export default {

    components: { // 2.映射组件标签(通过这个配置，将子组件映射成<HelloWorld>标签，这里的HelloWorld是HelloWorld:HelloWorld的简写)

      HelloWorld

    }

  }

</script>

<style>

  .logo {

    width: 100px;

    height: 100px;

  }

</style>

(3) 入口js：main.js

/*

入口JS

 */

import Vue from 'vue' // 引入vue

import App from './App.vue' // 1.引入App组件

// 创建vm实例, 最终的目的是将App组件渲染到index页面中去

/* eslint-disable no-new */

new Vue({

  el: '#app',

  components: {App},  // 2.映射成标签：通过这个配置，将组件映射成指定名称的一个标签(即这里的标签名叫App), 这里{App}可以写成{App:App}

  template: '<App/>' // 3.使用组件标签：指定需要渲染到页面的模板，这个模板会插入到 '#app'中(el所匹配的页面上的div中)

})

标签渲染也可以采用如下的简化写法：

/*

入口JS

 */

import Vue from 'vue'

import App from './App.vue'

import store from './store'

import './base.css'

// 创建vm

/* eslint-disable no-new */

// new Vue({

//   el: '#app',

//   components: {App}, // 映射组件标签

//   template: '<App/>', // 指定需要渲染到页面的模板

//   store // 所有的组件对象都多了一个属性: $store(值就是store对象)

// })

// 这是比较简洁的写法

new Vue({

  el: '#app',

  //箭头函数是用来定义匿名函数的，接收一个参数h, 而这个参数是函数类型的，这个是用来创建元素标签的(根据组件来创建)，这里是根据App组件来创建来创建所对应的标签<App/>,

  //返回的结果最终会插入到el所对应的div中去

  render: h => h(App), // 渲染函数, '=>'有两个作用：代表是一个函数;代表return   这个渲染函数代替了components、template的功能

  store

})

// 原始方式

// new Vue({

//   el: '#app',

//   render: function (createElement) {

//     return createElement(App) //更具组件创建一个元素标签，相当于返回了<App/>标签，而这个<App/>标签会被插入到'#app'中去

//   },

//   store

// })

(4) index.html: 这个页面基本上没有做任何的配置

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>vue_blank</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

 

3.1 vue组件的使用的更多相关文章

  1. vue组件

    分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...

  2. vue组件的配置属性

    vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...

  3. vue组件，撸第一个

    实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...

  4. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  5. JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  6. vue组件大集合 component

    vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...

  7. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  8. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

  9. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  10. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

随机推荐

  1. 五一 DAY2

    DAY 2 比如:依次输入 3 1 5 4 2                                        插入 6 这里FZdalao有一个很巧妙的构造,直接吧输入的数字排成一个二 ...

  2. Django框架----外键关联

    app/models.py中: 创建班级表 class classes(models.Model): id = models.AutoField(primary_key=True) name = mo ...

  3. PHP官方文档和phpstorm配置指南

    http://cn2.php.net/manual/zh/ phpstorm安装——>next——>…… 下载PHP.exe 地址:http://www.php.net/ 配置interp ...

  4. Ajax解决csrf_token的不同方式

    ajax发送csrf_token的不同方式: 方式一: 在ajax发送之前,做好处理,用到了beforeSend方法,把csrf_token写入到Header头内,csrf_token去jquery. ...

  5. Linux 安装本地 yum源

    放入Centos6.4的镜像光盘或找到镜像文件 [root]#mount /dev/cdrom  /media/cdrom  #挂载本地镜像 [root]#rm -rf /etc/yum.repo.d ...

  6. [VS] - "包含了重复的“Content”项。.NET SDK 默认情况下包括你项目中的“Content”项。

    copy to :http://www.cnblogs.com/jinzesudawei/p/7376916.html VS 2017 升级至  VS 2017 v15.3 后,.Net Core 1 ...

  7. tp5 本地安装和调试的问题

    安装的时候用官方下载的包或者用composer指定版本号,不要用git,会安装最新的包. 本地配置域名的时候出错,要不就是500要不就是找不到文件,原因是目录路径里的反斜杆加字母t被转义了,改成正斜杠 ...

  8. bzoj 2844 albus就是要第一个出场 - 线性基

    题目传送门 这是个通往vjudge的虫洞 这是个通往bzoj的虫洞 题目大意 给定集合$S$,现在将任意$A\subseteq S$中的元素求异或和,然后存入一个数组中(下标从1开始),然后从小到大排 ...

  9. javascript对文件的读写

    整合了一下网上对于js实现文件读写的代码,但是该功能只能在ie浏览器下执行,另外有些电脑上的ie需要设置. 下面是写入代码: var fso = new ActiveXObject("Scr ...

  10. Oracle错误——ORA-01691: Lob 段SFZXP.SYS_LOB0000030381C00004$$无法通过8192（在表空间USERS中）扩展

    问题 Oracle报错:ORA-01691: Lob 段SFZXP.SYS_LOB0000030381C00004$$无法通过8192(在表空间USERS中)扩展 问题原因 Oracle数据表空间不足 ...