入门仪式:Hello Vue

2019-01-0726203 阅读6 评论

Hello Vue

既然是学习编程,那就遵循一下那个古老的传统仪式。

首先我们新建一个 todos.html 文件,用任何一个你喜欢的文本编辑器或者 IDE 打开(例如 vscode、sublime、记事本、notepad++、webstorm 等等),然后写上下面的代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorial</title></head>
<body>
<div id="app">{{ message }}</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {message: 'Hello Vue!'}
        }
    })
</script>
</html>

我们写了一个简单的 HTML 文件,使用 Script 标签引入了 Vue,版本是 2.5.16。然后我们写了几行 js 代码。在代码中我们 new(创建) 了一个 Vue 对象,并向这个对象传递了一些选项,例如告诉 Vue 挂载的元素(el,即elements 的缩写)是 idapp 的那个 div,并且在 data 中绑定了一个名为 message 的变量,其值为 'Hello Vue!',然后我们就可以在 HTML 文档中引用这个 message 。Vue 在后面帮我们做么很多神奇的事情,它把 {{ message }} 替换成了 Vue 对象中对应的值。

保存代码并用浏览器打开,可以看到浏览器显示了 “Hello Vue!”,你也可以尝试修改 message 的值,发现显示的内容会跟着变化。

表单绑定

再来看一个神奇的例子,我们把代码换成下面这样:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorial</title></head>
<body>
<div id="app">
  <input type="text" v-model="value">
  <input type="button" value="发送">
  <div>value 的值是:{{ value }}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {value: ''}
        }
    })
</script>
</html>

这里要关注一下文档的 input 标签里 v-model="value" 这个东西。v-model 被称为 Vue 的指令,指令可以用来做很多事,比如用于 if 条件判断的 v-if,用于绑定值的 v-bind、用于绑定监听事件的 v-on 等等,这在以后会接触到。而这个 v-model 指令的作用是将 input 元素 value 属性的值和我们创建的 Vue 对象中 value 的值进行绑定,我们知道 input 有一个 value 属性,它的值会在浏览器显示(例如后面那个 button 按钮的发送),Vue 将这个值绑定后,在 input 中引起的 value 值变化就会实时反映到关联的 Vue 对象,所以会看到下方引用的 {{ value }} 也会跟着变化。

打开浏览器,然后在文本框做一些输入,试试效果!

加点方法

接下来我们在 Vue 对象中加点方法,还是上面的例子,只是在 Vue 对象中加了一个方法:

var app = new Vue({
        el: '#app',
        data: function () {
            return {value: ''}
        },
        // 这是新增的方法
        methods: {
            send: function () {
                alert('发送成功!');
                this.value = ''
            }
        }
    })

方法声明在 method 对象中,key 为方法名,值为对应的函数。我们想做的事情很简单,就是点击发送按钮后显示一个发送成功的消息,然后将 value 的值清空。

打开浏览器,发现怎么点都没有效果!因为 Vue 并不知道我们点击了按钮,为了让 Vue 监听到我们点击按钮的事件,需要在被点击的元素上绑定一个 click 事件,前面说过绑定事件用 v-on,因此在发送按钮上加上相应的代码:

<input type="button" value="发送" v-on:click="send"/>

在输入框输入一些文字,然后点击发送按钮试试。

计算属性

Vue 还可以根据绑定的数据做一些计算,然后我们就可以引用计算的结果。假设我们想实时统计输入的字数,我们可以在 Vue 对象里加上对 value 长度的计算值:

var app = new Vue({
        el: '#app',
        data: function () {
            return {value: ''}
        },
        methods: {
            // 省略...
        },
        // 这是新增的计算属性
        computed: {
            count: function () {
                return this.value.length
            }
        }
    })

计算属性申明到 computed 对象里,这个对象的键是计算的结果,值是计算函数,这里我们计算了 value 的长度。以后在 Vue 对象中就可以使用 this.count 引用计算结果,也可以在关联的模板中直接引用,和绑定的数据 value 的用法非常类似。比如我们在文档中引用这个 count:

<div id="app">
  <input type="text" v-model="value">
  <input type="button" value="发送" v-on:click="send"/>
  <div>value 的值是:{{ value }}</div>
  <!-- 引用 count -->
  <div>字数:{{ count }}</div>
</div>

打开浏览器看看效果。

加点样式

Vue 还可以动态地帮我们为元素绑定样式(class 属性),假设如果我们希望 input 中没有任何值输入,即 value 的值为空时,input 的边框为红色以提醒用户没有内容。首先我们写一个简单的样式(这个样式非常简单,不需要有 CSS 基础也看得懂),样式通常写到 head 标签里,用 style 包裹:

<head>
  <meta charset="UTF-8"><title>Vue Todo Tutorial</title>
  <style>
    .empty {
      border-color: red;
    }
  </style>
</head>

然后将这个 empty 用于 input 的 class 属性,浏览器就会渲染对应的样式:

<div id="app">
  <input type="text" class='empty' v-model="value">
  ...
</div>

当然现在无论 value 为何值边框都是红色的,因为 class 始终为 empty,现在让 Vue 来帮我们。前面说了,绑定值用 v-bind 指令,我们修改一下代码,为 input 的 class 绑定一个值:

<div id="app">
  <input type="text" 
         v-bind:class='{empty: !count}' 
         v-model="value">
  ...
</div>

Vue 会根据 empty 后的表达式 !count 的真假来判断 class 的值是否为 empty,如果为真(即 count = 0 的情况),则 class 的值为 empty,否则为空。

打开浏览器看看效果!

练习

我们通过这几个循序渐进的例子体会了 Vue 的部分核心特性,这些特性对我们开发 Todo 应用非常有帮助。当然这个例子还有一点小瑕疵,就由你来作为练习改进一下。

练习一:尽管我们在用户没有输入时用红色边框提醒用户内容为空,但是用户点击按钮后任然显示提交成功的通知,这是不合理的。合理的情况应该是弹出通知提示用户请输入内容。修改示例的代码,使其达到上述效果。(提示:修改 send 方法)

练习二:即使内容为空,输入框下方依然显示 value 的值是:,这看起来很奇怪。我们希望只有用户真正地输入了内容后,才提示 value 的值,请参阅 Vue 关于指令的官方文档,找到满足我们需求的指令,修改示例代码以达到上述效果。(提示:我们应该通过判断 value 是否有值来决定是否显示输入框下边的 div 元素。)

Vue 的指令文档:https://cn.vuejs.org/v2/guide/conditional.html

接下来正式开始我们的 Todo 应用的开发吧!

本节练习参考答案地址:https://www.zmrenwu.com/post/77/

-- EOF --

  UI
6 评论
登录后回复
richmanwu
2021-04-27 14:52:23
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorial</title>
    <style type="text/css">
        .empty {
            border-color: red;
        }
    </style>
</head>
<body>
<div id="app">
  <input type="text" v-model="value" class="empty" v-bind:class='{empty: !count}'>
  <input type="button" value="发送" v-on:click='send'>
  <div v-if='seen'>value 的值是:{{ value }}</div>
  <div>字数:{{ count }}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            value: '',
        },
        methods: {
            send: function (){
                if (this.value){
                    alert('send succeeded!');
                    this.value = ''
                }
            }
        },
        computed: {
            count: function(){
                return this.value.length
            },
            seen: function(){
                if(!this.value){
                    return false
                } else {
                    return true
                }
            }
        }
    })
</script>
</html>
回复
Jacky_github
2020-07-14 09:57:39

感谢博主,真的是对小白很友好的教程👍🏻

回复
Qin Yuan
2020-07-06 06:52:45

粗粗看完这段教程,真的是对新手太友好了.而且思路清晰,举例简单明了,真是大佬举重若轻,飞花落叶皆可退敌的境界了.
非常非常感谢.接下来我要找时间好好自己做一遍这个例子.

回复
追梦人物 Qin Yuan
2020-07-19 20:50:25

加油,谢谢!

回复
boyhailong
2019-08-21 20:18:23

非常棒的教程 感谢

回复
安静的陆仁甲
2019-07-15 17:18:06

感谢 博主分享!

回复