Vue.js简易安装和快速入门详解-js教程-PHP中文网

首页

web前端

js教程

Vue.js简易安装和快速入门详解

小云云

Jan 15, 2018 pm 01:04 PM

javascript vue.js 入门

本文主要为大家详细介绍了Vue.js简易安装和快速入门的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

上一节我们介绍了Vue.js框架，这一节，我们可以来试着动手写点小代码了。

1 简易安装

要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件，先把代码敲代码再说。

<head>
    <meta charset="UTF-8">
    <title>简易安装 Vue.js</title>
    <script src="vue.js"></script>
</head>

登录后复制

官网提供了Vue.js源码下载的地方：https://cdn.jsdelivr.net/vue/2.1.3/vue.js

如果你不想下载到本地，要可以直接用CDN的方式，引入网上资源，一样可以：

<script src="https://xx/vue.js"></script>

登录后复制

这样，我们就成功地用最简单的方法把Vue.js引入到我们的项目中了。至于那些高大上的npm，Bower等花式安装方法，我们后期再看它。

2 数据驱动视图

引入之后，我们就可以把它用起来。听说它最牛逼的地方是数据驱动视图，解放DOM操作，让你不再做又复杂又耗性能的DOM操作。那么，我们就看看它是怎么玩的！

假设，我们现在要把js对象中的某个变量的值渲染在页面上，传统的做法，就是先用getElementById获取到DOM节点对象，再innerHTML设置它的内容。

现在，在Vue.js中，你需要这样做：

<p id="app">
  公众号：{{ name }}
 </p>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       name:"web前端教程",
     }
   });
 </script>

登录后复制

我们通过new Vue( )创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM 元素(id='app')，表明这个实例是关联指定的DOM节点。

在DOM节点上，我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值，如上面案例中的name属性的值“web前端教程”就会被渲染到页面中，替换{{ name }} 显示效果为：“web前端教程”。

在此过程中，我们并没有写过操作DOM节点的代码，而且，上一节我们讲过，MVVM模式中的viewModel充当着监控者的角色，假如它监控到model数据发生了变化，便会通知view视图进行更新，这个过程并不需要你去参与。

（复习mvvm）

我们来试试看，我们把name中的值改成：“hello word”，再不添加任何代码的情况下，页面视图是否会自动更新。

看下面的gif动图，我们通过chrome浏览器演示一下：

(慢点，等gif图加载完)

如上图所示，一旦name的值被改变了，页面上立马跟着发生了变化，而不需要你再写innerHTML去更新视图了。

这就是Vue.js的数据驱动视图。

3 双向绑定

更方便的是，Vue.js还提供了方便的语法指令，实现视图和数据的双向绑定，也就是说，不但数据变化了可以驱动视图，用户在页面上做了一些操作，也很方便地实现更新model层的数据。

例子：监听用户在页面输入框输入的内容，然后将其实时更新在页面上。

在Vue中我们使用v-model指令就可以轻松实现。（v-model是什么东西，先不用管，后面会有章节详细介绍）。

<p id="app">
   <input v-model="number">
   <p>数字:{{ number }}</p>
 </p>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       number:"",
     }
   });
 </script>

登录后复制

效果如下面的动图：

(慢点，等gif图加载完)

案例中，我们不需要写代码去监听input控件的内容变化，用户输入的内容，会实时地更新vm实例中的data属性number的值，一旦number更新了，视图也会跟着更新了。因为这一切，都由Vue.js帮你完成了。

4 组件

上面的我们演示了Vu.jse的数据驱动，别忘了，上一节我们提到Vue.js还有一个重要的核心，就是：组件化。

组件化就是把页面中特定的区块独立抽出来，并封装成一个可方便复用的组件。

例子：假设，页面上有多个一样的卡片：

传统的办法，我们可以要写三份同样的HTML布局：

 <p id="app">
  <!--第1个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
  
  <!--第2个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
  
  <!--第3个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
 </p>

登录后复制

如果我们把每个卡片看作一个可复用的区域的话，那么它就可以封装成一个组件。

在Vue.js中，我们试着把卡片封装成一个组件。

<p id="app">
   <card></card>
   <card></card>
   <card></card>
 </p>

 <script>
  //注册一个名叫card的组件
 Vue.component(&#39;card&#39;,{
    template:`<p>
      <img src="logo.png" alt="">
      <h2>web前端教程</h2>
      <p>这里是描述，很长的描述</p>
      <button>我是按钮</button>
    </p>`
  });

  new Vue({
    el:"#app"
  });
 </script>

登录后复制

我们用Vue.component(tagName, options)注册了一个名字叫card的组件，这样，在需要复用这个组件的地方，我们只需要使用就可以了。实际开发中，组件比这个复杂得多，越复杂，封装后的便利性越高。

可能你会说，组件里面的显示的内容不可能全都一样。放心，Vue为组件提供了props属性来接受传递进来的参数，后面我们会有专门的章节来介绍组件的详细用法。

5 本节小结

看到这里，你已经了解了Vue.js的数据驱动和组件化两大核心了，你已经入门了。后面的章节都是围绕这两个核心点来展开讲解。

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7533

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

值得你花时间看的扩散模型教程，来自普渡大学 Apr 07, 2024 am 09:01 AM

Diffusion不仅可以更好地模仿，而且可以进行「创作」。扩散模型（DiffusionModel）是一种图像生成模型。与此前AI领域大名鼎鼎的GAN、VAE等算法，扩散模型另辟蹊径，其主要思想是一种先对图像增加噪声，再逐步去噪的过程。其中如何去噪还原原图像是算法的核心部分。最终算法能够从一张随机的噪声图像中生成图像。近年来，生成式AI的惊人增长将文本转换为图像生成、视频生成等领域的许多令人兴奋的应用提供了支持。这些生成工具背后的基本原理是扩散的概念，这是一种特殊的采样机制，克服了以前的方法中被

一键生成PPT！Kimi ：让「PPT民工」先浪起来 Aug 01, 2024 pm 03:28 PM

Kimi：一句话，十几秒钟，一份PPT就新鲜出炉了。PPT这玩意儿，可太招人烦了！开个碰头会，要有PPT；写个周报，要做PPT；拉个投资，要展示PPT；就连控诉出轨，都得发个PPT。大学更像是学了个PPT专业，上课看PPT，下课做PPT。或许，37年前丹尼斯・奥斯汀发明PPT时也没想到，有一天PPT竟如此泛滥成灾。吗喽们做PPT的苦逼经历，说起来都是泪。「一份二十多页的PPT花了三个月，改了几十遍，看到PPT都想吐」；「最巅峰的时候，一天做了五个PPT，连呼吸都是PPT」；「临时开个会，都要做个

CVPR 2024全部奖项公布！近万人线下参会，谷歌华人研究员获最佳论文奖 Jun 20, 2024 pm 05:43 PM

北京时间6月20日凌晨，在西雅图举办的国际计算机视觉顶会CVPR2024正式公布了最佳论文等奖项。今年共有10篇论文获奖，其中2篇最佳论文，2篇最佳学生论文，另外还有2篇最佳论文提名和4篇最佳学生论文提名。计算机视觉（CV）领域的顶级会议是CVPR，每年都会吸引大量研究机构和高校参会。据统计，今年共提交了11532份论文，2719篇被接收，录用率为23.6%。根据佐治亚理工学院对CVPR2024的数据统计分析，从研究主题来看，论文数量最多的是图像和视频合成与生成（Imageandvideosyn

从裸机到700亿参数大模型，这里有份教程，还有现成可用的脚本 Jul 24, 2024 pm 08:13 PM

我们知道LLM是在大规模计算机集群上使用海量数据训练得到的，本站曾介绍过不少用于辅助和改进LLM训练流程的方法和技术。而今天，我们要分享的是一篇深入技术底层的文章，介绍如何将一堆连操作系统也没有的「裸机」变成用于训练LLM的计算机集群。这篇文章来自于AI初创公司Imbue，该公司致力于通过理解机器的思维方式来实现通用智能。当然，将一堆连操作系统也没有的「裸机」变成用于训练LLM的计算机集群并不是一个轻松的过程，充满了探索和试错，但Imbue最终成功训练了一个700亿参数的LLM，并在此过程中积累

入门学习C语言的五款编程软件 Feb 19, 2024 pm 04:51 PM

C语言作为一门广泛应用的编程语言，对于想从事计算机编程的人来说是必学的基础语言之一。然而，对于初学者来说，学习一门新的编程语言可能会有些困难，尤其是缺乏相关的学习工具和教材。在本文中，我将介绍五款帮助初学者入门C语言的编程软件，帮助你快速上手。第一款编程软件是Code::Blocks。Code::Blocks是一个免费的开源集成开发环境（IDE），适用于

AI在用 | AI制作独居女孩生活Vlog，3天狂揽上万点赞量 Aug 07, 2024 pm 10:53 PM

机器之能报道编辑：杨文以大模型、AIGC为代表的人工智能浪潮已经在悄然改变着我们生活及工作方式，但绝大部分人依然不知道该如何使用。因此，我们推出了「AI在用」专栏，通过直观、有趣且简洁的人工智能使用案例，来具体介绍AI使用方法，并激发大家思考。我们也欢迎读者投稿亲自实践的创新型用例。视频链接：https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ最近，独居女孩的生活Vlog在小红书上走红。一个插画风格的动画，再配上几句治愈系文案，短短几天就能轻松狂揽上

技术入门者必看：C语言和Python难易程度解析 Mar 22, 2024 am 10:21 AM

标题：技术入门者必看：C语言和Python难易程度解析，需要具体代码示例在当今数字化时代，编程技术已成为一项越来越重要的能力。无论是想要从事软件开发、数据分析、人工智能等领域，还是仅仅出于兴趣学习编程，选择一门合适的编程语言是第一步。而在众多编程语言中，C语言和Python作为两种广泛应用的编程语言，各有其特点。本文将对C语言和Python的难易程度进行解析

细数RAG的12个痛点，英伟达高级架构师亲授解决方案 Jul 11, 2024 pm 01:53 PM

检索增强式生成（RAG）是一种使用检索提升语言模型的技术。具体来说，就是在语言模型生成答案之前，先从广泛的文档数据库中检索相关信息，然后利用这些信息来引导生成过程。这种技术能极大提升内容的准确性和相关性，并能有效缓解幻觉问题，提高知识更新的速度，并增强内容生成的可追溯性。RAG无疑是最激动人心的人工智能研究领域之一。有关RAG的更多详情请参阅本站专栏文章《专补大模型短板的RAG有哪些新进展？这篇综述讲明白了》。但RAG也并非完美，用户在使用时也常会遭遇一些「痛点」。近日，英伟达生成式AI高级解决

See all articles

Vue.js简易安装和快速入门详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题