全国ip地址查询_手机做网站教程_品牌建设_友链交易网

1.普通组件的注册使用

注册组件的两种方式：

1. 局部注册：只能在注册的组件内使用
   创建.vue文件（三个组成部分）
   在使用的组件内导入并注册
   
2. 全局注册：所有组件内都能使用
   使用：当成html标签使用<组件名><组件名>,mian.js内导入
   注意：规范：大驼峰命名法
   

局部注册

<template><div class="App"><!--头部组件--><HmHeader></HmHeader><!--主题组件--><HmMain></HmMain><!--底部组件--><HmFooter></HmFooter></div>
</template><script>
import HmHeader from './components/HmHeader.vue';
import HmMain from './components/HmMain.vue';
import HmFooter from './components/HmFooter.vue';
export default {components:{// '组件名': 组件对象HmHeader: HmHeader,//同名的时候可以省略HmMain,HmFooter}
}
</script><style>
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
</style>

全局注册

import Vue from 'vue'
import App from './App.vue'
//编写导入的代码，往代码的顶部编写（规范）
import HmButton from './components/HmButton.vue'
Vue.config.productionTip = false//进行全局注册
// Vue.component(组件名, 组件对象)
Vue.component('HmButton', HmButton)new Vue({render: h => h(App),
}).$mount('#app')

技巧：一般都用局部注册，如果发现确实是通用组件，再抽离到全局

2.小兔鲜儿-组件拆分

页面开发思路：

1. 分析页面，按模块拆分组件，搭架子（局部或全局注册）
2. 根据设计图，编写组件html结构css样式（已准备好）
3. 拆分封装通用小组件（局部或全局注册），将来，通过js动态渲染，实现功能

所有代码都折叠：ctrl + k,ctrl + 0
所有代码都展开：ctrl + k,ctrl + j

3.组件的三大组成部分-注意点说明

组件的样式冲突scoped
默认情况： 写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式：mr组件中的样式会作用到全局
2. 局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件。
   

<template><div>BaseOne</div>
</template><script>
export default {}
</script><style scoped>
/*1.默认的style样式会作用于全局，即全局样式*/
div {border: 3px solid blue;margin: 30px;
}
</style>

4.data是一个函数

要保证每个组件实例，维护独立的一份数据对象

4.组件通信

即组件与组件之间的数据传递

• 组件的数据是独立的，无法直接访问其他组件的数据
• 想用其他组件的数据就要用组件通信

组件通信解决方案：
父子关系：props和$emit（父传子，子传父）
非父子关系：1.provide & inject
2.eventbus
通用解决方案：Vuex(适合复杂业务场景)

**父传子 **

子传父

1.什么是prop

定义:组件上注册的一些自定义属性
作用：向子组件传递数据
特点：可以传递任意数量，任意类型的prop

//把中括号，引号改为顿号
兴趣爱好：{{ hobby.join('、') }}

2.props校验

1. 作用：为组件的prop指定验证要求，不符合要求，控制台会有错误提示，帮助开发者快速发现错误
2. 语法：
   类型校验（最常用）
   非空校验
   默认值
   自定义校验

类型校验

props:{校验的属性名：类型 //Number String Boolean
}

完整的四个校验
没传的话用默认值，转的话不用默认值

props:{校验的属性名：{type:类型,  //Number String Booleanrequired:true,  //是否必填default: 默认值, //默认值validator (value) {//自定义校验逻辑// 比如：return value>=0 && value<=100return 是否提供校验}}
}
return value>=0 && value<=100

3.prop和data的异同

1. 共同点：都可以给组件提供数据
   区别：
2. data的数据是自己的，随便改
3. prop的数据是外部的，不能直接改，要遵循单向数据流

//prop传的数据不能直接改（外面的数据）
props ：{count:Number
}
methods:{handleAdd() {//子传父，this.$emit(事件名,参数)this.$emit('changeCount', this.count + 1) //不能count++，那样就改变了},handleSub() {this.$emit('changeCount', this.count - 1)}
}

4.单向数据流

父级prop的数据会更新，会向下流动，影响子组件，这个数据流动是单向的。

5.小黑记事本-组件版

在vue中，写了v-for，一定要加 :key=" "

1.渲染功能：

1. 提供数据在父元素的公共组件里App.vue
2. 通过父传子将数据传递给 子.vue
3. 利用v-for渲染

2. 添加功能

1. 收集表单数据 v-model
2. 监听事件（回车，点击 都要添加）
3. 子传父，将任务名称传递给父组件App.vue
4. 进行添加unshift(往前面加) 自己的数据自己负责

3.删除功能

1. 监听事件（监听删除的点击）携带id
2. 子传父，将删除的id传递给父组件App.vue
3. 进行删除filter（自己的数据自己负责）

data父传子
methods子传父

4.底部合计和清空功能和持久化存储

1. 底部合计：父传子，传list去渲染
2. 清空功能：子传父，通知到父组件，父组件进行清空操作
3. 持久化存储：watch深度监视list的变化，往本地存储，一进入页面就优先读取本地存储

6.非父子通信-event bus事件总线

作用：非父子组件之间，进行简易消息传递

7.非父子通信provide&inject

provide&inject作用：跨层级共享数据
推荐响应式的，渲染

8.v-model详解

1.原理

原理：本质上是一个语法糖，例如，应用在输入框上，就是value和input事件的合写
作用：提供数据的双向绑定
数据变，视图变:value
视图变, 数据变@input
即v-model等于:value加@input

<input :value="msg2" @input="msg2 = $event.target.value"></input>

注意：$event用于在模板中，获取事件的形参

2.表单类组件封装 & v-model简化代码

v-model不能和prop传过来的数据绑定

9. .sync修饰符

作用：可以实现子组件与父组件数据的双向绑定，简化代码
特点：prop属性名，可以自定义，非固定为value
场景：封装弹框类的基础组件，visible属性true显示false隐藏
本质：:属性名和@update:属性名 合写

10.ref和$refs

作用：利用ref和$ref可以用于获取dom元素，或组件实例
特点：查找范围，在当前组件内（更精确稳定）
获取dom:

1. 目标标签-添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2. 恰当时机，通过this.$refs.xxx,获取目标容器

mounted() {console.log(this.$refs.chartRef)
},

获取组件实例：

11.Vue异步更新、$nextTick

问题：“显示之后”，立刻获取焦点是不能成功的！
原因：Vue是异步更新DOM(提升性能)
**$nextTick：\ast \ast 等DOM更新后，才会触发执行此方法里的函数语法：this.$nextTick(函数体)

this.$nextTick(() => {this.$refs.inp.focus()
})

12.自定义指令

自己定义的指令，可以封装一些dom操作，扩展额外功能
全局注册：

Vue.directive('指令名'，{"inserted"(el){//可以对el标签，扩展额外功能el.focus()}
})

局部注册

directives:{"指令名":{inserted(){//可以对el标签，扩展额外功能el.focus()}}
}

13.自定义指令的值

需求：实现一个color指令-传入不同的颜色，给标签设置文字颜色
语法：在绑定指令时，可以通过等号的形式为指令绑定具体的参数值

<div v-color="color">我是内容</div>

通过binding.value可以拿到指令值，指令值修改会触发update函数

实例：

v-loading指令封装
为了用户体验更好，封装一个v-loading指令，实现加载中的效果
实现：

1. 准备losding类，用伪元素定位，设宽高，实现蒙层
2. 开关loading状态，即移除添加蒙层，即只用添加移除类即可
3. 结合自定义指令的语法进行封装复用