Python 实战 · 从 0 到 1 搭建直播视频平台
Barry
某上市公司技术研发总监
3717 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 42 讲
Python 实战 · 从 0 到 1 搭建直播视频平台
15
15
1.0x
00:00/00:00
登录|注册

04|Vue概览:Vue哪些内容是你必须要掌握的?

你好,我是 Barry。
相信想要学习前端的你一定听说过 Vue 框架。
Vue 和 React 都是 Web 前端工程师必学必会的框架,在企业中有着广泛的应用。这节课我们就来揭开 Vue 的神秘面纱,一起来看看 Vue 里必须掌握的知识点,以及怎样学习 Vue 才更加高效。

初识 Vue

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型。无论是简单还是复杂的界面,Vue 都可以胜任,可以说是我们高效开发用户界面的一大利器。
Vue 有三个核心特性。
声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,方便我们以声明式描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性:Vue 会自动跟踪 JavaScript 状态,并在它发生变化时响应式地更新 DOM。
双向数据绑定:JS 数据的变化会被自动渲染到页面上,Vue 还可以自动获取页面上发生变化的表单数据,并更新到 JS 数据中。
了解 Vue 的核心特性还远远不够,要真正认识 Vue,我们还需要了解 Vue 的项目框架。

目录结构

我们这就来看看 Vue 的目录包含哪些内容,它们的用途又是什么。
下面是 Vue-cli 脚手架项目目录,也是我们课程开发中用的标准框架。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

Vue.js是一款用于构建用户界面的JavaScript框架,具有声明式渲染、响应性和双向数据绑定等核心特性。本文介绍了Vue的核心特点和设计理念,强调了Vue项目的目录结构和必备知识点,如Vue实例、组件、指令、计算与监听、路由配置、整合其他依赖等。重点强调了组件、生命周期、指令和计算监听属性在开发过程中的重要性,以及对MVVM架构思想的应用。读者可以通过官方文档、相关书籍和课程,以及实际项目开发来进一步学习和应用Vue框架,从而掌握在真实项目中使用Vue的方法。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Python 实战 · 从 0 到 1 搭建直播视频平台》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(19)

  • 最新
  • 精选
  • 贾维斯Echo
    MVVM 是一种软件架构模式,它是 Model-View-ViewModel 的缩写。该模式是由微软推出的,旨在帮助开发者更好地管理前端应用程序中的复杂性。 具体来说,MVVM 将一个前端应用程序分成三个部分: Model:数据模型层,它代表应用程序中的数据和业务逻辑。 View:视图层,它是用户界面的呈现层,用于展示数据。 ViewModel:视图模型层,它是连接 Model 和 View 的桥梁。ViewModel 将 Model 中的数据转换成 View 中可以显示的格式,并将 View 中的用户操作转换成 Model 中的操作。ViewModel 通常包含一个命令对象(Command),用于触发具体的业务逻辑。 在 Vue 中,Vue 实例就充当了 ViewModel 的角色,模板(template)就是 View 层,而组件中的数据就是 Model 层。Vue 通过数据绑定机制将 ViewModel 和 View 层连接起来,当 ViewModel 中的数据发生变化时,View 层会自动更新,反之亦然,这样就大大简化了前端应用程序的开发过程。

    作者回复: 解释的非常标准和详细,都可以用作教材了,继续加油。

    2023-05-05归属地:上海
    4
  • 未来已来
    记录下遇到的问题及解决 vue 版本 2.9.6 1. cnpm 这个是阿里的,需要单独安装,跟 npm 是互补作用 2. vue init webpack my_project 失败,直接拉取最新的 webpack 包到本地,然后把 webpack 替换成 本地路径 3. 安装 chromedriver 失败,直接下载跟本地 chrome 匹配的版本,然后配置到环境变量 path 中 4. npm run dev 启动失败:安照提示安装即可(npm 安装失败可用 cnpm 替代)

    作者回复: 感谢分享,总结的非常全面,是的cnpm是国内镜像,下载速度更快一下。希望你在学习过程有不错的总结,多多分享,帮助更多的同学。

    2023-06-26归属地:广东
    3
  • 浩仔是程序员
    老师你好,index.html是一定要的吗?里面有个div id = 'app', 跟 app.vue里面的 div Id = 'app'有什么区别,我们new Vue实例#app绑定的是哪个?

    作者回复: 你好,泽浩。index.html文件是必需的,不可以删除的,它是项目的入口文件,其中包含了Vue应用的基本结构和初始设置。index.html的id属性被设置为'app',这个元素就是Vue应用的主容器。在app.vue文件中,它的id属性被设置为'app',这个元素是Vue组件的主容器。这是两者的却别。另外new Vue实例#app挂载到app.vue文件中的<div>。如果有不懂可以追评!

    2023-06-17归属地:广东
    1
  • Geek_come
    老师,您这里应该用编译器带大家走一遍,只是建议

    作者回复: 好的,感谢建议,之后可以做一些内容的补充,从编译器角度切入是非常不错的idea

    2023-11-02归属地:北京
  • mynameisi
    老师,我的node.js和npm版本和你的一样,然后我安装了vue-cli2.5.1,在初始化项目时出现了版本不兼容的情况,于是我把vue-cli2.5.1更新到了2.9.6版本,初始化项目成功,但是之后的初始化中又出现安装 chromedriver 失败,于是我又用了npm cache clean --force npm install chromedriver@2.46.0这两命令,成功了,我想知道我明明是想安装您教的来的,后面不知道为什么偏了,那我的又正不正确呢?

    作者回复: 你在初始化项目时遇到了安装chromedriver失败的问题。这个问题可能是由于npm缓存导致的。使用npm cache clean --force命令可以清除npm缓存,然后再使用npm install chromedriver@2.46.0命令可以正确安装chromedriver。 你在描述中没有提到在安装vue-cli2.9.6版本后是否再次尝试初始化项目。如果你在安装vue-cli2.9.6版本后仍然遇到问题,那么可能需要进一步检查你的环境和配置。 还有就是在更新和安装软件包时,最好在命令行中使用npm install -g <package-name>命令全局安装,而不是直接在项目根目录下安装。这样可以确保你的全局环境中的软件包版本和项目中的软件包版本一致,避免出现不兼容的情况。 你可以再尝试一下,然很根据我给你的提示,有问题可以回评。

    2023-11-01归属地:河南
    3
  • mynameisi
    老师,咱们node.js有版本要求吗,我是在阿里云云服务器上使用宝塔面板来安装node.js的

    作者回复: "node": ">= 6.0.0",这个就可以,你可以在package.json中看到

    2023-10-28归属地:河南
  • 明仔的阳光午后
    计算属性部分 ``` <script> export default { data() { return { count: 1 } }, computed: { // 每当 count 改变时,这个函数就会执行 doubleCount() { return count * 2 } } } </script> ``` 这里doubleCount直接使用了count而不是this.count,是其他地方有定义吗?我按照代码敲会出现ReferenceError: count is not defined

    作者回复: 这个count就是在data里面初始化的值,已经初始化了,所以可以直接使用即可。

    2023-08-31归属地:福建
  • 不再是入门水平python的小宇
    要不是chatgpt,这门课程我估计我又是从入门到放弃。搭建环境真的太难了

    作者回复: 如果是初次配置,得确需要反复听课和操作一下,你还是非常牛的,通过chatgpt来解决,为你点赞,也希望继续加油,攻克难关!

    2023-08-27归属地:上海
  • 神经蛙
    这一段有点跟不上,是不是有点过快了。

    作者回复: 这一部分的内容是比较多一些,也是把核心的知识点都聚拢起来了,也建议可以反复的学习和应用,在前端部分在吃透概念之后就可以快速实操起来,所以这一部分你可能会感觉快一些,我建议可以反馈收听几次,把知识点切割开来

    2023-08-23归属地:北京
  • ls
    cnpm install --global vue-cli ---> 是不是多了一个c npm install --global vue-cli

    作者回复: 不是的哦,就是cnpm。cnpm的源是来自国内的淘宝镜像,而npm的源是国外的服务器。因此,如果你在国内使用npm,由于网络原因,下载速度可能会很慢,而cnpm可以解决这个问题。

    2023-08-19归属地:上海
收起评论
显示
设置
留言
19
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部