Vue.js前端开发案例教程项目二 Vue.js开发基础.pptx

Vue.js前端开发

案例教程

项目1Vue.js入门

项目2Vue.js开发基础

项目3Vue.js指令

项目4Vue.js组件

全书目录

项目5过渡动画

项目8综合案例——开发图书销售网站

项目7网络请求与状态管理

项目6路由管理

项目二

Vue.js开发基础

能够搭建简单的Vue.js实例

能够使用不同的数据绑定方法渲染HTML元素

能够使用计算属性和侦听器处理数据

技能目标

02

养成脚踏实地、夯实基础的学习习惯

树立自信心，能够在面对困难时保持乐观积极的态度，不断追求自我突破

素养目标

03

掌握Vue.js实例的创建方法

掌握如何定义数据和方法

掌握数据绑定的方法

掌握计算属性与侦听器的用法

知识目标

01

项目目标

01

02

项目描述

小刘是一名软件开发工程师，主要负责订餐系统项目的前端开发。

01

02

项目描述

小刘完成订餐系统项目的创建并熟悉项目的基本结构后，决定先制作订餐系统的登录模块和商家简介模块。

·在项目中新建一个单文件组件

·构建组件的基本框架

·在组件中定义登录模块的相关内容

·通过数据绑定获取登录模块中用户输入的登录信息

·使用计算属性设置“登录”按钮的状态

·查看登录模块的页面效果

01

制作订餐系统登录模块

项目分析

·在项目中新建一个单文件组件

·构建组件的基本框架

·在组件中定义商家简介模块的相关内容

·通过数据绑定将商家的基本信息显示在页面中

·查看商家简介模块的页面效果

02

制作订餐系统商家简介模块

项目分析

项目准备

全班学生以3～5人为一组进行分组，各组选出组长。组长组织组员扫码观看“Vue.js的前置知识”视频，讨论并回答下列问题。

Vue.js的前置知识

1.学习Vue.js之前需要掌握哪些前端技术？

2.在Vue.js中，用于定义页面行为和逻辑的前端技术是什么？

思考问题

项目准备

01

Vue.js实例

计算机属性与侦听器

项目考核

项目实训

03

05

07

02

数据绑定

项目实施

项目评价

项目总结

04

06

08

项目导航

创建方法

Vue.js实例

创建Vue.js实例：在Vue.js中使用createApp()函数，传入的对象是一个根组件，其他组件可以作为其子组件。

使用单文件组件作为根组件创建Vue.js实例，可以直接导入单文件组件，并将其传入createApp()函数中。

语法格式如下：

import{createApp}fromvue //导入函数createApp()

importAppfrom./App.vue //导入单文件组件作为根组件

const实例名=createApp(App)//创建Vue.js实例

创建方法

Vue.js实例

渲染页面：Vue.js实例调用mount()方法，该方法接收一个容器参数（实际的HTML元素或CSS选择器字符串），表示将根组件渲染在该容器中。

语法格式如下：

!--HTML--

divid=app/div

//JavaScript

const实例名=Vue.createApp(

//根组件

{…}

)

实例名.mount(#app) //将实例挂载到id为app的HTML元素上

高手点拨

创建方法

Vue.js实例

在HTML文件中，引入Vue.js框架后，要使用Vue.js提供的函数，需要在函数名前加上“Vue.”，如“Vue.createApp()”。

在Vue.js项目中，可以使用import语句导入所需的函数，如“import{createApp}fromvue”，然后直接使用函数，如“createApp()”。

setup(){

const数据名=数据值 //定义数据

const方法名=()={…} //定义方法

return{数据名,方法名}

}

Vue.js中的数据和页面是分离的，在实现数据显示之前，需要先在根组件中通过setup()函数定义所需的数据与方法，语法格式如下。

数据和方法

Vue.js实例

①箭头函数定义

②关键字function定义

function方法名(){…}

保存Vue.js

01

应用示例1：HelloVue.js

Vue.js实例

搭建网页基本框架

02

Vue.js实例

代码如下：

应用示例1：HelloVue.js

编写网页内容

03

Vue.js实例

在body标签中编写网页内容,代码如下：

“case2-1.html”文件的页面效果

应用示例1：HelloVue.js

文本插值（最基本的数据绑定方式）

数据绑定

使用“Mustache”语法（即双