baidumap vue 判断范围_懂一点前端—Vue快速入门

edc27acfb84df86a76caa97044602977.png

01. 什么是 Vue

4250fe7f7f9960a294282294a342aa96.png

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,是当下很火的一个 JavaScript MVVM 库,是以 数据驱动和组件化 的思想构建的。

MVVM 模式简述

下图不仅概括了 MVVM 模式 (Model-View-ViewModel),还描述了在 Vue.js 中 ViewModel 是如何和 View 以及 Model 进行交互的。

1c965934cbc14f441cc70417076cefe3.png

ViewModel 是 Vue.js 的核心,它是一个 Vue 实例。Vue 实例是作用于某一个 HTML 元素上的,这个元素可以是 HTML 的 body 元素,也可以是指定了 id 的某个元素。

当创建了 ViewModel 后,双向绑定是如何达成的呢?

首先,我们将上图中的 DOM ListenersData Bindings 看作两个工具,它们是实现双向绑定的关键。

  • 从 View 侧看,ViewModel 中的 DOM Listeners 工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
  • 从 Model 侧看,当我们更新 Model 中的数据时,Data Bindings 工具会帮我们更新页面中的 DOM 元素。

库和框架的区别

b57300ad922d743d8938082c6ecdc893.png

在这里我们需要稍微注意一下前端 库(Library)框架(Framework) 的区别,它们的本质都是某人编写的,用于解决常见问题的 可复用代码 的集合。

比如,你有一个处理字符串的程序,你为了保持代码的 DRY (Don't Repeat Yourself),你编写了如下可复用的功能代码:

function getWords(str) {
const words = str.split(' ');
return words;
}
function createSentence(words) {
const sentence = words.join(' ');
return sentence;
}

恭喜你,你创建了一个 JavaScript 库!

如果我们用 「构建房子」 来类比 「构建应用」 的话,那么 使用库 就像是 去宜家购物 一样,我已经有了一个家,现在我需要挑选自己喜欢的一些家具,以达到我自己满意的状态,这一切 都在我的控制范围之内;而 使用框架 就会像是已经有了一个 清装房,在已经规划好的蓝图和选择之中,我们的一些想法会显得十分地有限。

Vue.js 本身只是一个 JavaScript 库,包括 React 也一样,只不过平时我们所说的 Vue 框架,是指包含 Router/ Vuex 等一系列组件之后融合的 一整套解决方案

更加详细的解释如下:

  • 「库」 是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权完全在于使用者本身;
  • 「框架」 顾名思义是一套架构,会基于自身的特点向用户提供一套比较完整的解决方案,如果使用者选定了一套框架,那么就需要根据框架本身做出一定的适应。

02. 为什么使用 Vue?

530c1a069a6a599038365cfa03116454.png

说实话,我个人非常喜欢 Vue。在我大学刚尝试学习 HTML + CSS + JavaScript 和 Bootstrap 融合之后,我就接触了 Vue,它对我来说这样的「前端小白」来说,几乎没有什么开发的门槛,很平滑地就得以过渡到 Vue 的使用中去。

典型的 .vue 文件可以简单成如下的样子:(vue-tutorial/typical-case.html)






另外我也非常喜欢尤大大本人,大家可以去看一看 Honeypot 记录的关于 Vue 的 纪录片 (趁着写文的间隙我又看了一遍),当然如果英文有些吃力也可以围观一下在 B 站上的 带中文字幕的版本。

296fa9af55343b89a866a8af714b502d.png

B 站翻译版本截图

Vue 从一开始的定位就是尽可能的降低前端开发的门槛,让更多的人能够更快地上手开发。———— 尤雨溪

理由一:易上手、学习曲线平滑

就像上面的典型 .vue 文件的展示一样,在 Vue 中,一切都很自然,例如我们使用 Vue 来构建我们的 Hello World 程序:(vue-tutorial/hello-vue.html)

<html lang="en"><head><meta charset="UTF-8"><title>Hello Vue!title>head><body><div id="app">
{{ message }}div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>// 创建一个 Vue 实例或者说是 VieModel 实例var app = new Vue({el: '#app',data: {message: 'Hello Vue!'
}
})script>body>html>

可以看到几乎没有多余的部分,只是在创建 Vue 实例时,把 idapp 的对象 (此处为一个 div) 绑定到了 Vue 实例中而已。

理由二:文档友好

由于 Vue 是国人编写的,所以在官网中有完整的中文文档可供开发者参考,并且借由尤大大出色的文笔,非常地清晰易懂,相信看过的朋友会和我有一样的感受:

7868dcae7eaa81f8515fe4f59263b2c2.png
官方网站的文档

官方文档的地址可戳 这里

理由三:MVVM 天然的双向绑定

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 JavaScript 库,这就让我们能够专注于 View 层的开发,这种轻量级的框架让前端开发更加高效、便捷。

例如,我们使用 v-model 来简单改造一下我们的 hello-vue.html 文件让它编程一个简单的双向绑定示例:(vue-tutorial/v-model-demo.html)

<div id="app">
<p>{{ message }}p>
<input type="text" v-model="message" />
div>

message 绑定到文本框,当更改文本框的值的时候,

{{ message }}

中的内容也会被更新:
ac4ef3005e5d0845516b7d4603f479ad.gif

反过来如果我们更改 message 的值的话,文本框的值也会被更新,我们可以在控制台中尝试一下:

55e8f7e275416a3a4cb79067dabff5e5.gif

千万不要把框架能力看得比你解决问题的能力还重要

这里是借鉴了 知乎中的一个讨论,不论是使用 React 还是 Vue,我们最终还是要以 解决实际的问题 为出发点。引用一下尤大大在 知乎-Vue 和 React 的优点分别是什么? 上的回答部分截取:

说了这么多,无非是希望大家能停下来想想所谓的 ”A 技术比 B 技术牛逼“ 背后到底是在争些什么,我们使用这些技术的初衷又是什么。很多时候你说这方面,他说那方面,鸡同鸭讲,即使说到一起去,也往往缺乏对等的信息量或者基础共识,只是各自表达主观看法,最后变成两个阵营各自抱团取暖... 说到底,就算你证明了 A 比 B 牛逼,也不意味着你或者你的项目就牛逼了... 比起争这个,不如多想想怎么让自己变得更牛逼吧。—————— 尤雨溪

03. Vue 常用指令

edfc49ee4e89b842e4f16819380f8175.png

上面我们已经实际体验了一个 Vue 的指令 v-model 了,在 Vue 中,指令都带有 v- 前缀,以表示它们是 Vue 提供的特殊的 attribute,它们会在渲染 DOM 时进行特殊的响应式行为。

Vue 内置了一些常用的指令,接下来我们将依次来介绍:

  • v-ifv-else 条件渲染指令;
  • v-show 条件展示指令;
  • v-for 列表渲染指令
  • v-bind 条件绑定指令;
  • v-on 事件处理指令;

大部分照搬的官方教程,写得非常具有参考性,感兴趣的朋友可以直接略过下面部分去参考 官方文档。

v-if 和 v-else 条件渲染指令

v-if 指令

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。例如:(vue-tutorial/v-if-demo)

<p v-if="seen">现在你看到我了!p>
var app = new Vue({
el: '#app',
data: {
seen: true
}
})

页面会正确的显示「现在你看到我了!」这几个字。

v-else 指令

你也可以使用 v-else 来添加一个 "else 块" 来表达条件不满足时应该渲染的模块:

<p v-if="seen">现在你看到我了!p>
<p v-else>Oh no!p>
var app = new Vue({
el: '#app',
data: {
seen: false
}
})

此时条件 seen 不满足,页面就会显示「Oh no!」的字样。

v-else-if 指令

这是 2.1.0 版本新增的指令,充当 v-if 的 "else-if 块",可以用来连续判断条件:

<div v-if="type === 'A'">
A
div>
<div v-else-if="type === 'B'">
B
div>
<div v-else-if="type === 'C'">
C
div>
<div v-else>
Not A/B/C
div>

类似于 v-elsev-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show 条件展示指令

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:

<h1 v-show="ok">Hello!h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display (条件不满足则把元素 display 属性设置为 none),而 v-if 则在条件不满足时直接不渲染出对象。

v-if 与 v-show

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是 惰性 的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

v-for 列表渲染指令

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
li>
ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})

结果:

  • Foo
  • Bar

注意:永远不要把 v-if 和 v-for 同时用在同一个元素上。

因为当 Vue 处理指令时,v-forv-if 拥有更高的优先级,所以会导致错误,详细的技术细节可以 戳这里

v-bind 条件绑定指令

我们可以传给 v-bind:class 一个对象,以动态地切换 class:(也可以用缩写 : 来替代 v-bind 指令)

<div v-bind:class="{ active: isActive }">div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActivetruthiness

你可以在对象中传入更多属性来动态切换多个 class。此外,v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:

<divclass="static"v-bind:class="{ active: isActive, 'text-danger': hasError }"
>div>

和如下 data:

data: {
isActive: true,
hasError: false
}

结果渲染为:

<div class="static active">div>

isActive 或者 hasError 变化时,class 列表将相应地更新。例如,如果 hasError 的值为 true,class 列表将变为 "static active text-danger"

v-on 事件处理指令

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。(也可以用缩写 @ 来替代 v-on 指令)

示例:

<div id="example-1">
<button v-on:click="counter += 1">Add 1button>
<p>The button above has been clicked {{ counter }} times.p>
div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})

结果:

9f30455cd0194dce586d1fb882f9f2fb.gif

v-on 的事件修饰符

在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

<a v-on:click.stop="doThis">a>


<form v-on:submit.prevent="onSubmit">form>


<a v-on:click.stop.prevent="doThat">a>


<form v-on:submit.prevent>form>



<div v-on:click.capture="doThis">...div>



<div v-on:click.self="doThat">...div>

另外事件处理还可以支持 按键码 (某一个键按下)系统修饰符 (键盘鼠标按下),可以参看 官方教程

04. Todo-List 示例

355805f11cd593744c1b71fb75e253d9.png

上面我们了解了一些基本的指令了,接下来我们实际动动手,来搭建一个简单的 TodoList demo 小程序。

第一步:明确需求

TodoList 想必大家都很熟悉,使用来记录我们接下来要做的一些事情的程序,最基本的功能有增加和删除:

b9286ad812e8d2dbbaba2a4818379acb.gif

很简单,可以看出我们只需要一个输入框 (用来记录将要保存的数据),一个按钮 (用来添加数据),和一个集合 (用来保存数据) 就差不多可以了,上手!

第二步:创建好需要的 data

先来创建好我们需要的数据 data:

data: {
todos: [{
id: nextTodoId++,
text: '写代码'
},
{
id: nextTodoId++,
text: '还是写代码'
}
],
newTodoText: ""
}

这里多定义了 id 属性是为了方便我们的删除操作。

第三步:创建好对应的 HTML

没有任何布局,就直接定义好我们所需要的组件就好了:

<input type="text" v-model="newTodoText" />
<button @click="addItem">添加button>
<ul>
<li v-for="item in todos">
<span>{{ item.text }}span>
<span><button @click="removeItem(item.id)">delbutton>span>
li>
ul>

没有任何的特别,只是里面包含了两个我们 未定义 的方法:addItemremoveItem 而已。

第三步:定义并实现方法

Vue 中的方法需要定义在 Vue 实例的 methods 关键字下面:

methods: {
addItem(key) {
this.todos.push({
id: nextTodoId,
text: this.newTodoText
})
this.newTodoText = ""
},
removeItem(id) {
this.todos = this.todos.filter(todo => {
return todo.id !== id
})
}
}

这里数组的更新需要用到 push,另外删除时我们使用了一个 lambda 表达式来完成,删除时传入了一个要删除元素的 id,然后从数组中挑选出所有 不等于 这个 id 的元素重新赋值给原数组,这样就相当于是删除了元素了。

本文涉及的所有代码都上传到了【More Than Java】项目中。(地址下方)

更好的参考

上面的代码仅仅是简单实现,更好的参考可以查看 Vue 官方实现的一个更加具有参考性的例子:https://codesandbox.io/s/o29j95wx9

相关阅读

  1. React入门
  2. 懂一点Python系列——快速入门
  3. 妈妈再也不担心我面试被Redis问得脸都绿了

参考资料

  1. Vue【官方文档】 - https://cn.vuejs.org/v2/guide/
  2. 【译】框架与库的差异 - https://juejin.im/post/5c5fe3e751882561dd7b4e9b
  3. Vue.js——60分钟快速入门 - https://www.cnblogs.com/keepfool/p/5619070.html
  • 本文已收录至我的 Github 程序员成长系列 【More Than Java】,学习,不止 Code,欢迎 star:https://github.com/wmyskxz/MoreThanJava
  • 个人公众号 :wmyskxz,个人独立域名博客:wmyskxz.com,坚持原创输出,下方扫码关注,2020,与您共同成长!
26d2647a208555efa1c3fbbaf48943c9.png

非常感谢各位人才能 看到这里,如果觉得本篇文章写得不错,觉得 「我没有三颗心脏」有点东西 的话,求点赞,求关注,求分享,求留言!

创作不易,各位的支持和认可,就是我创作的最大动力,我们下篇文章见!

点击留言

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/303687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在 C#9 中使用顶级程序 (top-level)

当我们用 C# 进行编码的时候&#xff0c;总需要写很多的模板代码&#xff0c;即使是最简单的 console 程序,想象一下&#xff0c;如果去测试一个 类库 或者 API 的功能&#xff0c;通常你会用 Console 程序去实现&#xff0c;在开始工作的时候会发现你受到了 C# 标准模板的限制…

跨部门不配合工作_跨部门协作,队友总是“甩锅”,这三个方法教你快速避坑!...

在日常的工作中&#xff0c;你觉得跨部门沟通的时间占用了多少时间&#xff1f;前阵子我经常会看到有人抱怨&#xff0c;说跨部门沟通的工作实在太难了&#xff0c;同事总是推脱扯皮&#xff0c;领导交代下来的事情&#xff0c;要么说不是自己的职责&#xff0c;要么说以前没做…

模型存储在哪里_最强的模型工作收纳站「Artty Station」登场!

大部分做模型的人&#xff0c;都有同一个梦想——那就是「属于自己的模型空间」。但很少有人&#xff0c;有足够的空间去收纳自己的模型工具。而现在&#xff0c;一款号称史上最强的模型收纳站「Artty Station」横空出世了&#xff0c;现在正在日本网站Makuake上进行众筹&#…

.NET6 中的 PriorityQueue

.NET6 中的 PriorityQueueIntro.NET 6 中引入了一个新的集合类型 PriorityQueue&#xff0c;正如它的名字那样&#xff0c;在普通的 Queue 基础之上增加了优先级的支持&#xff0c;接下来就一起来看一下怎么使用&#xff0c;以及一些常用的使用场景介绍。Get Started来看一个简…

简单而不简陋﹣wp7视觉点滴

一直就很期待&#xff0c;引入了Metro设计理念的wp7的真实操作体验&#xff0c;现在终于如愿了。拿到测试机&#xff0c;首先迅速的过了一遍&#xff0c;第一印象就是界面简单明了&#xff0c;没有华丽的高光、没有跌宕的质感&#xff0c;真的感觉就像在公共场所看到的信息指示…

ros发布节点信息python_vscode开发ROS1(13)-python实现话题通信(msg)

写在最前面1, ros也是可以使用python进行编程的, 而且相比c来说, ros更加简单.使用python创建第一个ROS程序1, 在ros_test目录下, 新建一个scripts文件夹.2, 修改CMakeLists.txt文件, 在find_package中添加rospyfind_package(catkin REQUIRED COMPONENTS roscpp ... #其他的包 …

BeetleX 之 WebApi网关1.5.8发布

这一版本的主要升级了BeetleX的基础网络库&#xff0c;主要解决在某些情况导致解释http协议cpu暴增长的问题&#xff0c;同时使用BeetleX新版本针对的IndexOf的优化&#xff0c;使http协议解释上有着一定程度的性能提升。新版本同样也是支持win64和linux64两个版本&#xff0c;…

egg前面加什么_国威说阀:阀门前面为什么加国标美标日标之类的?

原标题&#xff1a;国威说阀&#xff1a;阀门前面为什么加国标美标日标之类的&#xff1f;美标阀门就是美国标准的意思&#xff0c;通常称呼的美标球阀&#xff0c;美标闸阀和其它什么阀门都是按照美国标准制造出来的阀门其中一类。标准的编制说明是一个非常重要的文件。它阐明…

读《有效需求分析》

最近在一个技术群里看到张逸大佬强力推荐一本关于需求分析的书《有效需求分析》&#xff0c;于是在 Kindle 上下单了&#xff0c;读完后有一种相见恨晚的感觉。本书特点从书中的一些案例可以看出&#xff0c;作者擅长 ToB 软件的需求分析&#xff0c;如果您是从事的 ToB 软件的…

超时锁定计算机,就会发现多了一个控制台锁定显示关闭超时选项

小技巧&#xff1a;锁定屏幕方法多在临时要离开电脑时&#xff0c;可用CtrlAltDel组合键、WinL组合键或在开始菜单中单击用户头像选择“锁定”手动锁屏;或借用“屏幕保护设置”设定自动定时锁屏。1. 探寻自动锁屏时间修改离开电脑一段时间后Windows 10会自动锁屏&#xff0c;但…

android数据存放map_ES6 的新鲜玩意儿——集合set、map、WeekSet、WeekMap

es6新增了Set、Map、WeekSet、WeekMap 四种数据结构。C#中有HashSet和Dictionary&#xff0c;HashSet和Dictionary都是范式集合&#xff0c;但是es6不支持接口开发&#xff0c;所以也就不存在范式。Set 是存唯一值的集合&#xff0c;Map是存键值对的集合。WeakSet、WeakMap分别…

大牛领导单独找我聊了两句:搞框架的同时别忘了算法

前言程序数据结构算法&#xff0c;好的算法能让程序更高效的运行&#xff1b;在当今数据信息时代&#xff0c;数据分析和数据处理肯定是避免不了&#xff0c;而算法便成为了很多公司门槛级的要求&#xff0c;特别是大厂&#xff1b;赶紧搞起来&#xff0c;说不定离进大厂就只差…

C#使用iTextSharp操作PDF文件

概述html文件怎么转成PDF文件&#xff1f;有的招聘网上的简历导成DOC文件&#xff0c;不能直接使用&#xff0c;这样造成很大的困扰&#xff0c;那么它还有一个格式&#xff0c;那就是html格式。将文件导出成html格式&#xff0c;然后再转成PDF文件&#xff0c;这样便可以直接使…

springboot 历史版本文档_Springboot看视频学太慢?来看看这份阿里深入实践Springboot文档...

前言&#xff1a;之前 Spring Boot 2.2没能按时发布&#xff0c;是由于 Spring Framework 5.2 的发布受阻而推迟。这次随着 Spring Framework 5.2.0 成功发布之后&#xff0c;Spring Boot 2.2 也紧跟其后&#xff0c;发布了第一个版本&#xff1a;2.2.0。关于Spring Boot的性能…

51CTO技术沙龙4月23日第四期:如何快速定位******

人 在江湖飘&#xff0c;哪能不挨刀&#xff1f;没有跟***打过交道的运维人员能有多少&#xff1f;恐怕工作时间长的朋友大多都遇到过。我们除了做好防御之外&#xff0c;也可以尝试着像“盗梦空间”那 样了解******的动向。也可以从追踪***到挖掘***隐藏技术。当然&#xff0c…

计算机软件损坏基本维修,学习修电脑基础没有用?客户电脑开机不显示,维修差点被坑!...

原标题&#xff1a;学习修电脑基础没有用&#xff1f;客户电脑开机不显示&#xff0c;维修差点被坑&#xff01;电脑故障分为硬件故障与软件故障&#xff0c;硬件故障指的是硬件损坏&#xff0c;软件故障指的是系统损坏&#xff0c;硬件故障还可以分为真坏与假坏&#xff0c;真…

cass小插件集合_插件|如何精准提取CASS方格网高程点?

CASS的方格网土方计算时&#xff0c;在格网上会内插很多高程点&#xff0c;下图所示的黄色、蓝色和洋红色的高程点。怎么能批量提取这些点呢&#xff1f;CASS方格网截图CASS升级到10.1之后&#xff0c;增加了一个菜单&#xff1a;工程应用-注记生成数据文件。这个功能可以将文字…

使用.NET开发的数据库小工具 DbTool

数据库小工具 DbToolIntroDbTool 一个支持 DbFirst、ModelFirst 和 CodeFirst 的数据库小工具。DbFirst 是根据数据库中的表信息生成代码中的 Model&#xff0c;以及生成数据表结构文档ModelFirst 是根据数据表信息或者数据表结构文档生成创建数据库的脚本CodeFirst 是指根据 m…

古登堡是垂直搜索引擎吗_网站排名,提高内容输出频率,就一定要对排名好吗?-SEO...

如果你在长期做百度SEO一定会有这样一个明显的感觉&#xff0c;通过每天大量的输出相关性的内容&#xff0c;实际上是有利于提高网站的抓取频率与整站的权重。 而对于百度搜索引擎而言&#xff0c;对方也确实有这么一个考量&#xff0c;用于衡量一个网站的活跃度与覆盖搜索需求…

Windows环境下Dapr入门

Dapr是Distributed Application Runtime&#xff08;分布式应用运行时&#xff09;的缩写。它是一个可移植的、事件驱动的运行时。下面介绍如何在Windows平台安装Dapr&#xff1a;安装Dapr CLIDapr CLI是使用Dapr相关功能的主要工具&#xff0c;您可以使用它来以Dapr Sidecar的…