20231018-黑马Vue学习笔记-第三天

最新推荐文章于 2024-02-03 13:34:08 发布

ぃ咔哇依°ヽ

最新推荐文章于 2024-02-03 13:34:08 发布

阅读量138

点赞数

分类专栏：前端文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/qq_44887198/article/details/133898493

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章目录

Vue 生命周期
生命周期案例
开源可视化图表
工程化开发环境安装
根组件（App.vue）
普通组件的注册使用

Vue 生命周期

①创建：beforeCreate、created
②挂载：beforeMount、mounted
③更新：beforeUpdate、updated
④销毁：beforeDestroy、destroyed

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="box">
    <h1>计数器</h1>
    <button @click="count--">-</button>
    <span>{{count}}</span>
    <button @click="count++">+</button>
  </div>

  <script>
    const app = new Vue({
      el: "#box",
      data: {
        count: 100
      },
      // 1、创建阶段（准备数据）
      beforeCreate() {
        console.log('beforeCreate 响应式数据准备好之前', this.count);
      },
      created() {
        console.log('created 响应式数据准备好之后', this.count);
        // 可以开始发送初始化渲染请求了
      },
      // 2、挂载阶段（渲染模板）
      beforeMount() {
        console.log('beforeMount 模板渲染之前');
      },
      mounted() {
        console.log('mounted 模板渲染之后');
        // 可以开始操作dom了
      },
      // 3、更新阶段（修改数据，更新视图）
      beforeUpdate() {
        console.log('beforeUpdate 数据修改了 视图还没更新');
      },
      updated() {
        console.log('updated 数据修改了 视图已经更新');
      },
      // 4、卸载阶段（销毁实例）
      beforeDestroy() {
        console.log('beforeDestroy');
        // app.$destroy() // 在浏览器控制台输入 卸载当前项目
      },
      destroyed() {
        console.log('destroyed');
      }
    });
  </script>
</body>

</html>

生命周期案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="box">
    获取焦点：<input type="text">
    <ul>
      <li v-for="(item,index) in list" :key="item.id">
        <div>{{item.title}}</div>
        <div>{{item.source}}</div>
        <div>{{item.time}}</div>
        <img :src="item.img" alt="" style="width: 192px; height: 108px;">
      </li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: "#box",
      data: {
        list: []
      },
      async created() {
        const res = await axios.get('https://hmajax.itheima.net/api/news'); // 请求数据

        console.log(res);

        this.list = res.data.data;
      },
      mounted() {
        document.querySelector("input").focus(); // 获取焦点
      }
    });
  </script>
</body>

</html>

开源可视化图表

Apache ECharts

工程化开发环境安装

1、全局安装（一次，以管理员身份打开cmd）：yarn global add @vue/cli 或 npm i @vue/cli -g --no-fund
2、查看Vue版本：vue --version
3、创建项目架子：vue create project-name（项目名不能用中文）
4、启动项目：yarn serve 或 npm run serve （找package.json）
5、语法高亮插件：Vetur

根组件（App.vue）

<template> <!--只能有一个根节点-->
<div class="box" >
  <div class="test" @click="fn">Hello world!</div>
</div>
</template>

<script>
export default {
  methods:{
    fn(){
      alert('你好');
    }
  }
}
</script>

<style lang="less">
// 让style支持less 需要安装less less-loader 依赖包
.box{
  width: 300px;
  height: 300px;
  background-color: aqua;
  .test{
    width: 100px;
    height: 100px;
    color: red;
    background-color: blueviolet;
  }
}
</style>

普通组件的注册使用

1、局部注册：只能在注册的组件内使用
①在components文件夹下创建.vue文件（快速生成结构）
②在使用的组件内导入并注册后使用

<template>
  <div class="app">
     <XyHeader></XyHeader> <!-- 使用 -->
  </div>
</template>

<script>
import XyHeader from './components/XyHeader.vue' // 导入
export default {
  components:{
    XyHeader:XyHeader // 注册 可简写XyHeader
  }
}
</script>

<style>
.app{
  width: 640px;
  height: 480px;
  background-color: aqua;
  margin: 0 auto;
}
</style>

③注意：组件名规范大驼峰命名法 HmHeader
2、全局注册（main.js）其他跟局部注册都一样

import Vue from 'vue'
import App from './App.vue'
import XyButton from './components/XyButton.vue' // 导入

Vue.config.productionTip = false // 全局注册

Vue.component('XyButton', XyButton)

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