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
相关文章
|
6天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
51 1
|
17天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
48 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
34 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
41 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
32 1
vue学习第7章(循环)
|
2月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
35 1
vue学习第九章(v-model)
|
2月前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
49 1
vue学习第十章(组件开发)
|
2月前
|
JavaScript 前端开发
vue学习第十一章(组件开发2)
欢迎来到我的博客,我是瑞雨溪,一名自学前端两年半的大一学生,专注于JavaScript与Vue。本文介绍Vue中的插槽(slot)使用方法,包括基本插槽、具名插槽及作用域插槽,帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助,请关注我,持续更新中!🎉🎉🎉
25 1
vue学习第十一章(组件开发2)
|
2月前
|
监控 JavaScript 前端开发
vue学习第十二章(生命周期)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期,从初始化到销毁各阶段的关键钩子函数及其应用场景,帮助你更好地理解Vue的工作原理。如果你觉得有帮助,欢迎关注我,将持续分享更多优质内容!🎉🎉🎉
37 1
vue学习第十二章(生命周期)

热门文章

最新文章