Vue组件化编码

使用 vue-cli 创建模板项目

1、说明

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

2、创建 vue 项目

npm install -g vue-cli

vue init webpack vue_demo

cd vue_demo

npm install

npm run dev

访问: http://localhost:8080/

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 文件

项目的打包与发布

1、打包:

npm run build

2、发布 1: 使用静态服务器工具包

npm install -g serve

serve dist

访问: http://localhost:5000

3、发布 2: 使用动态 web 服务器(tomcat)
修改配置: webpack.prod.conf.js

output: {
publicPath: '/xxx/' //打包文件夹的名称
}
重新打包:

npm run build
修改 dist 文件夹为项目名称: xxx

将 xxx 拷贝到运行的 tomcat 的 webapps 目录下访问: http://localhost:8080/xxx

ESLint

1、说明

1)ESLint 是一个代码规范检查工具

2)它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint 会作出非常有用的提示

3)官网: http://eslint.org/

4)基本已替代以前的 JSLint

2、ESLint 提供以下支持

1)ES

2)JSX

3)style 检查

4)自定义错误和提示

3、 ESLint 提供以下几种校验

1)语法错误校验

2)不重要或丢失的标点符号,如分号

3)没法运行到的代码块

4)未被使用的参数提醒

5)确保样式的统一规则,如 sass 或者 less

6)检查变量的命名

4、规则的错误等级有三种

1)0:关闭规则。

2)1:打开规则,并且作为一个警告(信息打印黄色字体)

3)2:打开规则,并且作为一个错误(信息打印红色字体)

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

组件定义与使用

1、vue 文件的组成(3 个部分)
1)模板页面

<template>
    页面模板
</template>

2)JS 模块对象

<script>
    export default {
        data() {return {}},
        methods: {},
        computed: {},
        components: {}
    }
</script>

3)样式

<style>
    样式定义
</style>

2、基本使用

1)引入组件

2)映射成标签

3)使用组件标签

<template>
    <HelloWorld></HelloWorld>
    <hello-world></hello-world>
</template>

<script>
    import HelloWorld from './components/HelloWorld' 
    
    export default {
        components: { 
            HelloWorld
        }
    }
</script>

3、关于标签名与标签属性名书写问题

1)写法一:一模一样

2)写法二:大写变小写, 并用-连接

组件间通信

1、组件间通信基本原则

1)不要在子组件中直接修改父组件的状态数据

2)数据在哪, 更新数据的行为(函数)就应该定义在哪

2、 vue 组件间通信方式

1)props

2)vue 的自定义事件

3)消息订阅与发布(如: pubsub 库)

4)slot

5)vuex

组件间通信 1: props

1、使用组件标签时

<my-component name='tom' :age='3' :set-name='setName'></my-component>

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},
}

3、注意

1)此方式用于父组件向子组件传递数据

2)所有标签属性都会成为组件对象的属性, 模板页面可以直接引用

3)问题:

  • a.如果需要向非子后代传递数据必须多层逐层传递
  • b.兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

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

1、绑定事件监听

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

2、触发事件

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

3、注意:

1)此方式只用于子组件向父组件发送消息(数据)

2)问题: 隔代组件或兄弟组件间通信此种方式不合适

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

1、订阅消息

PubSub.subscribe('msg', function(msg, data){})

2、发布消息

PubSub.publish('msg', data)

3、 注意

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

4、 事件的 2 个重要操作(总结)

  • 1)绑定事件监听 (订阅消息)

目标: 标签元素 <button>

事件名(类型): click/focus

回调函数: function(event){}

  • 2)触发事件 (发布消息)

DOM 事件: 用户在浏览器上对应的界面上做对应的操作

自定义: 编码手动触发

组件间通信 4: slot

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

2、子组件: Child.vue

<template>
    <div>
        <slot name="xxx">不确定的标签结构 1</slot>
        <div>组件确定的标签结构</div>
        <slot name="yyy">不确定的标签结构 2</slot>
    </div>
</template>

3、父组件: Parent.vue

<child>
    <div slot="xxx">xxx 对应的标签结构</div>
    <div slot="yyy">yyyy 对应的标签结构</div>
</child>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容

  • 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容...
    忘川慕白阅读 5,922评论 7 113
  • 当我走进咨询室,里面坐着一男一女,因为离婚事宜前来我们律所。 首先开口说话的是女方,她说她要离婚,要小孩的抚养权。...
    上善若水泽万物阅读 461评论 2 1
  • 活了三十几年,有个两岁宝宝,结果三年。 事业上没有核心竞争力,找工作有困难,考了注册会计师,但却不想做审计,正处在...
    你好3306阅读 207评论 0 0
  • DAY2 2017.03.02 【原文】:成人擅长把学习乐趣变得无影无踪,不管学习的对象是游戏还是数学。 我们需要...
    北宝宝阅读 166评论 0 0
  • Rao辉哲阅读 148评论 0 0