Vue (7)

文章目录

  • 1. 单文件组件
    • 1.1 创建 .vue 文件
    • 1.2 vue 脚手架
      • 1.2.1 说明
      • 1.2.2 创建 vue 脚手架
      • 1.2.3 了解 vue_test 中的文件
      • 1.2.4 render 函数
    • 1.3 修改默认配置
    • 1.4 ref 属性
    • 1.5 props 配置项
    • 1.6 mixin 混入
    • 1.7 插件
    • 1.8 Scoped 样式
  • 2. 组件化编码流程
    • 2.1 TodoList 案例总结

前言

上文已经将非单文件的知识学习完了,下面就来学习一下单文件 组件.

1. 单文件组件


这里我们先来创建一个 .vue 文件


这里的文件命名 :


一个单词 : 1. 全小写 school.vue , 2. 首字母大写 School.vue


多个单词 : 1. my-school.vue , 2. MySchool.vue

1.1 创建 .vue 文件


图一 :


图二 :

1.2 vue 脚手架

1.2.1 说明


脚手架是 Vue 官方提供的标准化开发工具 (开发平台) , 简单来说 ,我们写完 .vue 文件 ,需要脚手架进行 转化 / 翻译 要不然浏览器是不认识的 .


文档 :Home | Vue CLI (vuejs.org)

1.2.2 创建 vue 脚手架


图一 :

Vue (7)_第1张图片


图二 :


淘宝镜像:npm config set registry https://registry.npm.taobao.org

1.2.3 了解 vue_test 中的文件


图一 :

Vue (7)_第2张图片


图二 :

Vue (7)_第3张图片


图三 :


图四 :

Vue (7)_第4张图片


引用 :解决创建Vue 组件编译时 报 should always be multi-word ( 无法创建单个单词的Vue组件) : http://t.csdn.cn/Haouw


到此我们的 对 脚手架里面的一些文件就有一定了解了, 下面就来说说 ,main.js 里 最重要的一段代码

1.2.4 render 函数


图一 :

Vue (7)_第5张图片


图二 :

Vue (7)_第6张图片


图三 :

Vue (7)_第7张图片


图四 :

Vue (7)_第8张图片


图五 :

补充 :

Vue (7)_第9张图片

总结 : 关于不同版本的vue

  1. vue.js 与 vue.runtime.xxx.js 的区别

    a. vue.js 是完整版的vue , 包含 :核心功能 + 模板解析器

    b. vue.runtime.xxx.js 是 运行版本的vue , 只包含 : 核心功能 , 没有模板解析器.

  2. 因为 vue.runtime.xxx.js 没有模板解析器 , 所以不能使用 template 配置项 , 需要使用 render 函数接收到的 crateElement 函数去指定具体内容.

1.3 修改默认配置


图一 :


图二 :

Vue (7)_第10张图片


图三 :

Vue (7)_第11张图片

解决 执行 vue inspect > output.js 出错 :文章链接

1.4 ref 属性

Vue (7)_第12张图片


下面尝试一下 给组件标签 加一个 ref


总结 : ref 属性

  1. 被用来给元素或子组件注册引用信息 (id 的替代者)

  2. 应用在 html 标签上 获取的是真实的 DOM 元素 ,应用在 组件 标签上是 组件实例对象(vc)

  3. 使用方式:

    a : 打标识 :

    ....

    b: 获取 : this.$refs.xxx

1.5 props 配置项


图一 :

Vue (7)_第13张图片


图二 :

Vue (7)_第14张图片


图三 :

Vue (7)_第15张图片


图四 :

Vue (7)_第16张图片


图五 :


总结 :


配置项 props 功能 : 让 组件接收外部传过来的数据

  1. 传递数据 :

  2. 接收数据 :

    a : 第一种方式(只接受) : props : [‘name’ …]

    b : 第二种方式 (限制类型) :

    props : {
    	name : Number
    }
    

    c : 第三种放肆 (限制类型 , 限制必要性 , 指定默认值) :

    props:{
    	name :{
    		type : String, // 类型
            required : true, // 必要性
            defult : '老王' // 默认值
    	}
    }
    


3. 备注 : props 是只读的 , Vue 底层会监测你对 props 的修改 , 如果进行了修改,就会发出警告 , 若 业务需求确实需要修改 , 那么请复制 props 的内容到data 中一份,然后去修改 data 中的数据 .

1.6 mixin 混入

三种暴露方式

mixin (混入) 功能 : 可以把多个组件共用的配置提取成一个混入对象 .


图一 :

Vue (7)_第17张图片


图二 :

Vue (7)_第18张图片


图三 :


总结 :mixin (混入)

  1. 功能 : 可以把多个组件共用的 配置提取成一个混入对象

  2. 使用方式 :

    a : 第一步定义混合 例如 :

    {
    	data(){
    		......
    	},
    	methods:{
    		......
    	},
    	......
    }
    

    b : 使用混入 , 例如 :

    • 全局混入 : Vue.mixin(xxxx)
    • 局部混入 : mixins : [‘xxxx’]

1.7 插件


插件 : 在vue 中 可以定义插件 ,增强 vue 的使用 .


图一 :

Vue (7)_第19张图片


图二 :

Vue (7)_第20张图片


图三 :

Vue (7)_第21张图片

图四 :

Vue (7)_第22张图片

1.8 Scoped 样式


看完插件 ,这里来学习一下 Scoped 给组件添加样式 .

图一 :

Vue (7)_第23张图片

图二 :

Vue (7)_第24张图片

图三 :

这里我们的 App 是 管理所有组件的 ,一般再 App 中写的样式 是给其他组件 应用的, 此时加上了 scoped ,那么App 中写的样式就只能给 App 组件使用 ,所以 我们一般不在 App 中 写 scoped


总结 : scoped 样式


作用 : 让样式在局部生效 ,防止冲突


下面来写一个案例来 熟悉我们的组件

2. 组件化编码流程


这里通过完成 一个 代码案例 来 熟悉 组件化编码流程

Vue (7)_第25张图片


下面将 样式的 html , css 文件 拆出来放到我们的 组件中

1. html 文件

doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>React Apptitle>

  <link rel="stylesheet" href="index.css">
head>
<body>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称,按回车键确认"/>
      div>
      <ul class="todo-main">
        <li>
          <label>
            <input type="checkbox"/>
            <span>xxxxxspan>
          label>
          <button class="btn btn-danger" style="display:none">删除button>
        li>
        <li>
          <label>
            <input type="checkbox"/>
            <span>yyyyspan>
          label>
          <button class="btn btn-danger" style="display:none">删除button>
        li>
      ul>
      <div class="todo-footer">
        <label>
          <input type="checkbox"/>
        label>
        <span>
          <span>已完成0span> / 全部2
        span>
        <button class="btn btn-danger">清除已完成任务button>
      div>
    div>
  div>
div>

body>
html>


2.css 文件

/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}


图一 :

Vue (7)_第26张图片


图二 :


图三 :

Vue (7)_第27张图片


到此第一部分就算完成了 ,下面来完成第二部分 展示动态数据


图一 :

Vue (7)_第28张图片


图二 :

Vue (7)_第29张图片


下面来完成第三部分 : 交互


这里先来完成第一个任务 , 在输入框里 输入一个内容 ,然后添加到 list 的 首行 .


图一 :

Vue (7)_第30张图片


图二 :


图三 :


图四 :


图五 :


增加 完成了, 下面我们来完成勾选操作


图一 :


图二 :

Vue (7)_第31张图片


其实这里还有一个不太好的做法一样能完成我们的勾选功能 ,


删除功能 :


图一 :

Vue (7)_第32张图片


图二 :


图三 :

Vue (7)_第33张图片


底部统计功能 :


reduce 方法 | MDN (mozilla.org)


最后完成 勾选 ,和 清除已完成功能


图一 :

Vue (7)_第34张图片


图二 :

Vue (7)_第35张图片


图三 :


图四 :

Vue (7)_第36张图片


TodoList 完整代码

2.1 TodoList 案例总结

  1. 组件化编码流程 :

    a. 拆分静态组件 : 组件要按照功能点拆分 , 命名 不要与 html 文件冲突

    b. 实现动态组件 : 考虑号数据的存放位置 , 数据是一个组件在用 , 还是一些组件再用 :

    • 一个组件在用 : 放到组件自身即可.
    • 一些组件在用 : 放到共同的父组件上 (状态提升)

    c. 实现交互 : 从绑定事件开始.

  2. props 适用于 :

    a. 父组件 ===> 子组件 通信

    b. 子组件 ===> 父组件 通信 (要求父先个子一个函数)

  3. 使用 v-model 时要切记 : v-model 绑定的值不能是 props 传过来的值 ,因为 props 是不可以修改的!

  4. props 传过来的若是对象类型的值 , 修改对象中的属性是 Vue 不会报错 , 但不推荐这样做.

你可能感兴趣的:(vue,vue.js,javascript,前端)