一、概述

一个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. 在Linux 中如何从进程相关的文件描述中恢复数据

    在Linux中误删除了某个文件,但是 ps-ef|grep 文件名 发现某个进程还在使用该文件,那么可以通 过以下方式恢复文件. 例如:创建一个简单文件/tmp/test.txt, 随便向里面写点内容 ...

  2. 【独家】终生受用的Redis高可用技术解决方案大全

    最近很多朋友向我咨询关于高可用的方案的优缺点以及如何选择合适的方案线上使用,刚好最近在给宜人贷,光大银行做企业内训的时候也详细讲过,这里我再整理发出来,供大家参考,如有不妥之处,欢迎批评指正,也欢迎推 ...

  3. win10系统jdk安装和环境变量配置

    新换电脑的原因,要重新安装jdk,完整记录一下安装过程 jdk版本用的1.7(公司默认版本) 这是jdk安装目录   更改为D:\jdk\java\jdk1.7 安装jre目录  更改为D:\jdk\ ...

  4. NGINX转发代理情况下，获取客户单真实IP

    编译时加上http_realip_module 模块 realip模块生效的前提是:直接连接nginx的ip是在set_real_ip_from中指定的. 原机配置: set_real_ip_from ...

  5. django模板-if标签和for标签

    在django中,标签写在{%  标签  %}中 if else标签 ①通过if进行条件判断 views.py from django.shortcuts import render def inde ...

  6. Django XSS攻击

    Django XSS攻击 XSS(cross-site scripting跨域脚本攻击)攻击是最常见的web攻击,其特点是“跨域”和“客户端执行”,XSS攻击分为三种: Reflected XSS(基 ...

  7. vue.js not detected 解决办法-vue.js devtools 安装

    国外网站:https://www.crx4chrome.com/ 国内网站:http://www.cnplugins.com/ http://chromecj.com/web-development/ ...

  8. Computer Study

    2017.12.15日开始制定长期学习计划: 大二上: 目前短期计划: 1.每天一道PAT乙级(弄完PAT乙级)+校OJ(打基础).   2.先复习C++,17周后开始复习数据结构.(补任务  刚刚发 ...

  9. javaScript中ajax、axios总结

    一.原生js实现ajax请求: 步骤: get请求: // 1.创建一个XMLHttpRequest的对象. var xml=null; //初始值设为空 if(XMLHttpRequest){ xm ...

  10. Auth组件,Forms组件

    一.Auth组件默认auth_user表常用操作 #1.配置settings,使django与数据库连接 DATABASES = { 'default': { 'ENGINE': 'django.db ...