作者:HelloGitHub——追梦人物

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 应用的开发吧!

第 1 篇:Vue.js 很高兴认识你的更多相关文章

  1. Vue.js 很好,但会比 Angular 或 React 更好吗?

    文章转自:http://www.oschina.net/translate/vuejs-is-good-but-is-it-better-than-angular-or-rea Vue.js 是一个用 ...

  2. 第六篇:vue.js模板语法(,属性,指令,参数)

    Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.( ...

  3. 第十篇:vue.js for循环语句(大作业进行时)

    Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...

  4. 第五篇:vue.js起步

    <div id="vue_det"> //使改动全部在指定的 div 内,div 外部不受影响 <h1>site : {{site}}</h1> ...

  5. 第十一篇:vue.js监听属性(大作业进行时)

    这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...

  6. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  7. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

  8. Vue.js 开发实践:实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  9. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

随机推荐

  1. 刷题[WUSTCTF2020]CV Maker

    解题思路 好家伙,打开一看像是cms,又看名字CV Maker.我以为直接要搜cve打了.搜了一会发现没什么啊.那先正常做把. 注册 注册成功后这里报错,猜测可能有注入点.先放在这里,继续登陆.发现是 ...

  2. pwnable.kr-uaf-witeup

    没错,这道题超纲了,代码调试能力很差很差. 一些相关小笔记. UAF是在内存释放后,原指针仍然指向此内存,可通过其他填充操作将此内存值设为指定的值,使得指针指向特定值. 分析程序.本程序中,可输入1. ...

  3. linux与linux间,互相拷贝文件

    直接使用scp命令 和远程Linux主机 进行文件的拷贝    1.可以将远程Linux系统上的文件拷贝到本地计算机    2.也可以将本地计算机上的文件拷贝到远程Linux系统上. 比如:我们要拷贝 ...

  4. 虚拟机CentOS开机黑屏解决方案

    默认配置 错误: 1.直接就是黑屏,连杠杠都没有 2.centos系统关不掉 3.关闭vmware提示:虚拟机XXX繁忙 解决方案一: 1.以管理员身份运行cmd控制台程序 2.在cmd窗口中输入ne ...

  5. 双向最大匹配算法——基于词典规则的中文分词(Java实现)

    目录 一.中文分词理论描述 二.算法描述 1.正向最大匹配算法 2.反向最大匹配算法 3.双剑合璧 三.案例描述 四.JAVA实现完整代码 五.组装UI 六.总结 前言 这篇将使用Java实现基于规则 ...

  6. Web开发初探之JavaScript 快速入门

    本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...

  7. 在Python中使用OpenCV(CV2)对图像进行边缘检测

    转载:https://blog.csdn.net/cumtb2002/article/details/107798767 Modules used: 使用的模块: For this, we will ...

  8. SPI通信基础学习

    SPI是"Serial Peripheral Interface"的缩写,即"串行外设接口",是摩托罗拉公司推出的一种串行接口通信协议. 接线的示意图: SPI ...

  9. 为什么在M3架构中 PC总是返回加4

    由于CPU是3级流水线的方式运行.在执行第一条指令时候,已经对第二条指令译码,对第三条指令取值. PC总是指向正在取值的指令.由于在M3架构中,采用Thumb-2指令,每个指令占据2个字节,所以PC总 ...

  10. java基础知识总结(续写)

    1.两个容易搞混的C盘文件夹 文件名 描述 Progrm Files 默认存储的64位软件 Progrm Files(x86) 默认存储32位软件 2.常用基础DOS命令(Windows+R打开命令) ...