Vue 03Day Knowledge Point

一.组件

1.什么是组件？

可复用的vue实例, 封装html结构, 样式, JS

2.什么时候封装组件？

遇到重复标签, 可复用的时候

3.组件化

1.组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
2.组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护
3.一个页面， 可以拆分成一个个组件，一个组件就是一个整体
5.例如：http://www.ibootstrap.cn/ 所展示的效果，就契合了组件化开发的思想。

6.前端组件化开发的好处：

  • 提高了 复用性和灵活性
  • 提升了 开发效率 和 后期可维护性

Vue-Day 03 - 图1

4.组件的注册使用

App.vue 是根组件, 这个比较特殊, 是最大的一个根组件。其实里面还可以注册使用其他小组件。

使用组件的四步：
1.创建组件, 封装要复用的标签, 样式, JS代码
2.引入组件
3.注册组件
全局注册 – main.js中 – 语法如图
局部注册 – 某.vue文件内 – 语法如图

注意：如果多个页面都要用一个组件，那就全局注册，否则一律使用局部注册

4.使用组件：组件名当成标签使用即可
<组件名></组件名>

注意点：组件名不能和内置的html名同名

Vue-Day 03 - 图2

5.组件的 创建到使用

App.vue

  1. <template>
  2. <div>
  3.   <title-compoent></title-compoent>
  4.   <button-b></button-b>
  5. </div>
  6. </template>
  7. <script>
  8. // 1.创建组件（写一个vue文件）
  9. // 2.引入组件
  10. // import 组件对象 from 组件路径
  11. import Title from "./components/title-tit.vue";
  12. export default {
  13.   // 3.注册组件
  14.   // 局部注册
  15.   // 全局注册去main.js
  16.   components:{
  17.     // "组件名(标签名)":组件对象
  18.       //我们推荐组件的名字采用多个单词短横线分隔的命名
  19.     "title-compoent":Title,
  20.   }
  21. }
  22. </script>
  23. <style>
  24. </style>

创建组件——title-tit.vue

  1. <template>
  2. <div>
  3.    <h1> hello word</h1>
  4. </div>
  6. </template>
  7. <script>
  8. export default {
  9. }
  10. </script>
  11. <style>
  12. h1{
  13.     color: red;
  14. }
  15. </style>

创建组件——button-b.vue

  1. <template>
  2. <div>
  3.   <button class="good-btn">按钮</button>
  4. </div>
  6. </template>
  7. <script>
  8. export default {
  10. }
  11. </script>
  12. <style>
  13. .good-btn{
  14.     border: 2px solid pink;
  15.     background-color: yellow;
  16.     color: #fff;
  17. }
  18. </style>

全局组件——main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import '../node_modules/bootstrap/dist/css/bootstrap.css'
  5. // 引用
  6. // 全局组件
  7. // import 组件对象 from 组件路径
  8. import GoodButton from './components/button-b.vue'
  9. // 全局注册
  10. // Vue.component("组件标签名"，组件对象);
  11. Vue.component("button-b",GoodButton);
  13. Vue.config.productionTip = false
  15. new Vue({
  16.   render: h => h(App),
  17. }).$mount('#app')

6.组件名的大小写

在进行组件的注册时，定义组件名的方式有两种：

1.注册使用短横线命名法，例如 hm-header 和 hm-main

Vue-Day 03 - 图3

使用时 <hm-button></hm-button>

2.注册使用大驼峰命名法，例如 HmHeader 和 HmMain

Vue-Day 03 - 图4

使用时 <HmButton></HmButton>或<hm-button></hm-button> 都可以

推荐1: 定义组件名时, 用大驼峰命名法, 更加方便
推荐2: 使用组件时，遵循html5规范, 小写横杠隔开（可选）

7.组件的样式冲突 scoped

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

  1. 全局样式: 默认组件中的样式会作用到全局
  2. 局部样式: 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件
    scoped原理？
    （1）当前组件内标签都被添加 data-v-hash值 的属性
    （2）css选择器都被添加 [data-v-hash值] 的属性选择器
    最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

3.只针对当前组件内标签生效，给style上添加scoped

尽可能使用scoped，避免样式影响其他组件或者页面

8.通过 name 注册组件 (了解)

组件在 开发者工具中 显示的名字，可以通过name进行修改：

Vue-Day 03 - 图5

在注册组件期间，除了可以直接提供组件的注册名称之外，
还可以把组件的 name 属性作为注册后组件的名称

Vue-Day 03 - 图6

二.Vue组件通信

1.组件通信 - 父传子

利用父传子，可以往子组件传递数据。
父传子的基本步骤是什么?
1.父组件内, 给子组件添加属性的方式传值
2.子组件内, 通过 props 接收

父组件：给子组件添加属性的方式传值

  1.   <!-- 组件传参数分两步 -->
  2.       <!-- 第一步：父组件给子组件传参数 -->
  3.       <!-- 第二步：子组件要接受参数 -->
  4.       <!-- 使用v-bind向子组件传参数 语法  :参数名 = "值" -->
  5.       <!-- 父组件声明好参数名 和 对应的值  在子组件的export default 中 props:["content","finshed"]你的参数 -->
  6.       <!-- 然后将参数插值到你的位置上 -->
  7. <todo-main v-for="item in todoList" :key="item.id" 
  8. :content = "item.text" :finshed = "item.finshed">
  9. </todo-main>

子组件：子组件内, 通过 props 接收

  1. <script>
  2. export default {
  3.   props:["content","finshed"]
  4. }
  5. </script>

2.单向数据流

在vue中需要遵循单向数据流原则:（从父到子的单向数据流动, 叫单向数据流）

  1. 父组件的数据变化了，会自动向下流动影响到子组件
  2. 子组件不能直接修改父组件传递过来的 props， props是只读的
  3. props里定义的变量不能被修改, props里的变量本身是只读的

Vue-Day 03 - 图7

2.组件通信 - 子传父

子传父的基本语法：

1.子组件可以通过 this.$emit('事件名', 参数1, 参数2, ...) 触发事件的同时传参的

2.父组件监听事件

@事件名 = “函数”

接收参数 @update = “fn(10,$event)”

@update = “fn” fn的第一个参数就是事件对象

案例图：

1.在子组件中绑定标签的事件

Vue-Day 03 - 图8

2.子组件 通过this.$emit('事件名', 参数1, 参数2, ...) 触发事件的同时传参

Vue-Day 03 - 图9

3.父组件监听事件 接收参数

Vue-Day 03 - 图10

4.进行传递参数

Vue-Day 03 - 图11

3.组件上使用v-model

1.v-model是语法糖：v-model本质上是 value属性和input事件的一层包装
2.v-model的作用：提供数据的双向绑定
数据发生了改变，页面会自动变 v-bind:value / :value
页面输入改变，数据会自动变化 v-on:input / @input

@input= “变量=$event”

v-model给组件使用

我们经常遇到一种场景：

  1. 父组件提供一个数据给子组件使用（父传子）
  2. 子组件又需要修改父组件传过来的这个数据，所以需要子传父把值传给父组件。（子传父）
    这种场景可以使用v-model进行简写。

Vue-Day 03 - 图12

Vue-Day 03 - 图13

Vue-Day 03 - 图14

Vue-Day 03 - 图15

三.本地存储

Vue-Day 03 - 图16

  1.  // 监听 本地存储
  2.   watch:{
  3.     // 监听列表变化,列表变化的时候缓存到本地存储
  4.     todoList:{
  5.       deep:true,
  6.       handler(newValue){
  7.         // 当列表变化时候，本地缓存列表
  8.   localStorage.setItem('todoList',JSON.stringify(newValue));
  9.       }
  10.     }
  11.   },
  12.   // created生命周期 会在组件创建的时候调用
  13.   created(){
  14.     // 读取本地缓存列表
  15.     let data = localStorage.getItem("todoList");
  16.     // 如果本地有数据
  17.     if(data){
  18.       // 读取本地数据赋值给数组
  19.       this.todoList = JSON.parse(data);
  20.     }
  21.   }