实验1：Vue开发基础

源代码：实验1（1）).rar-DNS文档类资源-CSDN下载

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

实验1：Vue开发基础

姓名：_   __　_   ___   ___   班级：_ _ _   ___　_   __　

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

一、实验目的：

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、请创建一个自定义插件，实现一个登录页面。

四、设计思路：

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

六、本次实验的体会（结论）：