江湖数字化平台
登录

更简单的网页编程方法 - VueJS

12002

1. 本课介绍

在这节课中，你将学习以下内容：首先，认识VueJS是什么，为何要选择Vue以及VueJS在编程中的优势。接着，通过一个简单示例来学习VueJS的模板、变量和函数的编写方式，从而初步掌握VueJS编程的方法。

通过实际操作，你将使用VueJS改写一个计算器的代码。这样做的目的是为了体验VueJS编程相较于之前学习的03课中简单计算器代码的优势。

如果想用VueJS编写更为复杂的页面代码，可以进一步学习扩展阅读中的内容，深入了解VueJS模板语法、计算属性、监听属性以及组件等更多内容。

2. 什么是VueJS？

在之前的课程中，我们曾编写过一个简单的计算器。当需要修改HTML内容时，传统的方法是通过操作HTML标签来实现。然而，如果页面中有许多需要改变的地方，这种方式会变得非常繁琐。其实有更简单的编程方法，VueJS就其中的一种。

VueJS是在HTML、CSS和JavaScript语言基上开发的的前端框架，其实就是一套代码工具包，允许开发者将数据（变量）和模板进行关联，当数据发生变化时，网页会自动更新，无需手动操作HTML代码。VueJS简化了编写代码的工作，提高了开发效率。

3. VueJS的特点和优势

网页显示动态数据的原理，就是将动态数据填入到模板的指定位置，来显示出最终的网页内容，VueJS也是完成这样的一个过程，只是它的模板、脚本的写法有不同的地方。

打开菜鸟教程模板语法，

002-06-Vuejs-模板语法.png

点击“尝试一下”，看到页面右边的显示的是message的值。

002-06-Vuejs-模板语法说明.png

从左边代码看VueJS模板和脚本的写法：

模板：
{{ message }}:把变量message的值'Hello Vue.js!'显示出来，不需要写语句获取变量的值。

脚本：

  1. new Vue({
  2.   el: '#app',
  3.   data: {
  4.     message: 'Hello Vue.js!'
  5.   }
  6.   })

这段代码的写法，表示这是一个用VueJS写的脚本，这里定义了变量 message，它的值是'Hello Vue.js!'。var app = new Vue({ })叫做Vue实例，是VueJS的基本代码块。

通过尝试发现：VudJS的变量和模板互相关联，当变量发生变化时，网页会自动更新，无需手动操作HTML代码。

继续在这段代码的里面增加一个输入框，“点击运行”：

002-06-Vuejs-模板语法加输入框.png

当你在页面上输入新内容，你的输入会立刻被保存到变量里，v-model="message" 表示把这个输入框的值保存到变量message中，页面自动更新。

再继续在这段代码里面增加一个按钮和函数：

002-06-Vuejs-模板语法加按钮.png

点击点我按钮后，变量message值被函数changeMessage改变了，模板中的值{{ message }}相应发生变化，页面自动更新。

通过用VueJS编写的这个例子，总结出VueJS的特点和优势：

创建了变量里的数据与页面上显示的内容之间的关系，当页面上输入新内容，会同步保存到脚本中的变量里；当脚本变量发生变化，页面上的内容跟着改变。

4. 认识VueJS的模板、变量和函数

学习用VueJS来编程，从最基本的模板、变量、函数的写法学习VueJS：

VueJS模板的写法：{{}}

  • VueJS使用一对花括号{{}}来表示模板，用于将数据动态地显示在页面上。

  • {{}}里面是变量, 这个变量可以在VueJS的变量data：{}里面找到（下面会学习data：{}的写法），用VueJS可以很方便的通过变量来控制需要显示的内容。例如：

  1. <div id="app">    
  2.   <input v-model="message"><br>
  3.   <p>{{ message }}</p>
  4.   <button v-on:click="changeMessage">点我</button>
  5. </div>

{{ message }}这里{{}}里面的message是变量，通过这个写法可以直接在模板里面取到变量里面的数据。

VueJS变量的写法：data

  • Vue实例 var app = new Vue({})的里面出现data：{}，这就是VueJS变量的写法。
  • VueJS变量data：{}，{}里面放的各种变量，不需要用Var定义变量，直接可以用。例如：
  1.   var app = new Vue({
  2.     el: '#app',
  3.     data: {
  4.       message: 'Hello Vue.js!'
  5.     },
  6. })

在data：{}里面，定义了message是一个变量，在它里面放入了字符串'Hello Vue!'。

VueJS函数的写法：method

  • 在Vue实例中，method：{}是用来定义函数的，{}里面可以放多个函数，出现function()，就表示这是一个函数，例如：
  1.  var app = new Vue({
  2.     el: '#app',
  3.     methods: {
  4.         changeMessage: function() {
  5.           this.message = '点击按钮改变message';
  6.      }
  7.    }
  8. })

changeMessage: function(){}，这里函数名字changeMessage放在了function的前面， 加上:， 后面跟着函数function() {}，function() {}写法和Javascript的一样。

5. 项目：用VueJS改写计算器

了解了使用VueJS最基本的编程方法，现在通过VueJS改写的简单计算器代码的项目，在实操中更深入学习这些写法。

在使用VueJS编程之前，要引入VueJS已经写好的代码库加入到你的代码里，这种做法叫做引用。如果不加入这行代码，用VueJS的写法就会报错。会引用别人写好的代码，是程序员的必备技能。

  1.   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

复制下面的代码在Vscode里面生成文件：

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
  4.   <div id="app">
  5.     <input v-model="x"><br>
  6.     <button @click="b()">=</button><input v-model="r"><br>
  7.     <button @click="a(1)">1</button>
  8.     <button @click="a(2)">2</button>
  9.     <button @click="a(3)">3</button><br>
  10.     <button @click="a(4)">4</button>
  11.     <button @click="a(5)">5</button>
  12.     <button @click="a(6)">6</button><br>
  13.     <button @click="a(7)">7</button>
  14.     <button @click="a(8)">8</button>
  15.     <button @click="a(9)">9</button><br>
  16.     <button @click="a('+')">+</button>
  17.     <button @click="a(0)">0</button>
  18.     <button @click="a('-')">-</button>
  19.   </div>
  21. <script>
  22.   new Vue({
  23.     el: '#app',
  24.     data: {
  25.       r: "",
  26.       x: ""
  27.     },
  28.     methods: {
  29.       a: function (x) {
  30.         this.r = this.r+x;
  31.       },
  32.       b: function () {
  33.         this.x = eval(this.r).toString();
  34.       }
  35.     }
  36.   })
  37. </script>
  38. </html>

打开浏览器文件会看到下面的页面：

002-06-vuejs计算器.png

把上面的代码与04课用HTML和Javacriptd写的简单计算器的代码进行对比，会发现什么：

  • 代码行数减少了
  • 脚本中不需要用HTML改变内容的语句，减少了代码编写量。
  • <input v-model="r">输入框直接显示变量r的值。

VueJS简化了代码的复杂性，这是VueJS的优势， 编程变得简单了。

6. 扩展阅读：读文档，自学VueJS的模板渲染

上面介绍了最简单的VueJS的模版语法，如果要写出丰富的页面，还需要了解更多模板的写法，VueJS称这些写法叫做模板语法、模板渲染。

打开VueJS官网 看到左边栏，里面有模板语法、条件渲染、列表渲染等，学习更多模版渲染的内容。

7. 扩展阅读：读文档，自学计算属性、监听属性和组件

VueJS 的计算属性、监听属性能够代替复杂的JavaScript逻辑，解决重复计算和监听数据变化的问题，简化复杂操作，点开下列文档学习计算属性和监听属性的内容。

VueJS 组件（Component）是 VueJS 最强大的功能之一。组件可以扩展 HTML 元素，封装可重复使用的代码，能够减少代码的编写量,点开下列文档学习组件的内容。