脚本宝典收集整理的这篇文章主要介绍了介绍Vue.js给那些知道足够jQuery的人，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

多年来，我与JavaScript有过爱恨交织的关系。

我通过设计和开发社区最喜欢的鞭打男孩jQuery来了解这种语言。你看，当我开始学习JavaScript时，作为“编码设计师”，使用jquery是一种神奇的体验。我可以制作模态fadein和fadeOut。使用第三方库，我可以通过一个函数调用将视差滚动添加到我的投资组合中。几乎所有我梦寐以求的东西都封装在一个~100kb的文件中 ...

然后Angular出来了。我没有 选择，只能重做我的整个投资组合的框架。然后React出来了。我没有 选择，只能重做我的整个投资组合的库。然后Vue.js出来了。我没有 选择，只能重做我的整个投资组合与库......你看这是怎么回事。

除了所有的笑话，我非常喜欢通过使用这些不同的框架和库在这里和那里构建东西来磨练我的JavaScript。我在这个过程中阅读了无数的文章和教程，但是没有人比Shu Uesugi的作品更加坚持我，“ React.js为那些知道足够jQuery的人介绍。”

Shu带领读者 - 他们被认为对JavaScript基础知识和jQuery有一定程度的熟练程度 - 在React世界的旅程中，他们构建了TwITter的“撰写推文”组件的克隆。

这个概念框架对我来说非常有帮助，因为他是一个学得最好的人。实际上，每当一个新的JavaScript库出现时，我发现自己会回到本文的例子来测试水域。所以，我想借用这个​​框架，因为我通过我最近学习Vue的经验来介绍你。

在您开始以下步骤之前，我强烈建议您阅读Shu的文章。他非常出色地指导您完成您可能编写的jQuery代码，以实现其中的一些功能。因此，为了减轻冗余的风险，我将专注于向您展示Vue的来龙去脉。

我们正在建设什么

我们大多数人发推文（比其他人更多）。因此，我们可能熟悉下面屏幕截图中的用户界面组件。

信不信由你，这个UI组件是一个很好的例子，说明Vue（和React，如Shu）可以改善你作为JavaScript / jQuery开发人员的生活。我们今天将重点关注的这个组件的元素是：

• <textarea>用户可以在哪里输入他们的推文
• 根据<button>推文的持续时间启用/禁用该功能
• 一个计数器，指示剩余多少个字符（140个），并更改颜色以警告用户此限制
• 一个摄像头图标，当单击时，允许用户将照片附加到他们的推文上
• 已附加的照片列表
• 一个按钮（每张照片）将其从推文中删除

如果你被困住了

如果您在任何时候遇到令人困惑或解释不清的内容，请不要犹豫，在@mattrothenberg发推特。当你读到这篇文章时请记住：它不是你，它绝对是我。

让我们开始吧。

我们如何建立它

今天，我们将使用CodePEn构建我们的“Compose Tweet”组件。对于不熟悉的人来说，CodePen是一个类似于JSBin或JSFiddle的在线HTML / CSS / JavaScript编辑器。对于每个步骤，我将使用相关代码嵌入CodePen。

第1步：脚手架项目

在编写任何JavaScript之前，我们需要做的第一件事就是为我们的“Compose Tweet”组件编写标记。今天我们将使用Tachyons来满足我们几乎所有的风格需求（这样我们就不必编写无关的CSS，并且可以专注于标记和JavaScript）。

我假设你很精通CSS，所以我不会花时间引导你完成Tachyons的造型方法（tl; dr so style，很多类，非常实用）。

在这个CodePen中，我也继续通过CDN进入Vue。实际上，Vue的主要卖点之一就是可以将其集成到新的或现有的代码库中。

有了一切，让我们开始一些功能工作。

第2步：实现第一个功能 - 最初应禁用推文按钮

功能描述：禁用蓝色推文按钮，直到用户输入至少一个字符textarea 。

首先，让我们设置我们的vue实例。如上所述，Vue以其简单的安装和易用性赢得了开发人员的心。我们可以使用以下代码构造Vue实例。

new Vue（{ 
  el：'＃twitterVue'，
  data： { 
    tweet：'' 
  }，
  computed： { 
    tweetISEMpty：function（）{ 
      return this.tweet.length === 0; 
    } 
  } 
}}）

让我解释一下这里发生了什么 -

• el指的是我们将Vue实例附加到的DOM元素。这应该感觉类似于通过传入给定的选择器来实例化jQuery插件，无论是类名还是ID。
• data是描述我们实例的数据模型或状态的对象。我们可以在我们的HTML中访问这个模型中指定的属性 - 通过特殊的大括号语法{{tweet}}- 并在实例本身内（提示，查看tweetIsEmpty函数的主体）
• computed是一个对象，可以根据我们的数据模型描述计算属性。我们建议通过在computedVue实例的键上定义的函数来封装这种状态（或任何派生值），而不是向HTML添加逻辑。

现在把我们的注意力转向HTML，你会看到我们的标记从第一个CodePen开始变化很小。具体来说，我们做了三处更改。

1. 我们将id添加twitterVue到最外层，div以便我们可以构造我们的Vue实例。

<div id =“ twitterVue ”> ... </ div>

2.我们向我们添加了v-model指令textarea，从而在用户输入和实例的数据模型之间创建了双向绑定。现在，只要用户输入textarea，tweet我们实例的数据模型上的属性就会自动更新。

<textarea v-model =“tweet” > </ textarea>

我们将:disabled属性添加  到了我们的button。前面的冒号disabled表示我们想要将引号内的内容作为JavaScript表达式进行评估。如果我们省略冒号，则内容将被视为字符串。您还会注意到我们添加了几行CSS，为禁用按钮提供了独特的视觉样式。

<button ：disabled =“tweetIsEmpty” > Tweet </ button>

...

button[disabled] {
  cursor: not-Allowed;
  opacity: .5;
}

我们还在我们的实例上添加了一个计算属性tweetIsEmpty。请注意，此属性实际上是一个函数，它根据数据模型tweet属性的长度返回一个布尔值。Vue使得在HTML（如上所示）和实例本身中访问数据模型变得非常简单。由于双向数据绑定的神奇之处，在tweet更新值时会评估此函数。当函数计算结果为true时，我们的按钮被禁用，反之亦然。

tweetIsEmpty： function（）{ 
  return this.tweet.length === 0; 
}

不可否认，当我第一次开始使用Vue时，感觉就像烟雾和镜子。帮助我的是在我与组件交互时从字面上看到我们的数据模型发生了什么。由于我们可以通过上述大括号语法轻松访问HTML中的数据模型，因此我们可以构建一个快速，可视化的反馈循环。得分了！

<p> <strong>推文</ strong>的值为：{{tweet}} </ p> 
<p> <strong> tweetIsEmpty </ strong>的值为：{{tweetIsEmpty}} </ p>

如果一路上的任何事情令人困惑（由于我的写作或编码能力差，或者由于Vue本身），请随意重复此步骤。如果您有任何特殊问题，请发送推文或发表评论。

第3步：实现第二个功能 - 显示剩余字符数

功能描述：当用户输入时，显示推文中剩余的字符数（140个）。如果用户输入的字符超过140个，请禁用蓝色的推文按钮。

到目前为止，我们已经了解了双向数据绑定和计算属性，这些概念是Vue的核心。这是我们的幸运日，因为我们可以利用这些概念来构建我们的下一个功能：向用户显示剩余多少个字符（140个），如果此限制被忽略，则禁用该按钮。

再一次，我将引导您完成实现此功能所需的JavaScript和HTML更改。

在我们的JavaScript中，我们做了一些事情。

const MAX_TWEET_LENGTH = 140;

charactersRemaining：function（）{ 
  return MAX_TWEET_LENGTH  -  this.tweet.length; 
}

tweetIsOutOfRange：function（）{ 
  return this.charactersRemaining == MAX_TWEET_LENGTH 
      || this.charactersRemaining <0; 
}

<div class =“flex items-center”> 
  <span class =“mr3 black-70”> {{charactersRemaining}} </ span> 
  <button ：disabled =“tweetIsOutOfRange” class =“button-reset bg-blue bn white f6 fw5 pv2 ph3 br2 dim“>鸣叫</ button> 
</ div>

underTwentyMark：function（）{ 
  return this.charactersRemaining <= 20 
    && this.charactersRemaining> 10; 
  ，
underTenMark： function（）{ 
  return this.charactersRemaining <= 10; 
}

{'dark-red'：underTwentyMark，'light-red'：underTenMark}

<span 
  v-bind：class =“{'dark-red'：underTwentyMark，'light-red'：underTenMark}” > 
  {{charactersRemaining}} 
</ span>

<button @click="LOGNameToConsole">Log User's Name</button>
...
methods: {
  logNameToConsole: function() {
    if( this.name !== 'Donald Trump' ) {
      console.log(this.name); 
    } else {
      console.warn('Sorry, I do not understand');
    }
  },
}

返回我们的功能工作......在此步骤中，我们的标记和JavaScript已通过以下方式进行了更改：

1. 我们添加了button一个@click指令。当用户单击此按钮时，triggerFileUpload 将调用该方法。

<button @click =“triggerFileUpload” > ... </ button>

因此，在我们的JavaScript中，让我们methods在我们的Vue实例中添加一个键，其中包含所述方法，以及我们照片的数据属性。

data：{ 
photo：null 
} ，
 computed：{}，
methods： { 
  triggerFileUpload： function（）{ 
    this。$ refs.photoUpload.click（）; // LOLWUT？
  }，
}

2.设置HTML5文件输入的样式非常困难。一种解决方法是input在DOM中放入一个并隐藏它。为了让浏览器打开本机文件选择器，input 必须单击它。它如何被点击，以及客户端如何处理用户上传的内容，这是另一回事。

在我们的标记中，我们添加了一个这样的input并用特殊hide类隐藏它。我们还添加了一些值得称呼的其他属性：

<input ref =“photoUpload” @change =“handlePhotoUpload” type =“file”class =“hide”>

• 该ref属性用于注册对给定DOM元素的引用。鉴于此引用，我们可以使用JavaScript代码访问DOM元素this.$refs.photoUpload。这意味着我们可以以编程方式触发click()此元素上的事件，从而避免上述挑战。
• 点击输入是一回事; 处理用户上传的文件是另一个。幸运的是，Vue允许我们通过@change指令将处理程序附加到输入的change事件。在用户从文件选择器中选择文件后，将调用我们传递给该指令的方法。这种方法handlePhotoUpload相当简单

handlePhotoUpload：function（e）{ 
  VAR self = this; 
  var reader = new FileReader（）; 
      
  reader.onload = function（e）{ 
    //将base 64字符串设置为我们的数据模型的'photo'键
    self.photo =（e.target.result）; 
  } 
  //读取上传文件为base 64 string 
  reader.readAsDataURL（e.target.files [0]）; 
}

深吸一口气，因为我们几乎完成了这个功能！

用户上传照片后，我们需要在其下方显示一个textarea包含所选照片的框。正如元素的条件样式与Vue一样轻而易举，条件渲染或元素的显示也是如此。您会注意到，在我们的HTML中，我们在下面添加了以下标记textarea。

<div v-if =“photoHasBeenUploaded” > 
  <figure> 
    <button @click =“removePhoto” > 
      ... 
    </ button> 
    <img v-bind：src =“photo” > 
  </ figure> 
</ div>

Vue公司提供的模板助手（屈指可数v-if，v-show, v-else 等等），以帮助您展示和有条件隐藏的内容。当传递给此指令的JavaScript表达式求值为true时，将呈现该元素，反之亦然。

在我们的例子中，我们添加了一个v-if评估计算属性的语句photoHasBeenUploaded 。

photoHasBeenUploaded： function（）{ 
  return this.photo！== null; 
}

当该函数的计算结果为true时 - 当我们的数据模型的照片键不等于null时 - div将呈现整个函数。瞧！

在里面div我们渲染两个元素：

1. 附加的图像，通过将数据模型的photo键的内容传递给Vue的v-bind:src指令
2. 一个删除按钮，其中包含@click处理程序的另一个示例，这个特定的一个调用函数通过将数据模型的photo键设置为null 来“删除”照片。

removePhoto： function（）{ 
  this.photo = null; 
}

我们就快到了。

第6步：更正，用户可以附加“ 照片 ”

因此，我们可以有效地处理用户将一张照片附加到推文，但如果她想上传许多照片怎么办

到目前为止，您应该考虑以下因素：“我想这里唯一重要的变化就是能够在该框中显示多个图像，这些图像有条件地出现在textarea下面，考虑到我们已经连接了我们的事件处理程序......”你是对的！让我们来看看我们需要遵循的步骤

1. 我们需要通过改变来更新我们的数据模型photo来photos，新密钥是一个数组的base64字符串（不是一个单一的base64字符串）

数据：{ 
  照片：[]
 }，

2.我们需要更新我们的计算属性photoHasBeenUploaded以检查新photos密钥的长度，该密钥现在是一个数组。

photoHasBeenUploaded：function（）{ 
  return this.photos.length> 0; 
}

3.我们需要更新输入@change处理程序以循环上传的文件并将它们推送到我们的photos密钥上。

handlePhotoUpload：function（e）{ 
  var self = this; 
  var files = e.target.files;

  for（let i = 0; i <files.length; i ++）{ 
    let reader = new FileReader（）;

    reader.onloadend = function（evt）{ 
      self.photos.push（evt.target.result）; 
    }

    reader.readAsDataURL（文件[1]）; 
  } 
}，

然而，在HTML方面，我们必须走上新的领域。使用jQuery迭代数据和渲染内容可能很麻烦。

var array = [1,2,3,4,5]; 
var newHTML = []; 
for（var i = 0; i <array.length; i ++）{ 
    console.log（'UGHHHHHH'）; 
    newHTML.push（'<span>'+ array [i] +'</ span>'）; 
} 
$（“。element”）。html（newHTML.join（“”））;

值得庆幸的是，Vue通过该v-for指令提供了对此过程的抽象。该指令要求您提供一个表达式，其形式为 (thing, index) in collectionOfThings，collectionOfThings源数组，thing是迭代的数组元素的别名，并且index是该元素的索引。

原型示例可能如下所示：

之前我们有一个figure用户上传照片的单一元素，我们现在将有N个figure标签对应于photos源数组的长度。

幸运的是，由于设计的整体结构仍然相同，我们的标记不必太大改变。

照片中的<figure v-for =“（照片，索引）” > 
  <button @click =“removePhoto（index）” > 
    ... 
  </ button> 
  <img v-bind：src =“photo” class =“h3 w3“> 
</ figure>

我们需要做的一个改变围绕着这个removePhoto方法，在此之前，photo我们将数据模型上的单数键设置为null。现在，由于我们有N个照片，我们必须将元素的索引传递给removePhoto方法并将该元素拉出数组。

removePhoto：function（index）{ 
  this.photos.splice（index，1）; 
}

第7步：动画+额外信用

在Twitter的UI中，“Compose Tweet”组件以模态打开。对于我们的大结局，我想应用到目前为止我们学到的所有Vue技术，并再介绍一下：过渡。

需要注意的是，过渡是Vue土地上的一个巨大的主题。我们将研究并实现这一功能的一小部分，即将第三方动画库Velocity JS与Vue 集成。

简而言之，Vue提供了一个transition组件，允许您为其中包含的元素添加进入/离开动画，前提是该元素设置为通过例如a v-if或v-show指令有条件地显示。

<transition 
  name =“modal-transition” 
  v-on：enter =“modalEnter”  
  v-on：leave =“modalLeave” > 
    <div v-if =“modalShowing” > 
      <！ - 我们的模态内容就在这里！- > 
    </ div> 
</ transition>

在我们的示例中，我们附加了两个与转换生命周期中的两个事件相对应的方法：v-on:enter和v-on:leave。因此，我们已经将这些方法定义添加到我们的Vue实例中，将Velocity JS推迟到fade我们的模态中。

方法：{ 
  modalEnter： function（el，done）{ 
    Velocity（el，'fadeIn'，{duration：300，complete：done，display：'flex'}）
  }，
  modalLeave： function（el，done）{ 
    Velocity（el） ，'fadeOut'，{持续时间：300，完成：完成}）
  } 
}

如上所述，transition当有条件地设置显示包含在其中的元素时将触发。所以，在div我们transition组件的内部，我们添加了一个v-if声明，其值是一个布尔值modalShowing。让我们相应地更新我们实例的数据模型。

data：{ 
  modalShowing：false
 }

现在，当我们想要显示模态时，我们所要做的就是将布尔值设置为true！

<button @click =“showModal” >撰写推文</ button>

并写一个匹配的方法。

hideModal：function（）{ 
  this.modalShowing = false; 
，
showModal： function（）{ 
  this.modalShowing = true; 
}，

通过一些CSS技巧，我们还在click背景中附加了一个事件处理程序，因此用户可以隐藏模态。得分了！

<div @click =“hideModal” class =“backdrop”> </ div>
  
  

结论

好吧，我希望这不是太痛苦（而且你在路上学到了一两件事）。我们只看了一小部分Vue所提供的内容，但如上所述，这些概念对于释放Vue的潜力至关重要。

我承认，将Vue与jQuery进行比较是不公平的。它们是不同时代的产品，具有完全不同的用例。但是，对于那些通过jQuery学习DOM操作和事件处理的人来说，我希望这些概念能够应用到您的工作流程中。

脚本宝典总结

以上是脚本宝典为你收集整理的介绍Vue.js给那些知道足够jQuery的人全部内容，希望文章能够帮你解决介绍Vue.js给那些知道足够jQuery的人所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。