没时间学 Vue (2) —— 绑定（一）：简介

最新推荐文章于 2024-07-13 12:27:44 发布

可乐天尊

最新推荐文章于 2024-07-13 12:27:44 发布

阅读量187

点赞数 1

分类专栏：没时间学 Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/planet7/article/details/115282812

版权

没时间学 Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文简明介绍了Vue.js的基础知识，包括数据绑定、模板表达式和函数的使用。通过示例展示了如何利用Vue进行文本显示、计算属性以及事件处理。学习Vue，即使没有HTML、CSS和JavaScript基础，也能快速上手。同时，文章提供了一些学习资源链接，帮助深入理解Vue及其背后的JavaScript语法。

摘要由CSDN通过智能技术生成

第 (1) 篇啰嗦了半天，现在让我们正式来学一下 Vue。

常用的 Vue 功能可能有 30% 都在 Vue 介绍 这篇文章里面，我们换个视角掰碎了来学习 —— 关键是把握要点。

我们也假定你没时间学 HTML、CSS 和 JavaScript 这些基础的内容，也顺带简单提一下。

具体细节的内容，你还是得看前文 https://blog.csdn.net/planet7/article/details/115279727 里面提到的各个网站。

1、绑定

比如说，我们要显示一段文本 “没时间学 Vue”。

也就是说，我们就是要想办法写这样一段 HTML 出来（先不考虑样式）：

<div>没时间学 Vue</div>

如果用 Vue 的话，大概就是这个样子的。

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{message}}</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "没时间学 Vue",
        },
      });
    </script>
  </body>
</html>

拆解来看，其实是这个样子的 —— 注意其中绿色和蓝色箭头的地方。

绿色箭头：

指定了控制脚本可以处理的 HTML 元素范围；

细节的话，需要了解一下 CSS 选择器：https://www.runoob.com/cssref/css-selectors.html。

蓝色箭头：

绑定了要显示的内容，就是 {{ }} 中间的这块。

现在只要记着这么几项就可以了：

1）要绑定的内容都要放到 data {} 里面定义；

2）data 里的变量名，必须跟模板里 {{ }} 中的名字完全一样 —— 包括大小写。

你可以试着把变量名改一改，你会惊奇地发现浏览器里什么也不显示了 —— 而且也没有报错。

不要觉得前端怎么这么坑爹、要是 Java 会怎么轻松地将这么低级地问题识别出来，

要知道咱们用到的 JavaScript 是 1995 年一位大神用了一周就开发出来的爷爷级编程语言...... 😳( ╯□╰ )

另外，你要是用过最早的开发神器 Visual Basic —— 暴漏年龄了 —— 你也不会惊诧。

庆幸的是现在也有一些手段可以帮助缓解这些问题 —— 等你有时间了，咱们再慢慢聊。

2、继续聊绑定

看完了上面的例子，你可能觉得：Vue 是个假冒伪劣产品吧？

不用的时候，只要写一行 HTML 就行了，用了反而要写十几行 ......

要是有过 ASP 或者 JSP 就开始的 “模板化渲染” 的记忆，或者回想一下 Velociy、Thymeleaf、FreeMarker、ExtJS 等等，

你就会发现，天下文章一大抄，Vue 也是（有）一个模板化渲染工具（引擎）。

只有充分发挥想象力和创造力、灵活运用模板化渲染的各种功能，才是折腾 Vue 的正确姿势。

接下来，我们来看绑定一些比较有意思的功能，比如说：表达式。

Vue 官方的描述在 https://v1-cn.vuejs.org/guide/syntax.html 这个页面，不过比较语焉不详。

Vue 用的是 Mustache 模板引擎 —— 将来有问题要百度的时候，记得这个关键词。

https://my.oschina.net/u/3631952/blog/1503323 这里有个更直观一点儿的简介，不过要用好关键还是要学习 JavaScript 的各种知识。

速成的话看 https://www.runoob.com/js/js-tutorial.html，有时间的话慢慢看 https://zh.javascript.info/ 和 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 。

举个 “计算长方形的周长和面积” 的例子。假设我们要做下面这样的页面：

要是不用 Vue 的话—— 比如说用 Spring MVC + Thymeleaf，

那么我们就得在程序里把上面的各种数值（长、宽、周长、面积、是否是正方形）都算出来、然后保存到 ModeAndView 里面，然后在 Thymeleaf 模板中渲染出来。

要是用 Vue 但是不用模板的计算功能的话，我们也得用差不多的方式、在 data 里面把这些数值都写出来。

但是用了计算功能之后，我们就可以这么写了，看看是不是省事了一些。（代码只保留了 HTML 中的关键部分）

    <div id="app">
      <div>长方形的周长和面积：
        <div>长：{{length}}</div>
        <div>宽：{{width}}</div>
        <hr/>
        <div>周长：{{(length + width) * 2}}</div>
        <div>面积：{{length * width}}</div>
        <div>是否是正方形： {{length === width ? '是' : '否'}}</div>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          length: 200,
          width: 100
        }
      });
    </script>

3、再唠叨一下绑定

如上所示，只要了解了 JavaScript 的基本语法和用法，就能使用模板表达式做很多事情，各种各样地 “有效偷懒” 了。

但是加减乘除总是不够用的，所以你还要学一下 “函数”，想怎么处理就怎么处理。

Vue 官方文档在 “事件处理” https://cn.vuejs.org/v2/guide/events.html 里才比较具体地讲到函数，这里先跳个级，知道怎么照着葫芦画瓢就行了。

还是举个例子，比如说我们要显示某位用户的生日、以及是星期几。

这个例子要用到 JavaScript 内置的 Date 对象。稍后可以在 MDN 上查具体的用法，现在只要知道有这个东东、不影响阅读下面的代码就行。

上面的例子中，计算 “星期几” 的部分，没法用表达式简单来实现，因此我们可以写个函数来计算。

<div id="app">
      <div>您的生日是：{{birthDate.toLocaleDateString()}}，星期： {{computeWeekday()}}</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          birthDate: new Date('2000-01-02')
        },
        methods: {
          computeWeekday: function () {
            let weekday = this.birthDate.getDay();
            switch(weekday) {
              case 0:
                return '天';
              case 1:
                return '一';
              case 2:
                return '二';
              case 3:
                return '三';
              case 4:
                return '四';
              case 5:
                return '五';
              case 6:
                return '六';
              default:
                return '无效的日期';
            }
          }
        }
      });
    </script>

拆解出来说，就是这样的：