Vue学习笔记(二)

2023-10-03 21:57:58

Vue学习笔记(二)

个人博客(欢迎光临)：Vue学习笔记(二)(赤蓝紫)

单页面应用程序SPA，指的是一个Web网站中只有唯一一个HTML页面，所有的功能和交互都在这个唯一的页面内完成。

1. vue-cli

vue-cli是Vue.js开发的标准工具。

1.1 安装

npm install -g @vue/cli

1.2 vue项目的部分文件功能

vue通过main.js把App.vue渲染到index.html的指定区域中。

App.vue用来编写待渲染的模板结构
index.html需要预留一个el区域等待渲染
main.js把App.vue渲染到index.html预留的区域中

$(mount)用法：

import Vue from 'vue'
import MyCom from './components/myComponent'

Vue.config.productionTip = false

// new Vue({
//   el: '#app',
//   render: h => h(MyCom),
// })

new Vue({
  render: h => h(MyCom)
}).$mount('#app') //$(mount)和上面的el属性用法一样

2. 组件

组件化开发：把页面上可复用的UI结构封装成组件，从而方便项目的开发和维护

vue支持组件化开发。组件的后缀名是**.vue**

每个.vue组件可有三个部分组成：

template：组件的模板结构(必须包含), 只能有一个根节点
script：组件的Javascript行为
style：组件的样式

<template>
    <div>
        <h2>用户名：{{ username }}</h2>
    </div>
</template>

<script>
export default {
    // data: {
    //     username: 'admin'
    // }        //.vue文件中的数据源不可以用对象形式，而应是函数形式

    data() {
        return {
            username: 'admin'
        }
    }
}
</script>

<style>
    div>h2 {
        color: red;
    }
</style>

在vue中使用less：

<style lang="less">
    .box {
        background-color: pink;
        h2 {
            color: red;
        }
    }
</style>

2.1 组件使用的三个步骤

使用import语法导入要用的组件
在components节点注册组件
直接把组件当成标签在要渲染的地方使用

2.2 注册全局组件

上面的注册组件的方法是私有注册，即每一个需要用到经常用的组件，都需要反复注册。这个时候，可以直接在main.js中进行全局组件的注册

import Vue from 'vue'
import App from './App.vue'
import Test from './components/Test.vue' //导入要注册的全局组件

Vue.config.productionTip = false

Vue.component("Mytest", Test) //使用Vue.component()来进行全局组件的注册，第一个参数是要注册的组件的名称，第二个参数是要注册的组件

new Vue({
  render: h => h(App),
}).$mount('#app')

2.3 组件的props

props是组件的自定义属性，在封装通用组件时，合理使用props可以提高组件的复用性，允许使用者通过自定义属性，为当前组件指定初始值

props是只读的。

要修改的话，可以把得到的初始值赋给data中的属性，再进行修改，props中的属性的值会一直是初始值

default属性、type属性和required属性：如果使用者使用使用组件时，没有传递init属性, 则默认值生效

使用语法示例：

props: {
    init: {
        default: 0,  //用default属性定义属性的默认值
        type: Number,  //限定传递的属性的类型，不匹配会报错
        required: true,  //设置为true时，必须要传递参数，否则即使有默认值，也会报错
    }
},

2.4 组件之间的样式冲突

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

导致组件之间的样式冲突的原因：

单页面应用程序中，所有的组件的DOM结构都是基于唯一的index.html页面呈现的
每个组件中的样式都会影响到整个index.html页面中的所有DOM元素

通过给要设置样式的组件的style标签中添加"scoped"属性，可以实现不影响到其他组件的样式

原理：给组件里的所有标签都来一个自定义样式，然后通过属性选择器实现样式只会影响到该组件

上面使用"scoped"的代码，不使用"scoped"属性实现:

<template>
  <div class="left-container" data-d-001>
    <h3 data-d-001>Left 组件</h3>
    <MyCount :init="5" data-d-001></MyCount>  
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
h3[data-d-001] {
  color: red;
}

</style>

只是使用"scoped"的话，无法实现单独修改用上的其他组件的样式

如果想要让某些样式对子组件生效，可以使用**/deep/ 深度选择器**

通过浏览器查看生效样式：

属性选择器使用不一定需要依靠其他选择器，单独使用表示选择所有有对应属性的元素

3. 组件的生命周期

生命周期是指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段

生命周期函数：由vue框架提供的内置函数，会伴随组件的生命周期，自动按次序执行。

生命周期强调的是时间段，生命周期函数强调的是时间点

组件生命周期函数的分类：

生命周期图示：

3.1 组件创建阶段

3.1.1 beforeCreate()

组件的props、data、methods还没有被创建，都处于不可用状态

<template>
  <div>
      <h2>test组件</h2>
  </div>
</template>

<script>
export default {
    props: ['info'],
    data() {
        return {
            message: 'message'
        }
    },
    methods: {
        show() {
            console.log('show');
        }
    },
    beforeCreate() {
        // console.log(this.info);
        // console.log(this.message);
        this.show();
    }

}
</script>

<style>

</style>

3.1.2 created()

组件的props、data、methods已经创建完，处于可用状态。

created方法很重要，经常在里面调用methods的方法，请求服务器的数据，并把请求到的数据转存到data中，供渲染时使用,因为应该尽可能早的请求数据。

<template>
  <div>
      <h2>共有 {{ books.length }} 本书</h2>
  </div>
</template>

<script>
export default {
    props: ['info'],
    data() {
        return {
            message: 'message',
            books: [],
        }
    },
    methods: {
        show() {
            console.log('show');
        },
        initBooklist() {
            const xhr = new XMLHttpRequest();
            xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks');
            xhr.send(null);
            xhr.addEventListener('load', () => {
                const result = JSON.parse(xhr.responseText);
                this.books = result.data;
            })	//使用ajax获取图书信息示例
        }
    },
    created() {
        this.initBooklist();
    }

}
</script>

<style>

</style>

组件的模板结构还没生成(DOM节点现在不能操作)

3.1.3 beforeMount()

将要把内存中编译好的HTML结构渲染到当前组件的DOM结构

3.1.4 mounted()

重要，要操作当前组件的DOM，最早只能在mounted阶段，已经把内存中的HTML结构成功的渲染到了浏览器中，此时已经包含了当前组件的DOM结构

3.2 组件的运行阶段

3.2.1 beforeUpdate()

将要根据变化过后、最新的数据，重新渲染到组件的模板结构。(即现在data里的数据已经变化了，但是DOM元素里的数据还没来得及变)

<template>
  <div>
      <h3>
          用于测试运行阶段的message: 
          <span>{{ message }}</span>
      </h3>
      <button @click="datachange">更改数据</button>
  </div>
</template>

<script>
export default {
    props: ['info'],
    data() {
        return {
            message: 'Hello',
        }
    },
    methods: {
        datachange() {
            this.message += '!';
        }
    },
    beforeUpdate() {
        const span = document.querySelector('h3 span');

        console.log('data里的数据：' + this.message);
        console.log('DOM中的数据：' + span.innerHTML);
    }

}
</script>

<style>

</style>

3.2.2 updated()

已经完成了组件DOM结构的重新渲染

数据发生变化时，如果要操作重新渲染过的DOM，应在updated()中执行

3.3 组件销毁阶段

3.3.1 beforeDestroy()

将要销毁组件,组件还处于正常工作的状态

3.3.2 destroyed()

DOM结构已经完全销毁

4. 组件间的数据共享

4.1 父组件向子组件传递数据

父组件

<template>
  <div class="app-container">
    <h1>父组件数据: {{ message }} <br>
       {{ present }}</h1>
    <Test :msg="message" :pst="present"></Test>
  </div>
</template>

<script>
import Test from '@/components/Test.vue'

export default {
  data() {
    return {
      message: 'Hello Son!',
      present: {
        fruit: 'apple',
        toy: 'car'
      }
    }
  },
  components: {
    Test
  }
}
</script>

<style lang="less">
</style>

子组件

<template>
  <div class="test">
      <h3 class="de">
          子组件
      </h3>
      <p>接收父组件传来的message: {{msg }}</p>
      <p>接收父组件传来的present: {{pst }}</p>
  </div>
</template>

<script>
export default {
    props: ["msg", "pst"],
    data() {
        return {
            message: 'Hello',
        }
    },
    methods: {
        datachange() {
            this.message += '!';
        }
    },

}
</script>

<style scope>
.de {
    color: red
}
</style>

实现父组件向子组件传递数据，主要依靠

在子组件自定义属性
在父组件通过v-bind传递数据给子组件的自定义属性

通过上面的方法，传递给子组件的数据在props的属性中，只读，所以需要修改的话，要把接收的数据赋给子组件data中的元素

4.2 子组件向父组件传递数据

通过在父组件处自定义事件,和在子组件处通过$.emit()方法触发自定义事件来实现子组件向父组件传递数据

4.3 兄弟组件组件的数据共享

兄弟组件之间的数据共享方案是EventBus

步骤：

创建eventBus.js文件，向外共享一个Vue的实例对象(用法相当于中转站)
在数据发送方，调用bus.$emit(‘事件名称’, 要发送的数据)方法触发自定义事件
在数据接收方，调用bus.$on(‘事件名称’, 事件处理函数)方法注册一个自定义事件

5. ref引用

ref用来辅助开发者在不依赖jQuery的情况下，获取DOM元素或组件的引用。

每个vue的组件实例上，都包含一个** r e f s 对象 ∗ ∗ ，里面存储着对应的 D O M 元素或组件的引用。默认情况下， ∗ ∗ 组件的 refs对象**，里面存储着对应的DOM元素或组件的引用。默认情况下，**组件的 refs对象∗∗，里面存储着对应的DOM元素或组件的引用。默认情况下，∗∗组件的refs指向一个空对象**。

使用ref引用DOM元素：

所以上面要操作DOM元素可以通过this.$refs.myh3来修改，如：

使用ref引用组件实例：

控制文本框和按钮的按需切换：(点击按钮，按钮隐藏，文本框显示；文本框失去焦点，按钮显示，文本框隐藏；文本框显示时自动获取焦点)

<template>
  <div class="app-container">
    <h3 ref="myh3">MyRef组件</h3>
    <input type="text" v-if="inputVisible" ref="myipt" @blur="showButton">
    <button v-else @click="showInput">展示输入框</button>
    
  </div>
</template>

<script>
// import Left from '@/components/Left.vue'
// import Right from '@/components/Right.vue'

export default {
  data() {
    return {
      inputVisible: false
    }
  },
  methods: {
    showInput() {
      this.inputVisible = true;
      console.log(this.$refs.myipt);   //调用showInput时，数据刚刚发生了改变，而这行和上一行代码之间的时间间隔太短，
                                      // 导致DOM结构没有进行完渲染，所以此时出现undefined
      this.$nextTick(() => {           //组件的$nextTick()方法，会把回调函数推迟到下一个DOM更新周期之后执行
        console.log(this.$refs.myipt);
        this.$refs.myipt.focus();
      })
    },
    showButton() {
      this.inputVisible = false;  
    }
  },
  // components: {
  //   Left, 
  // }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

this.$nextTick(callback)方法：

组件的**$nextTick(callback)方法会把callback推迟到下一个DOM更新周期之后执行**，即等组件的DOM更新完之后，再执行callback回调函数。从而保证回调函数能操作到最新的DOM元素。

上面的例子不能在生命周期函数中的updated()中使用input.focus()，因为data中的数据一发生变化，updated()都会执行一次，即input隐藏时也会执行，此时压根没有input元素，又何来input.focus()之说呢。

6. 动态组件

动态组件指的是动态切换组件的显示与隐藏

vue提供了一个内置的组件，专门用来实现动态组件的渲染。

使用组件的三大步骤：
1. 引入组件
2. 注册组件
3. 通过标签使用组件
第三步，可以使用内置的component组件，通过is属性来动态指定要渲染的组件

即上面的3可以换成<component :is="'Left'"></component>

动态指定渲染组件示例：

App组件

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <button @click="comName='Left'">展示Left组件</button>
    <button @click="comName='Right'">展示Right组件</button>
    <hr />

    <div class="box">
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
  data() {
    return {
      comName: 'Left'
    }
  },
  components: {
    Left,
    Right
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

Left组件(注释代码是后面的部分才用上的)

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <h4>count的值是 {{ count }}</h4>
    <button @click="count += 1">+1</button>
  </div>
</template>

<script>
export default {
  // name: 'MyLeft',
  data() {
    return {
      count: 0
    }
  },
  created() {
    console.log('左侧被创建了');
  },
  destroyed() {
    console.log('左侧被销毁了');
  },
  // activated() {
  //   console.log('左侧被激活了');
  // },
  // deactivated() {
  //   console.log('左侧休息了');
  // }
}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

问题：在上面的示例中，点击Left组件的+1按钮，已经改变了数值，但是，点击展示Right组件后，再重新展示Left组件，会发现数值又回归了初始状态。从控制台中的输出，可以知道，原因是动态指定渲染Right组件时，Left组件会被销毁，之后右重新创建，所以数据会是初始状态。

可以通过vue内置的<keep-alive>组件保持动态组件的状态。

用法：用keep-alive组件包住动态组件就可以。

<keep-alive>
   <component :is="comName"></component>
</keep-alive>

当组件被激活时，会自动触发组件的activated生命周期函数。

当组件休眠时，会自动触发组件的deactivated生命周期函数。

把上面Left组件的注释代码启用。可以发现，当Left组件激活时(展示Left)，会打印出"左侧被激活了"；而Left休眠时(展示Right)，会打印出"左侧休息了"。

include属性：实现只有名字匹配的组件才会被缓存。就是说，上面的例子中，Left组件中有数据，想要保存Left的状态，但是Right组件没有必要缓存，甚至有可能Right组件是一次性的用法。这个时候通过include属性，可以指定谁会被缓存。多个组件间用英文的逗号**分隔。

逗号左右不要有空格

用法：

<keep-alive include="Left">
   <component :is="comName"></component>
</keep-alive>

可以发现，上面的Right组件在调试工具中显示的名字并不是Right，而是自定义的MyRight。这是通过组件的name节点修改的。

如果修改了组件的名称，那么在include属性中的名字应该是修改后的名字。

exclude属性：表示不缓存哪些组件。和include属性一起用没有意义，要不就是取消掉include属性的作用。要不就是多此一举。还会让代码可读性下降。

码农公寓

Vue学习笔记(二)

1. vue-cli

1.1 安装

1.2 vue项目的部分文件功能

2. 组件

2.1 组件使用的三个步骤

2.2 注册全局组件

2.3 组件的props

2.4 组件之间的样式冲突

3. 组件的生命周期

3.1 组件创建阶段

3.1.1 beforeCreate()

3.1.2 created()

3.1.3 beforeMount()

3.1.4 mounted()

3.2 组件的运行阶段

3.2.1 beforeUpdate()

3.2.2 updated()

3.3 组件销毁阶段

3.3.1 beforeDestroy()

3.3.2 destroyed()

4. 组件间的数据共享

4.1 父组件向子组件传递数据

4.2 子组件向父组件传递数据

4.3 兄弟组件组件的数据共享

5. ref引用

6. 动态组件

相关文章