Vue.js简易安装和快速入门（第二课）

2024-10-02 20:29:41

上一节我们介绍了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中，你需要这样做：

<div id="app">
  公众号：{{ name }}
 </div>
 <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是什么东西，先不用管，后面会有章节详细介绍）。

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

效果如下面的动图：

(慢点，等gif图加载完)

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

4 组件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 本节小结

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

来源：公众号：web前端教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue.js入门教程之绑定class和style样式

一.前言相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo
vue.js的安装方法

一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angula
vue.js从安装到搭建过程详解

最初的时候用vue是直接下载相关文件按照以前的方法来操作的后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程: 安装 1. 安装nodejs 直接网上找下载就好 2.安装淘宝镜像打开命令行输入 npm install -g cnpm --registry= https://registry.npm.taobao.org 3.安装webpack cnpm install webpack -g 4.在你想要新建项目的路径下新建文件夹用于存放项目文件 cd 进入你
详解vue.js的devtools安装

安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工程执行npm install ----->npm run build. 3.修改manifest.json 中的persistent为true 4.打开谷歌浏览器设置--->扩展程序-->勾选开发者模式--->添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome,至此恭
手把手搭建安装基于windows的Vue.js运行环境

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 在配置环境之前呢,有些基础的东西还是要和大家普及一下的.如果你已经对Vue.js有所了解,那请点击配置步骤跳转到配置环境的阅读,否则,请耐心看完看完. 首先,介绍一下Vue.js的概念,他是干啥的呢?一定要配置vue的运行环境吗? 如上述Vue.js不是个全能的框架,因为他
JavaScript的Vue.js库入门学习教程

Vue是一个小巧轻便的javascript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 这篇教程的目的就是通过一些例子,让你能够概览一些基本的概念和特性.在接下来的其他教程里,你会学到Vue更多的有用的特性,从而用Vue搭建一个可扩展的项目. MVVM 数据绑定 MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新.Vue.js在数据绑定的API设计上借鉴了Angula
Vue.js实战之Vuex的入门教程

前言在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入 import Vue from 'vue' import App
什么是Vue.js框架为什么选择它？(第一课)

"大白话,讲编程"系列又回来了,这个系列我们一起学习的是Vue.js基础知识.你没看错,是基础知识.所以,哪怕你入行不久,相信你在的大白话风格下,也能学会. 但还是希望你有开发过html,css,javascript的项目经验,如果你连一点项目经验都没有,亦或者你早已掌握Vue.js的知识,那么这个系列不适合你当前的学习阶段. 1 学习目标通过这一节,你会学会: 1.目前前端技术使用的趋势 2.什么是MVVM 3.Vue.js的优点 4.Vue.js的两大核心 5.Vue.js的适用
Vue.js快速入门教程

像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U
vue.js开发环境安装教程

一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angula

Vue.js简易安装和快速入门（第二课）

相关推荐

随机推荐