Vue全知识脉络梳理

简介: 少年不识愁滋味,爱上层楼。爱上层楼。为赋新词强说愁。而今识尽愁滋味,欲说还休。欲说还休。却道天凉好个秋。一、ES6常用语法 -- 变量定义 -- 模板字符串 -- 类 -- 函数 -- 数据的解构二、vue的...

少年不识愁滋味,爱上层楼。爱上层楼。为赋新词强说愁。
而今识尽愁滋味,欲说还休。欲说还休。却道天凉好个秋。

一、ES6常用语法
    -- 变量定义
    -- 模板字符串
    -- 类
    -- 函数
    -- 数据的解构
二、vue的常用指令
    -- v-text
    -- v-html
    -- v-for 
    -- v-if
    -- v-show 
    -- v-on
    -- v-model
    -- v-bind
    -- 自定义指令
    -- 计算属性
    -- 获取DOM
    -- 指令修饰符
三、组件
    -- 注册
        -- 全局 局部 子组件
    -- 通信
        -- 父子 子父 非父子
    -- 混合
        -- mixins
    -- 插槽
        -- slot
四、路由
    -- 注册
        -- let routes= [{}.{}]
        -- 把routes注册到VueRouter对象中
        -- 把VueRouter对象注册到Vue实例对象中
        -- router-link
        -- router-view
    -- 路由的参数
        -- params, query
    -- 命名路由
        -- name
    -- 命名路由视图
    -- 子路由
    -- 手动路由
    -- 钩子函数
    -- $route  $router 区别
五、生命周期
    -- 监听
        -- 字符串
        -- 数组 
            -- 改变数组里的值是监听不到的
            -- app.$set(app.xxx, index, value)
        -- 对象
            -- app.$set(app.xxx, key, value)
            -- watch ==> deep: true
    -- beforeCreate
    -- created
    -- beforeMount
    -- mounted
    -- beforeUpdate
    -- updated
    -- beforeDestroy
    -- destroyed
六、npm 包管理工具 node.js
    -- npm install xxx@0.0.0(latest) pm i
    -- npm uninstall xxx
    -- npm i npm@latest -g
    -- npm update xxx
    -- 项目管理
        -- 切换到工作目录下
        -- npm init -y
七、webpack 打包上线
    -- 入口文件
    -- 出口文件
    -- webpack 4
        -- webpack 不独立存在
        -- npm i webpack webpack-cli
        -- 手动创建src目录
            -- index.js 默认入口文件
        -- 打包后自动生成 dist目录
            -- 放出口文件
        -- webpack mode development/p...
八、vue-cli 
    -- 下载vue-cli
        -- npm install vue-cli -g
        -- vue-cli@2.9.7
    -- 借助vue-cli帮助我们创建项目
        -- vue init webpack xxxx
            -- cd xxxx
            -- npm run dev
    -- npm run dev
        -- 没有node_moudels文件夹
            -- 切换到项目目录下
            -- npm install
            -- npm run build
            -- npm run dev

        -- xxxxx ... json .....
            -- npm cache clean --force
            -- 执行接下来的操作
        -- 没有package.json
            -- 没有切换到项目目录下

九、vuex 天花板
    -- 下载
        -- npm i vuex
    -- 导入vuex
        -- import vuex from "vuex"
        -- Vue.use(vuex)
    --  new vuex.Store({
            state: {
              show: false,
            }
        });
        -- Store 仓库
        -- state放数据的
    -- state 存放数据的
        -- this.$store.state.xxx
    -- getters 给state数据进行处理
        -- this.$store.getters.xxxx
    -- mutations 修改state中的数据
        -- 组件提交给仓库事件 (打报告)
            -- this.$store.commit("事件名称", data)
        -- mutations: {
            "事件名称": function(state, data){
                    state.xxx = data
            }
        }
十、ajax 和 axios 发送请求
        -- $.ajax({
            url: ''',
            type: xxxx,
            ....,
            success: function(){},
            error: function(){}
        })  
    -- url 接口
    -- axios
        -- this.$axios.request({
            url: "接口",
            method: "get",
            data: 
        }).then(function(data){})
        .catch(function(data){})




十一、MVC MTV模式
        -- Model View Control
        -- Model Template View
        -- 解耦 
    -- 前端
        -- 静态页面 模板工程师
        -- 动态页面  js出现了
        -- ajax技术  局部刷新
        -- 前端借鉴后端MVC思想 MVVM前端框架思想
        -- MVVM
            -- Model View ViewModel
            -- 数据驱动视图
    -- 前后端分离
        -- 移动端
            -- app 
                -- 前端 后端
            -- pc
                -- 前端 后端
        -- 前端一套 后端一套  前后端分离
        -- 前端vue 
        -- 后端Python  django
相关文章
|
11天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
4天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
14天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
4天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
11天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
30 9
|
10天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
9天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
14 2
|
9天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
9天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
10天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。