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”语法（即双