Web前端开发技术:Vue开发基础(1)

一、实验目的:

掌握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>

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页