Vue.js尚硅谷视频学习笔记(第二章：vue 组件化编码)

内容大部分文字描述来自尚硅谷课件，实例操作截图和注释内容为亲测。

第二章：vue 组件化编码

2.1. 使用vue-cli 创建模板项目

2.1.1. 说明

1. vue-cli 是vue 官方提供的脚手架工具
2. github: https://github.com/vuejs/vue-cli
3. 作用: 从 https://github.com/vuejs-templates 下载模板项目

2.1.2. 创建vue 项目

npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/

注释：

"vue init webpack vue_demo"中的"webpack"为固定的，即使使用webpack作为模板，提供六套模板。"vue_demo"为自起的项目名称，不可以包含大写字母。
官方文档：https://github.com/vuejs/vue-cli/tree/master



确认即可


听说得下载很久，但是我还是点下载了。

2.1.3. 模板项目的结构

|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的readme 文件

什么是组件化

组件是包含一个功能界面的所有元素的集合。

参考文档：https://www.kancloud.cn/zep-tsang/components/341917

初始化界面的三个文件

App.vue

main.js

/*
    入口JS：创建Vue实例
*/

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el : '#app',
    components: {
        App
    },
    template: ''
})

HelloWorld.vue

2.2. 项目的打包与发布

2.2.1. 打包:

npm run build

2.2.2. 发布1: 使用静态服务器工具包

npm install -g serve
serve dist
访问: http://localhost:5000

2.2.3. 发布2: 使用动态web 服务器(tomcat)

修改配置: webpack.prod.conf.js
output: {
publicPath: ‘/xxx/’ //打包文件夹的名称
}
重新打包:
npm run build
修改dist 文件夹为项目名称: xxx
将xxx 拷贝到运行的tomcat 的webapps 目录下
访问: http://localhost:8080/xxx

2.3. eslint

2.3.1. 说明

1. ESLint 是一个代码规范检查工具
2. 它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint 会作出非常有用的提示
3. 官网: http://eslint.org/
4. 基本已替代以前的JSLint

2.3.2. ESLint 提供以下支持

1. ES
2. JSX
3. style 检查
4. 自定义错误和提示

2.3.3. ESLint 提供以下几种校验

1. 语法错误校验
2. 不重要或丢失的标点符号，如分号
3. 没法运行到的代码块（使用过WebStorm 的童鞋应该了解）
4. 未被使用的参数提醒
5. 确保样式的统一规则，如sass 或者less
6. 检查变量的命名

2.3.4. 规则的错误等级有三种

1. 0：关闭规则。
2. 1：打开规则，并且作为一个警告（信息打印黄色字体）
3. 2：打开规则，并且作为一个错误（信息打印红色字体）

2.3.5. 相关配置文件

1. .eslintrc.js : 全局规则配置文件
   ‘rules’: {
   ‘no-new’: 1
   }
2. 在js/vue 文件中修改局部规则
   /* eslint-disable no-new */
   new Vue({
   el: ‘body’,
   components: { App }
   })
3. .eslintignore: 指令检查忽略的文件
   *.js
   *.vue

注释：
规则不符合会报错，但是不影响代码执行。
使用格式化文档会减少规则报错

配置：
修改.eslintrc.js文件


把认为不需要报错的设置为off或者0，可以0，1，2，根据自身要求。

2.4. 组件定义与使用

2.4.1. vue 文件的组成(3 个部分)

1. 模板页面

2. JS 模块对象

3. 样式

2.4.2. 基本使用

1. 引入组件
2. 映射成标签
3. 使用组件标签

2.4.3. 关于标签名与标签属性名书写问题

1. 写法一: 一模一样
2. 写法二: 大写变小写, 并用-连接

2.5. 组件间通信

2.5.1. 组件间通信基本原则

1. 不要在子组件中直接修改父组件的状态数据
2. 数据在哪, 更新数据的行为(函数)就应该定义在哪

2.5.2. vue 组件间通信方式

1. props
2. vue 的自定义事件
3. 消息订阅与发布(如: pubsub 库)
4. slot
5. vuex(后面单独讲)

2.6. 组件间通信1: props

2.6.1. 使用组件标签时

2.6.2. 定义MyComponent 时

1. 在组件内声明所有的props
2. 方式一: 只指定名称
   props: [‘name’, ‘age’, ‘setName’]
3. 方式二: 指定名称和类型
   props: {
   name: String,
   age: Number,
   setNmae: Function
   }
4. 方式三: 指定名称/类型/必要性/默认值
   props: {
   name: {type: String, required: true, default:xxx},
   }

2.6.3. 注意

1. 此方式用于父组件向子组件传递数据
2. 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
3. 问题:
   a. 如果需要向非子后代传递数据必须多层逐层传递
   b. 兄弟组件间也不能直接props 通信, 必须借助父组件才可以

2.7. 组件间通信2: vue 自定义事件

2.7.1. 绑定事件监听

// 方式一: 通过v-on 绑定
@delete_todo="deleteTodo"
// 方式二: 通过$on()
this.$refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})

2.7.2. 触发事件

// 触发事件(只能在父组件中接收)
this.$emit(eventName, data)

2.7.3. 注意:

1. 此方式只用于子组件向父组件发送消息(数据)
2. 问题: 隔代组件或兄弟组件间通信此种方式不合适

2.8. 组件间通信3: 消息订阅与发布(PubSubJS 库)

2.8.1. 订阅消息

PubSub.subscribe(‘msg’, function(msg, data){})

2.8.2. 发布消息

PubSub.publish(‘msg’, data)

2.8.3. 注意

1. 优点: 此方式可实现任意关系组件间通信(数据)

2.8.4. 事件的2 个重要操作(总结)

1. 绑定事件监听(订阅消息)
   目标: 标签元素
   事件名(类型): click/focus
   回调函数: function(event){}
2. 触发事件(发布消息)
   DOM 事件: 用户在浏览器上对应的界面上做对应的操作
   自定义: 编码手动触发

2.9. 组件间通信4: slot

2.9.1. 理解

此方式用于父组件向子组件传递标签数据

2.9.2. 子组件: Child.vue

2.9.3. 父组件: Parent.vue

	
xxx 对应的标签结构
	
yyyy 对应的标签结构

2.10. demo1: comment manage

在static下创建comment_page文件夹
comment_page文件夹下三个文件构成静态页面

bootstrap.css，利用到bootstrap技术

index.css

.reply {
  margin-top: 0px;
}

li {
  transition: .5s;
  overflow: hidden;
}

.handle {
  width: 40px;
  border: 1px solid #ccc;
  background: #fff;
  position: absolute;
  right: 10px;
  top: 1px;
  text-align: center;
}

.handle a {
  display: block;
  text-decoration: none;
}

.list-group-item .centence {
  padding: 0px 50px;
}

.user {
  font-size: 22px;
}

index.html

  
  
  
  



  

    

      

        

          

            

              
请发表对React的评论
            
          
        
      
      

        

          

            

              用户名
              
            
            

              评论内容
              
            
            

              

                提交
              
            
          
        
        

          
评论回复：
          
暂无评论，点击左侧添加评论！！！
          

            

              

                删除
              
              
xxx说:
              
React不错!
            
            

              

                删除
              
              
yyy说:
              
React有点难!
            
          
        
      
    
  

三步：
1.拆，把页面拆成不同部分。
2.静，哪些是静态页面，直接渲染生成。
3.动，动态页面，初始化和动态加载。

App.vue

main.js

import  Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    components: {App},
    template: ''
})

components下三个vue文件，本应该是三个文件夹，因为此例没有图片，简化为三个vue文件。

Add.vue

List.vue

Item.vue

2.11. demo2: todo list

main.js

import  Vue from 'vue'
import App from './App.vue'

import './base.css'

new Vue({
    el: '#app',
    components: {App},
    template: ''
})

base.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;
  }

App.vue

storageUtil.js

// 使用localStorage存储数据的工具模块
// 1.函数       ：1个功能
// 2.对象       ：2个功能
// 需要向外暴露1个功能还是多个功能

const TODOS_KEY = "todos_key"
export default {
    saveTodos (todos) {
        window.localStorage.setItem(TODOS_KEY, JSON.stringify(todos));
    },

    readTodos () {

        return JSON.parse(window.localStorage.getItem(TODOS_KEY) || "[]")
    }
}

TodoHeader.vue

TodoList.vue

TodoItem.vue

TodoFooter.vue