一、概述

一个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. 瀑布流之ajax

    wf_js.html(展示页) <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  2. 使用sqlalchemy用orm方式写pipeline将scrapy item快速存入 MySQL

    传统的使用scrapy爬下来的数据存入mysql,用的是在pipeline里用pymysql存入数据库, 这种方法需要写sql语句,如果item字段数量非常多的 情况下,编写起来会造成很大的麻烦. 我 ...

  3. mysqldump 使用小结

    语法: 备份某个数据库: mysqldump -uroot -p*** [options] –-databases DB_name > back_db_name.sql --databases: ...

  4. windows dhcp server

    windows7并没有自带dhcp server的功能,需要安装额外的软件,软件很小巧,只有几百K字节,下载地址http://www.dhcpserver.de/cms/download/ 假设解压路 ...

  5. 【题解】Luogu P2522 [HAOI2011]Problem b

    原题传送门 这题需要运用莫比乌斯反演(懵逼钨丝繁衍) 我们看题面,让求对于区间\([a,b]\)内的整数x和\([c,d]\)内的y,满足$ gcd(x,y)=k$的数对的个数 我们珂以跟容斥原理(二 ...

  6. 20145208 蔡野 《网络对抗》免考项目 MSF学习

    20145208 蔡野 <网络对抗>免考项目 MSF Exploit模块开发 题目:MSF Exploit模块开发 摘要 本免考项目的目标是通过对msf模块的设计语言--ruby和expl ...

  7. 写了个脚本将json换成md

    用python 脚本将protocol.json中的json按照templete.md模版生成,结果在protocol.md中 Python: #!/usr/bin/python # -*- codi ...

  8. scrapy 关于特殊字符的处理

    今天scrapy 发送一段url的时候,如下 http://apis.map.qq.com/lbscloud/v1/poi/search?poi_table=gas_station&key=R ...

  9. [翻译]使用VH和VW实现真正的流体排版

    前言 不像响应式布局,通过media query,设置几个变化点来适配,流体排版通过调整大小,适配所有设备宽度.这个方法可以使我们开发的网页,在几乎所有屏幕尺寸上都可以使用.但出于一些原因,它的使用率 ...

  10. Python3 tkinter基础 Label justify 多行字符串左对齐

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...