一、实验目的：

掌握Vue开发环境的搭建、开发和调试工具的使用以及Vue项目的创建。

掌握Vue实例的创建及数据的绑定、Vue的事件监听操作、Vue组件的注册及组件之间的数据传递的方法以及Vue生命周期钩子函数的使用。

二、实验要求：

具备Html、CSS和JavaScript的简单基础
对Vue有一个整体的认识，特别是理解使用Vue的页面结构，能够编写简单的Hello World程序
编写程序完成以下实验内容并上交实验报告

三、实验内容：

（一）实验基础

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、本次实验主要掌握通过v-model 实现数值的双向绑定，给按钮绑定事件处理方法，将得到的结果渲染到页面上的方法。

（二）实验题

1、请实现一个比较两个数字大小的页面。
2、请实现一个简单的网页计算器。

四、设计思路：

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

六、程序源代码：

1．

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Calculate</title><script src="vue.js"></script>
</head>
<body>
<div id="app">第一个数字:<input type="number" v-model="Num1">第二个数字:<input type="number" v-model="Num2">结果:<a>{{result}}</a>
</div>
<script>var vm = new Vue({el: '#app',data: {Num1: 1,Num2: 2,result: "",},// 使用watch监听Num1,Num2变化watch: {Num1 (newName, oldName) {console.log(newName, oldName);this.checkNum();},Num2 (newName, oldName) {console.log(newName, oldName);this.checkNum();}},methods: {checkNum () {console.log("checknum");if(this.Num1 > this.Num2){this.result = "第一个数字大于第二个数字";}else if(this.Num1 < this.Num2){this.result = "第一个数字小于第二个数字";}else if(this.Num1 == this.Num2){this.result = "两个数字一样大";}}}})
</script>
</body>
</html>

2．

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Calculater</title><script src="vue.js"></script>
</head>
<body>
<div id="app"><h2>简单网页计算器</h2><p>请输入第一个数：<input type="text" v-model="firNum"></p><p>请输入第二个数：<input type="text" v-model="secNum"></p><p><button @click="plus">+</button><button @click="dec">-</button><button @click="multiple">x</button><button @click="devise">/</button></p><p>计算结果：<span v-text="result"></span></p>
</div>
<script>var vm = new Vue({el:"#app",data:{firNum:"",secNum:"",result:""},methods:{plus() {this.result = parseInt(this.firNum) + parseInt(this.secNum);},dec() {this.result = parseInt(this.firNum) - parseInt(this.secNum);},multiple() {this.result = parseInt(this.firNum) * parseInt(this.secNum);},devise() {this.result = parseInt(this.firNum) / parseInt(this.secNum);}}})
</script>
</body>
</html>

Web前端开发技术：Vue开发基础（1）相关推荐

Web前端系列技术之HTML基础（从入门开始）①
Web前端系列技术之HTML基础(从入门开始)① 从这里开始,我便开始记录每天重新学习巩固HTML语言的过程,这不仅仅是为了提高自己的熟练度,更是为了让自己的博客一步一步的见证我走向前端全栈工程师这条 ...
Web前端开发技术:Vue开发基础（2）
一.实验目的: 掌握Vue提供的全局API. 掌握Vue实例对象中的常用属性. 二.实验要求: 了解Vue的常用全局API和实例属性及其使用编写程序完成以下实验内容并上交实验报告三.实验内容: ( ...
web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
html5前端开发做什么,Web前端能做什么开发
对于想要学习HTML5大前端的人来说,从哪里开始入手是困扰他们的难题.前端开发工作已经变的越来越复杂,仅仅是想罗列一份前端开发的学习列表就已经是一件艰巨的工作.曾经只要会编写HTML, CSS和Jav ...
好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...
web基础设施知识；web前端安全***，客户端安全基础
web基础设施知识:web前端安全***,客户端安全基础(持续更新,后续会加入以BurpSuite等工具执行黑盒***测试的内容) <google chrome浏览器安全冲浪部分> 1.直 ...
web前端主要技术概述
web前端主要技术概述参考资料: 2018 Web 开发者路线图 2017年前端框架.类库.工具大比拼本文主要是介绍部分主流和新兴的web前端技术,希望能帮助想学web前端的小白,理清其技术学习路 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...

Web前端开发技术：Vue开发基础（1）