实验1:Vue开发基础 |
您所在的位置:网站首页 › 旅游网页设计课程实验报告 › 实验1:Vue开发基础 |
源代码:实验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 |