前端之创建vue组件

创建一个待办事项组件

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

<template>

</template>

<script>
export default {
  
}
</script>

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

• 一个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

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

<script>
import ToDoItem from "./components/ToDoItem.vue";

export default {
  name: 'App',
  components:{
    ToDoItem
  }
}
</script>

3. 使用

<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组件使用对象注册法：

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

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

5. 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

1. 安装，使用命令行安装包

npm install --save lodash.uniqueid

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

import uniqueId from "lodash.uniqueid";

3. 使用，在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组件列表