Vue基础课件

本文由用户“billyding”分享发布 更新时间:2021-11-15 01:00:33 举报文档

以下为《Vue基础课件》的无排版文字预览,完整格式请下载

下载前请仔细阅读文字预览以及下方图片预览。图片预览是什么样的,下载的文档就是什么样的。

软件工程实验2021小提示:

本PPT针对的是从未接触过Vue框架的同学,力图帮助同学们确定要学习的内容大纲。因此针对各项技术,本PPT均以提及为主,无法深入介绍该技术的各项应用。

实际开发中会用到各种各样的知识,这里建议有针对的,带着需求去学习。但总的来说,在Vue部分你需要使用的工具应该都会在本视频中提及。

另外,针对没讲到的CSS部分,推荐几个大家一定要了解的知识点:盒子模型,display属性以及flex布局。我在CSS资料中放入了一些之前做培训时用到的md文档,可以简单参考下。目 录01.Vue基础Vue实例注册条件渲染循环渲染双向绑定监听事件——内联js监听事件

——绑定方法绑定事件可以传参。

如果不写传参的话默认传入events02.Vue项目的构建安装与项目创建Vue CLI 4.x 需要?Node.js?v8.9 或更高版本 (推荐 v10 以上)。依赖的环境:安装指令:npm install -g @vue/cli检查指令:vue --version(出现@vue/cli 4.x就可以了)创建项目:vue create 项目名

【创建项目时需要配置,可以等视频也可以直接自行配置一个有babel、vuex、router的项目,不建议选择Linter】关于Vue-clinpm run serve运行项目:安装依赖:npm install xxx (对应依赖的文档中一般有注明具体指令)打包项目:npm run build(用于部署项目,详情可自行百度:vue项目部署)关于Vue-cli唯一的html文件,

head相关设置在这里修改静态资源存放处

一般包括图片、外部CSS等全局组件位置

(详见后续组件化)Vue Router

(Vue项目中的路由管理)状态管理模式

(多界面数据同步)页面组件存放位置全局的App.vue

Vue单页面应用的基础

所有其他(view)中的组件

都挂载在它下面Vue示例创建位置

有后续新的外部库安装也需要在这里注册组件与单页面组件组件是可复用的 Vue 实例,通常页面由多个组件构成,我们以树的形式组织他们。组件与单页面组件这里data一定要

用函数的形式

为了复用后每个组件的data独立将html部分包裹在template内

注意只能暴露一个根element组件内部可以使用Vue的一切:

data,methods,生命周期,

component...CSS部分 内容过长,仅展示头部和尾部部分文字预览,全文请查看图片预览。 前后端交互主要行为是后端书写接口文档,与前端约定数据格式,前端发送http请求,获取数据加载到页面

发送请求的方式可以有:ajax,jQuery-ajax,axios......学习参考

前后端交互axios的使用和封装(P143-147):https://doc.001pp.com/video/BV***Eh(其他内容可能有些老,但是想看的也可以看)

vue官方文档https://cn.vuejs.org/

mdn-web文档https://developer.mozilla.org/zh-CN/

[文章尾部最后300字内容到此结束,中间部分内容请查看底下的图片预览]

以上为《Vue基础课件》的无排版文字预览,完整格式请下载

下载前请仔细阅读上面文字预览以及下方图片预览。图片预览是什么样的,下载的文档就是什么样的。

图片预览