Vue第一周学习顺序

本文链接： https://blog.csdn.net/weixin_44195250/article/details/98093813

Day1

 数据的更新

    token收尾

    echarts使用

    富文本的底层原理
        contenteditable
        document.execCommand

    场景的跨域有哪些？
        服务器代理  http-proxy-middleware
        nginx反向代理
        cors
        jsonp


    聊天功能
        群聊：
            1、创建一个群
            2、将用户拉到这个群里
            3、连接共同的服务器
            4、发送消息的时候将消息发送给服务器，服务器转发给所有的用户(包括我自己)


            socket:持久化通信  
            (底层也是用到了TCP但是对TCP做一个一次二次的封装来实现持久通信)
            ajax:非持久化通信
            http:--->TCP



        WebSocket  H5新增的一个方法   即时聊天  兼容xing
        
    面试题:
        1、前后端数据交互的方式有哪些？
            ajax   socket

  Day2



     
       socket  webSocket  socket.io

  持久通信

  即时聊天  


  Vue
      渐进式

      尤雨溪

      MVVM

      特点：
          数据驱动视图

      虚拟DOM

      Object.definedPorperty

  new Vue({
      el:"Vue作用的范围",
      data:"当前Vue所需要的一些属性"
      methos:当前Vue所有的一些方法
  })


  v-text {{}}
  v-html
  v-show
  v-if
  v-else
  v-else-if
  v-bind
  v-for
  v-on
  v-pre
  v-once
  v-cloak


  修饰符
      stop
      prevent
      once
      enter


  $event

Day3

          v-model:
        双数据绑定

        Object.defindProperty

        表单如何使用v-model


    如何不使用v-model实现双数据绑定

    Vue.directive(指令的名称，指令实现的函数)

    computed 计算属性

    watch  属性监听

    过滤器  Vue.filter





    1、初始化项目
        npm init -y

    2、安装webpack
        cnpm install webpack webpack-cli -D

    3、创建src文件夹  创建dist文件夹

    4、创建webpack.config.js文件

    5、在src中创建入口文件 main.js

    6、初始打包
        npx webpack

    7、安装解析JS的babel文件
        cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

    8、安装解析CSS的loader文件
         cnpm install --save-dev style-loader css-loader  sass-loader node-sass

    9、安装html插件
        cnpm install -D html-webpack-plugin

    10、安装处理图片的loader
        cnpm install url-loader file-loader -D


    11 、安装处理vue的文件loader
        cnpm install -D vue-loader vue-template-compiler

    12、安装vue.js

        cnpm install vue -S


    13、安装服务器环境
        cnpm install webpack-dev-server -D

Day4

 vm实例身上的一些方法
        $mount()
        $forceUpdate()
        $destroy()
        $on
        $emit
        $off
        $once

    手动封装事件订阅


    生命周期
        beforeCreate
        created
        beforeMount
        mounted  ref
        beforeUpdate
        updated
        beforeDestroy
        detroyed

    组件
        页面上的任何一个部分都是组件
        模块是包含组件

        Vue.component

        components

        参数1 组件名称
        参数2 组件的配置项

        data不在是一个对象 而是一个函数返回一个对象


    组件：css  JS  HTML


    单文件组件
    .vue文件  
        template
        script
        style

    webpack:    模块化打包机

        entry
        output
        module
        plugins
        devServer
        resolve

Day5

 组件传值：
        父传子
            props
                数组
                对象
                    type
                    required
                    default

        子传父
            自定义事件   this.$emit
            插槽作用域

        非父子
            1、公共的vue实例对象
            2、手动封装Observer(事件订阅)
            3、EventBus
            4、Vuex


    动态组件
        component   is

       

    keep-alive
        include
        exclude
        max

        活跃状态
        缓存状态

    axios
        promise  http   浏览器 node


        axios.get(url,{
            params:{

            }
        }).then(()=>{})


        axios.post(url,{

        }).then(()=>{})


        axios({
            method:"请求的方式"
            url:请求的地址
            data：post提交数据
            headers:
            withCredentials:true
            timeout:
            baseUrl:""
        }).then()

Vue第一周学习顺序

猜你喜欢