实验1:Vue开发基础

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

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

实验1Vue开发基础

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

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

一、实验目的:

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

二、实验要求:

  1. 具备Html、CSS和JavaScript的简单基础
  2. 对Vue有一个整体的认识,特别是理解使用Vue的页面结构,能够编写简单的Hello World程序
  3. 了解Vue的常用全局API和实例属性及其使用
  4. 编写程序完成以下实验内容并上交实验报告(电子文档,以班级、学号后两位、姓名、实验序号命名,如:计算机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、请创建一个自定义插件,实现一个登录页面。

四、设计思路:

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Werfgf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值