创建vue组件

创建一个待办事项组件
在应用程序中使用组件
props让组件动态化(数据更新)
- 注册props
- 使用props内的变量 {{}}
- props 类型
Vue如何持久化数据状态
- vue的数据对象 data()
- v-bind将属性附加到组件上
使用外部package
接触到的组件库
- lodash
命令行
- 安装命令

创建一个待办事项组件

在component文件夹下创建文件ToDoItem.vu文件,打开文件；
添加<template></template>组件的模板部分；
在模板先添加<script>部分,在其中加上组件对象export default{}

<template></template><script>
export default {}
</script>

添加具体内容，需要注意：

一个vue组件内只能有一个根元素，所以需要一个div标签，包裹住模板<template>内的所有内容

<template><div></div>
</template><script>
export default {}
</script>

将具体内容写到div标签内，添加一个checkbox和label给复选框添加一个id和一个for属性

<template><div><input type="checkbox" id="todo-item" checked="false"/><label for="todo-item">My Todo item</label></div>
</template><script>
export default {}
</script>

在应用程序中使用组件

在App.vue中使用组件ToDoItem.vue

打开App.vue
使用import 和 components，添加ToDoItem.vue组件
文件名是大驼峰
使用时的元素名是连字符小写

<script>
import ToDoItem from "./components/ToDoItem.vue";export default {name: 'App',components:{ToDoItem}
}
</script>

使用

<template><h1>To-Do List</h1><ul><li><to-do-item></to-do-item></li></ul>
</template>

props让组件动态化(数据更新)

通过在组件中添加props来实现组件的动态化，props与函数输入类似，props的值影响组件显示的初始状态。

作用:props是用于Vue中父组件向子组件传值的时候使用。

props的传递是单向的。

注册props

第一种方式是，以字符串数组的方式列出props，数组中的每个实体对应一个prop名称。
第二种方法是将props定义为一个对象，每个key对应于prop名称。将props列为对象允许您指定默认值，将props标记为required，执行基本的对象类型(特别是 JavaScript 基本类型) ，并执行简单的prop校验。

对ToDoItem组件使用对象注册法：

打开ToDoItem.vue组件。
在默认导出 default{} 对象中添加一个props属性，该props属性含有一个空对象。
在空对象内添加两个key – lable，done
label prop是一个带有两个属性的对象。

required属性是true，这告诉vue，我们希望每个ToDoItem组件都必须有label字段。如果没有label字段，vue会警告。（required选项来声明这个参数是否必须传入）
type 属性的值为JS中的String类型。这告诉vue，我们希望type是String类型的。

done prop有两个属性

default 属性，值为false。这说明没有done prop被传递给ToDoItem组件时，done prop的值是false。（ default与required 一般并不同时写，我们只在非required props里才需要 default ）
type 属性，值为Boolean。这告诉vue，我们希望这个prop的值是JS的Boolean类型。

使用props内的变量 {{}}

组件中定义的props对象内的key是可以在<template>内使用的变量，type是变量类型，required：true是要求必须传入的变量，default指定默认值。
props是一种单向数据绑定，组件永远不该改变自己的props的值
使用方式：

{{变量名}}

{{}} 是Vue中的一个特殊的模版语法，它能在template内打印类中定义的JavaScript表达式的结果，包括值和方法。重要的是， {{}} 里的内容是作为text文本显示。

由于label被标记为required，我们没有给它传递参数，所以调用这个组件的时候，在标签中给这个变量传入默认值。
label=“My ToDo Item”

<to-do-item label="My ToDo Item"></to-do-item>

props 类型

String
Number
Boolean
Array
Object
Date
Function
Symbol

Vue如何持久化数据状态

vue的数据对象 data()

vue的数据对象是一个函数，这可以保证数据值是唯一的。不要在data属性中使用箭头含数，箭头函数不利于从内部访问属性
结构如下：

data() {return {key: value}
}

data属性是一个函数，返回值是一个对象。
vue将所有的prop直接绑定到组件实例，所以可以直接使用this.done，为了保证key的唯一性，调用属性用别名isDone

<script>
export default {props: {lable: { required: true, type: String },done: { default: false, type: Boolean },},data() {return {isDone: this.done,};},
};
</script>

v-bind将属性附加到组件上

v-bind用于绑定数据和元素属性
v-bind表达式:

v-bind:attribute="expression"

使用实例:

<input type="checkbox" id="todo-item" v-bind:checked="isDone" />
//等价于,简写模式(更常用)
<input type="checkbox" id="todo-item" :checked="isDone" />

使用外部package

安装，使用命令行安装包

npm install --save lodash.uniqueid

导入，在<script>内的最上方导入模块

import uniqueId from "lodash.uniqueid";

使用，在data()的返回对象中使用

<script>
import uniqueId from "lodash.uniqueid";export default {props: {lable: { required: true, type: String },done: { default: false, type: Boolean },},data() {return {isDone: this.done,id: uniqueId("todo-"),};},
};
</script>

id: uniqueId(“todo-”)，加前缀’todo-'，结果是todo-编号

接触到的组件库

lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

命令行

安装命令

npm install xxx
安装项目到项目目录下，不会将模块依赖写入devDependencies或dependencies。npm install -g xxx
-g的意思是将模块安装到**全局**，不是安装到当前目录的项目下npm install --save xxx
-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。npm install -save-dev xxx
-save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

下一节:前端之渲染vue组件列表

前端之创建vue组件相关推荐

前端开发：Vue组件中的冒号用法
前言在前端开发过程中,关于Vue框架的使用是老生常谈,而且Vue组件的使用非常方便,但是有时候在开发中会忽略一些细节和不经意的知识点,尤其是刚入行的新晋开发者更是一知半解,在对Vue整体使用的时候会 ...
前端-可视化创建vue项目
注:以下操作是在已安装脚手架的基础上进行(如果出现可视化创建vue项目失败的情况,可能是脚手架版本的问题,建议安装更高版本的脚手架) 一.打开可视化界面第一步,视窗键+R,打开"运行&qu ...
使用VUE组件创建SpreadJS自定义单元格(二)
在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...
使用VUE组件创建SpreadJS自定义单元格(一)
作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用.前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强.对于Vue而言,模块化的体现集中在组件之上,以组件为 ...
Vue组件、Vue插件创建与使用
Vue组件作用 1.组件是vue的一个重要的特点 2.实现多人协作开发 3.通过组件划分降低开发的难度 4.实现复用,降低重复劳动组件解释组件就是定义好的一功能模块建议:多用props,少在组 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
【前端5】vue：实例，插值表达式，v-，组件
文章目录 1.vue安装:MVVM 2.案例:对象是vm,里面el等是构造参数 3.案例:num是数据即M,前端是V,这样交互简化了jquary(js) 4.vue实例:先绑定 5.vue对象的生命周 ...
GitChat · 前端 | Vue 组件库实践和设计
来自 GitChat 作者:周志祥更多IT技术分享,尽在微信公众号:GitChat技术杂谈前言现在前端的快速发展,已经让组件这个模式变的格外重要.对于市面上的组件库,虽然能满足大部分的项目,但是 ...
前端技术：Vue+elementUI 饿了吗UI+CRUD，创建图书管理系统
1.Vue框架 JavaScript升级版,JS它脚本语言,Vue框架语言它my生命,api工具类文章中心思想,有生命力 Vue框架思想,MVVM框架思想,数据驱动思想,组件化思想 2.j2ee框 ...

前端之创建vue组件