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

文章目录

  • 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>Documenttitle>
  <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>Documenttitle>
  <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')

你可能感兴趣的:(前端,vue.js,学习,笔记)