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

一、实验目的：掌握Vue开发环境的搭建、开发和调试工具的使用以及Vue项目的创建。掌握Vue实例的创建及数据的绑定、Vue的事件监听操作、Vue组件的注册及组件之间的数据传递的方法以及Vue生命周期钩子函数的使用。二、实验要求：具备Html、CSS和JavaScript的简单基础对Vue有一个整体的认识，特别是理解使用Vue的页面结构，能够编写简单的Hello World程序编写程序完成以下实验内

nickdlk

3938人浏览 · 2021-01-16 17:25:02

nickdlk · 2021-01-16 17:25:02 发布

一、实验目的：

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

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^