Vue2+Vue3

来自姬鸿昌的知识库
Jihongchang讨论 | 贡献2024年7月28日 (日) 13:49的版本
跳到导航 跳到搜索

尚硅谷 张天禹

https://www.bilibili.com/video/BV1Zy4y1K7SH


https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1

课程简介

1.vue 基础

2.vue-cli(vue 脚手架,专门做工程化开发)

3.vue-router(用于在 vue 当中实现前端路由)

4.vuex(当应用足够复杂时,借助它帮我们保管数据)

5.element-ui(好看的 UI 组件库)

6.vue3


https://www.bilibili.com/video/BV1Zy4y1K7SH?p=2

Vue 是什么?

Vue 是一套用于构建用户界面渐进式 JavaScript 框架。

对于“渐进式”的解释:

Vue 可以自底向上逐层的应用

简单的应用:只需要一个轻量小巧的核心库(压缩完只有100kb)。

复杂的应用:可以引入各式各样的 Vue 插件。


Vue 的特点

https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=3

Vue 官网使用指南

https://cn.vuejs.org/

Vue 2

https://v2.cn.vuejs.org/


https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=4

区分 Vue 的开发环境版本(更多调试信息)和生产环境版本(更小体积、更高执行效率)

vue.js 和 vue.min.js

注意:如果用 vue.min.js,很多情况下出问题会直接异常,不会在 console 输出什么错误信息;用 vue.js 就会输出错误信息,方便开发者调试。

Vue 的开发工具:Devtools

https://devtools.vuejs.org/guide/installation.html


Vue.config

关闭 Vue 在浏览器控制台中的生产提示:

    <script>
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
    </script>

注意:现在已经不好使了,新版本中, Vue 一加载马上会执行验证并在控制台提示警告信息,不能保证上面的代码在验证、提示前执行, 所以现在只有直接修改 vue.js 源码:

productionTip: false,

才行。

Vue Hello 小案例

Vue 模板语法

Vue 数据绑定

Vue el与data的两种写法

MVVM模型

Vue Object.defineProperty

Vue 理解数据代理

Vue 中的数据代理

Vue 事件处理

Vue 事件修饰符