第 1 篇:Vue.js 很高兴认识你
作者: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 的缩写)是 id
为 app
的那个 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 很高兴认识你的更多相关文章
- Vue.js 很好,但会比 Angular 或 React 更好吗?
文章转自:http://www.oschina.net/translate/vuejs-is-good-but-is-it-better-than-angular-or-rea Vue.js 是一个用 ...
- 第六篇:vue.js模板语法(,属性,指令,参数)
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.( ...
- 第十篇:vue.js for循环语句(大作业进行时)
Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...
- 第五篇:vue.js起步
<div id="vue_det"> //使改动全部在指定的 div 内,div 外部不受影响 <h1>site : {{site}}</h1> ...
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
- Vue.js 开发实践:实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
随机推荐
- 刷题[CISCN2019 总决赛 Day2 Web1]Easyweb
解题思路 打开网页是这样一个登陆框,随机试了一下常见弱密钥,二次注入等.均是返回不同的猫咪图案 不同的id对应不同的猫咪图案.经测试,返回的id应该是无序,随机的.感觉这里有可能存在注入点,但是测试好 ...
- xss利用——BeEF#stage4(其余功能介绍)
目录 信息收集 => 社会工程 =>网络扫描 => 结合metasploit => tunneling => xss => 维持权限 功能介绍 #1 - 信息收集 ...
- GitBook 3.2.3入门
简介 GitBook 是一个基于 Node.js 的命令行工具,可使用 GitHub / Git.Markdown.AsciiDoc来制作精美的电子书.GitBook 可以将文档作为静态网站或电子书( ...
- spark-3-macOS配置hadoop+spark+IDE
[教程1]https://blog.csdn.net/shiyutianming/article/details/99946797 + [教程2]http://dblab.xmu.edu.cn/bl ...
- k8s下的jenkins如何设置maven
关于k8s环境的jenkins集群 k8s下搭建了jenkins集群后,执行任务时会新建pod,任务完成后pod被销毁,架构如下图所示: 在k8s搭建jenkins集群的步骤请参照<> 关 ...
- CAS 原子操作
理会CAS和CAS: 有时候面试官面试问你的时候,会问,谈谈你对CAS的理解,这时应该有很多人,就会比较懵,当然,我也会比较懵,当然我和很多人的懵不同,很多人可能,并不知道CAS是一个什么东西,而在我 ...
- MQTT消息队列压力测试
环境准备: jmeter插件下载:mqttxmeter1.0.1jarwithdependencies.jar 把MQTT插件放在 %JMeter_Home%/lib/ext下.重启jmeter. M ...
- httpd之ab压力测试
安装软件 yum install -y httpd 参数说明:用法Usage: ab [options] [http[s]://]hostname[:port]/path用法:ab [选项] 地址 选 ...
- Mysql的Sql语句优化
在Mysql中执行Sql语句经常会遇到有的语句执行时间特别长的情况,出现了这种情况我们就需要静下心分析分析. 首先,我们需要确定系统中哪些语句执行时间比较长.这个可以使用Mysql的慢日志来跟踪.下面 ...
- 为了省钱,我用1天时间把PHP学了!
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你在通往架构师的路上吗? 程序员这个行业就像是在不断的打怪升级,突破每一阶段的瓶颈期 ...