实验1:Vue开发基础

您所在的位置:网站首页 旅游网页设计课程实验报告 实验1:Vue开发基础

实验1:Vue开发基础

2023-06-13 07:35| 来源: 网络整理| 查看: 265

源代码:实验1(1)).rar-DNS文档类资源-CSDN下载

Web前端开发技术课程实验报告

实验1:Vue开发基础

姓名:_   __ _   ___   ___   班级:_ _ _   ___ _   __ 

学号:_   ____   ___   ___    成绩:_ _ _   __          

一、实验目的:

掌握Vue开发环境的搭建、开发和调试工具的使用以及Vue项目的创建。掌握Vue实例的创建及数据的绑定、Vue的事件监听操作、Vue组件的注册及组件之间的数据传递的方法以及Vue生命周期钩子函数的使用。掌握Vue提供的全局API。掌握Vue实例对象中的常用属性。

二、实验要求:

具备Html、CSS和JavaScript的简单基础对Vue有一个整体的认识,特别是理解使用Vue的页面结构,能够编写简单的Hello World程序了解Vue的常用全局API和实例属性及其使用编写程序完成以下实验内容并上交实验报告(电子文档,以班级、学号后两位、姓名、实验序号命名,如:计算机18-1班01冯晨月实验1)

三、实验内容:

    (一)实验基础

1、如何利用Vue将Hello world 渲染到页面上

(1)需要提供标签用于填充数据

注意: 在标签中使用插值语法的形式 即 {{}} 进行填充数据

(2)引入vue.js库文件

注意:一定要先引入Vue文件 在使用Vue语法  因为存在作用域的问题

(3)使用vue的语法做功能

new Vue()  创建一个Vue的实例 

在构造函数中以对象的形式做一些配置 

(4)利用Vue将数据渲染到页面上

数据写在data 里面

2、M、V、VM  分别代表什么?

M (model)数据层

Vue 中 数据层都放在 data 里面

V (view) 视图

Vue 中 view 即HTML页面

VM (view-model) 控制器

 Vue 中 将数据和视图层建立联系

vm 即 Vue 的实例

3、全局API

(1) 全局API用于先声明全局变量或者直接在Vue上定义一些新功能。

(2) 全局API不在构造器里。Vue内置了一些全局API,可在构造器外部用Vue提供的API函数来定义新的功能。

4、本次实验主要掌握通过v-model 实现数值的双向绑定,给按钮绑定事件处理方法,将得到的结果渲染到页面上的方法以及通过Vue.use指令和vu.$slot属性的使用掌握全局API和实例属性的使用方法。

(二)实验题

1、请实现一个比较两个数字大小的页面。

2、请实现一个简单的网页计算器。

3、请使用插槽vm.$slot实现一个导航栏结构。

4、请创建一个自定义插件,实现一个登录页面。

四、设计思路:

五、实验过程中遇到的问题及解决手段:

六、本次实验的体会(结论):



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3