简介：这是一篇超级简单的入门文章

如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。

Vue.js的官方中文教程其实也是一个不错的教程，不过相比于一次性把所有概念掌握，我更倾向于先会用，之后再在实际应用中把未涉及到的知识点逐步补全。

就像开车，不是非要知道发动机的工作原理才能上路的，甚至你可能一辈子也不用知道。

好了，开始吧

准备

首先，以下几点希望你已经知道或者做到了:

  • 你会用html+css+javascript 写一些网页
  • 你知道什么是DOM和BOM(Browser Object Model)
  • 你知道Vue.js是一个框架而不是一个新语言
  • 你会用百度或者Google其中之一去查找答案

接着，我会围绕以下几个Vue.js的基本（核心）使用方法逐个做测试和使用说明：

  • 新建vue对象
  • 数据绑定
  • 事件绑定
  • 表单控件绑定

最后，根据上面的知识点结合起来写出我们的第一个vuejs前端页面

新建Vue对象

  1. 引用vue.js
    在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址 
  1.  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  1. 新建Vue实例
    在Vue.html中插入一个id为firstVue的<div>
  1. <div id="firstVue"></div>

在Vue.html中插入下面js代码:

  1. <script type="text/javascript">
  2.     var myVue = new Vue({
  3.         el:"#firstVue"
  4.     })
  5. </script>

然后整个代码看起来是这样的:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Vue Demo</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  6. </head>
  7. <body>
  8.     <div id="firstVue">
  9.     </div>
  10. </body>
  11. <script type="text/javascript">
  12.     var myVue = new Vue({
  13.         el: "#firstVue"
  14.     })
  15. </script>
  16. </html>

解释一下代码

js变量 myVue 就是Vue创建的一个对象，可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象， 这个对象就是myVue

el是Vue的保留字，用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器，告诉Vue要实例化ID=“firstVue”的这个标签。

至此，Vue.js框架在html页面的引入工作完成，但是如果我们访问这个页面并不能看到任何效果,一篇空白

数据绑定

VUE这个框架的数据流向是单向的，不懂没关系，记住就好了
所以数据绑定后的数据流向是从

vue实例——>DOM文档的

我们给上一步的<div>标签添加下面一句话

  1. {{ my_data }}

变成这样

  1. <div id="firstVue">
  2.     {{my_data}}
  3. </div>

这个双大括号的语法叫做mustache 语法，大括号里面的是作为变量形式出现的。

然后在创建 vue实例的代码中加入下面数据声明:

  1. data:{
  2.     my_data: "test"
  3. }

整个代码看起来向下面这样:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Vue Demo</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  6. </head>
  7. <body>
  8.     <div id="firstVue">
  9.     {{my_data}}
  10.     </div>
  11. </body>
  12. <script type="text/javascript">
  13.     var myVue = new Vue({
  14.         el:"#firstVue",
  15.         data:{
  16.             my_data: "test"
  17.         }
  18.     })
  19. </script>
  20. </html>

data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔，上面我们绑定了自定义变量my_data，并赋初值'test'

完成数据绑定工作，<div>标签里的{{myData}}数据会随着myVue实例里的myData数据的变动而变动，浏览器查看当前页面,会出现'test'字符串，说明数据绑定成功

这是在HTML标签内部的数据绑定，那么如果想绑定某个HTML标签的属性值，就要用到v-bind:属性了，比如我想绑定一个标签是否可见的属性(hidden)，那么就应该这么写:

  1. <div id="firstVue" v-bind:hidden="my_hidden">{{my_data}}</div>

v-bind:后面写想要绑定的属性，my_hidden也不需要用两个大括号括起来了，直接写就可以了，然后在VUE实例中声明这个绑定数据

  1. var myVue = new Vue({
  2.     el:'#firstVue',
  3.     data:{
  4.         my_data: "test",
  5.         my_hidden: "hidden"
  6.     }
  7. })

这时候再浏览这个网页,又变成了空白，但是F12查看源代码，发现其实是div标签的hidden属性被激活了

当然，v-bind:不仅可以绑定hidden属性，disabled属性，style属性, color属性，凡是标签有的属性，都可以通过这个方法进行绑定

v-bind由于经常会用到，所以也可以缩写成冒号:，比如上面的<div>标签就完全可以这样写

  1. <div id="firstVue" :hidden="my_hidden">{{my_data}}</div>

这是和v-bind:hidden="my_hidden"完全等价的一种写法

至此，Vue.js两种绑定数据的方法都写完并进行了测试

事件绑定

v-bind:是用来绑定数据的，v-on:则是用来绑定事件的，比如我要绑定一个<button>的 click事件就这么写

  1. <button v-on:click="clickButton()">Click Me</button>

当然这里的click可以换成任意一个html事件，比如load , doubleclick , mouseon , mousedown这些，不过click肯定是我们最常用的

将click动作绑定到clickButton()函数之后就需要实现这个函数了,我们要在之前的vue实例中加入新字段methods

  1. var myVue = new Vue({
  2.     el:'#firstVue',
  3.     data:{
  4.         my_data: "test",
  5.         my_hidden: "hidden"
  6.     },
  7.     methods:{
  8.         clickButton:function(){
  9.             this.my_data = "Wow! I'm changed!"
  10.         }
  11.     }
  12. })

我们在methods关键字里面定义了clickButton方法，并在方法内改变了之前定义的my_data变量的值

这里涉及到如何在vue实例中引用data字段的变量，如上所示，需要加this后面直接写要引用的变量就可以了

如果不加this，系统会默认你想引用的是一个全局变量，可是这里我们需要引用的是这个vue实例里的局部变量

现在整体代码和之前有些变化，看起来是这样的：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Vue Demo</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  6. </head>
  7. <body>
  8.     <div id="firstVue">
  9.         <button v-on:click="clickButton">Click Me</button>
  10.         <p>{\{my_data\}}</p>
  11.     </div>
  12. </body>
  13. <script type="text/javascript">
  14. var myVue = new Vue({
  15.     el:'#firstVue',
  16.     data:{
  17.         my_data: "test",
  18.         my_hidden: "hidden"
  19.     },
  20.     methods:{
  21.         clickButton:function(){
  22.             this.my_data = "Wow! I'm changed!"
  23.         }
  24.     }
  25. })
  26. </script>
  27. </html>

好了，运行一下，点击Click Me的时候"test"就会变成"Wow! I'm changed!"，这是因为变量my_data的改变。

另外，v-on:语法同样有一个缩写@，比如v-on:click="clickButton"就等价于@click="clickButton"

表单控件绑定

之前有说Vue这个框架是单向数据传输的，就是从vue实例传送数据到DOM ，那么我们如何从DOM中实时获取用户输入的数据赋值给vue实例呢

这用到了Vue.js提供给用户的一个语法糖 v-model ,这个语法糖通过两步实现了数据的反向传递，也就是从DOM传送给vue实例数据。

下面说的原理看不懂可以跳过，不会影响后续阅读

v-model 通过两步实现了数据反向传递

第一步，绑定了DOM标签的input事件(比如叫tapInput())

第二步，当用户进行输入时候，触发tapInput()函数，tapInput()函数内部读取此DOM标签的Value值，赋值给vue实例

通过以上两步，v-model语法糖实现了vue数据的反向传输

好，直接写一个例子吧

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Vue Demo</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  6. </head>
  7. <body>
  8.     <div id="firstVue">
  9.         <input type="text" v-model="my_data" />
  10.         <button v-on:click="clickButton">Click Me</button>
  11.         <p>{{my_data}}</p>
  12.     </div>
  13. </body>
  14. <script type="text/javascript">
  15.     var myVue = new Vue({
  16.         el:'#firstVue',
  17.         data:{
  18.             my_data: "test",
  19.             my_hidden: "hidden"
  20.         },
  21.         methods:{
  22.             clickButton:function(){
  23.                 this.my_data = "Wow! I'm changed!"
  24.             }
  25.         }
  26.     })
  27. </script>
  28. </html>

可以发现，我们增加了一个<input>标签，并且用v-model语法绑定了之前定义的变量my_data

这个时候，当我们在<input>输入框输入值的时候，v-model会实时将最新值(value)赋值给vue实例的my_data变量，而my_data变量又将实时展现在<p>标签中

这样我们看起来实现了这么一个数据流:

DOM1(input标签)——>VUE——>DOM2(p标签)

先从用户输入的DOM1获取输入保存在VUE实例，用从VUE实例里拿到数据输出到DOM2

运行这个页面，发现<p>标签中的内容会随着<input>标签实时的变化，说明我们利用v-model语法变相实现了数据的双向传递

总结

看看我们学到了什么

  • 用 new Vue({})新建vue实例
  • 使用 v-bind:和{{}}双大括号语法在html中绑定变量
  • 使用 v-on: 和 @ 语法绑定函数到标签的事件
  • 使用 v-model: 语法使用户的页面输入反向传递回vue实例变量

现在简单完善一下上面的代码，做成一个计数器程序，用户可以在输入框输入任意数字，点击按钮进行总数累加

下面是对刚才代码进行了一些小的改动，相信你一定可以看明白的

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Vue Demo</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  6. </head>
  7. <body>
  8.     <div id="firstVue">
  9.         <input type="number" v-model.number="my_step" />
  10.         <button v-on:click="clickButton">Add</button>
  11.         <p>{{my_total}}</p>
  12.     </div>
  13. </body>
  14. <script type="text/javascript">
  15.     var myVue = new Vue({
  16.         el:'#firstVue',
  17.         data:{
  18.             my_step: ,
  19.             my_total:
  20.         },
  21.         methods:{
  22.             clickButton:function(){
  23.                 this.my_total = this.my_total + this.my_step
  24.             }
  25.         }
  26.     })
  27. </script>
  28. </html>

上面v-model.number后面的这个.number的意思是说在返回my_step值的时候自动转换成integer类型，因为默认是string类型，所以要多这么一句。

本文算是vue的基础内容，下一篇将会是vue的核心内容，组件。

前端的东西多且杂，东拼西凑总也不是进步的办法，我认为最好就是将主干的一支学明白用在实际项目中，其他的一些枝枝叉叉遇见了现看文档也是来得及的，比如我每次FLEX布局都要现查语法，甚至写前端页面的时候总是开着VUE的官方文档随时查看 -囧-

我会写出一个用Vue.js构建SPA(Single Page Application)的系列文章, 希望可以让初学、转学VUE的人少走弯路

最后的最后，转载请注明出处，谢谢

原文链接：https://www.jianshu.com/p/5d0d913d2453

VueJS简明教程(一)之基本使用方法的更多相关文章

  1. Processing简明教程与Java平台移植方法

    1 Processing    1.1 Processing简介          Processing是一种具有革命前瞻性的新兴计算机语言,它的概念是在电子艺术的环境下介绍程序语言,并将电子艺术的概 ...

  2. Python 简明教程 --- 20，Python 类中的属性与方法

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 与客户保持良好的关系可以使生产率加倍. -- Larry Bernstain 目录 类中的变量称为属 ...

  3. 2013 duilib入门简明教程 -- 自绘控件 (15)

        在[2013 duilib入门简明教程 -- 复杂控件介绍 (13)]中虽然介绍了界面设计器上的所有控件,但是还有一些控件并没有被放到界面设计器上,还有一些常用控件duilib并没有提供(比如 ...

  4. 2013 duilib入门简明教程 -- 事件处理和消息响应 (17)

        界面的显示方面就都讲完啦,下面来介绍下控件的响应.     前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEG ...

  5. 2013 duilib入门简明教程 -- 总结 (20)

        duilib的入门系列就到尾声了,再次提醒下,Alberl用的duilib版本是SVN上第个版本,时间是2013.08.15~       这里给出Alberl最后汇总的一个工程,戳我下载,效 ...

  6. Java8简明教程（转载）

    ImportNew注:有兴趣第一时间学习Java 8的Java开发者,欢迎围观<征集参与Java 8原创系列文章作者>. 以下是<Java 8简明教程>的正文. “Java并没 ...

  7. HTML简明教程（二）

    HTML简明教程(二) 一.HTML 图像 二.HTML 表格 三.HTML 列表 四.HTML div和 span 五.HTML 布局 六.HTML 表单和输入 七.HTML 框架 八.HTML内联 ...

  8. HTML简明教程（一）

    HTML简明教程(一) 内容主体来自:W3School 一.HTML 简介 二.HTML 基础 三.HTML 元素 四.HTML 属性 五.HTML 标题 六.HTML 段落 七.HTML 文本格式化 ...

  9. Lisp简明教程

    此教程是我花了一点时间和功夫整理出来的,希望能够帮到喜欢Lisp(Common Lisp)的朋友们.本人排版很烂还望多多海涵! <Lisp简明教程>PDF格式下载 <Lisp简明教程 ...

随机推荐

  1. GoLand远程Linux开发环境搭建

    Goland 远程调试本文介绍如何从本机的goland连接远端server上的go代码进行调试 goland下载安装 建议购买正版,科学使用自行搜索. 需要安装插件,确保可以访问官网,不然配置下pro ...

  2. Golang基础(7)：go的net/rpc用法

    一:PRC是什么? RPC(Remote Procedure Call) 远程过程调用,是一个计算通信协议.该协议允许一台计算机上的程序调用另外一台计算机上的程序.远程过程调用就是2个不在同一台计算机 ...

  3. LeetCode.914-一副牌中的X(X of a Kind in a Deck of Cards)

    这是悦乐书的第352次更新,第377篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第214题(顺位题号是914).在一副牌中,每张牌上都写有一个整数. 当且仅当您可以选择 ...

  4. HCL 试验1

    PC端配置:配置ip地址 交换机配置:①创建VLAN system-view vlan 10 vlan 20 ②配置PC端接口 interface gi 1/0/1 port link-type ac ...

  5. 第六周&Java实验报告四(类的继承)

    一.实验目的 (1)掌握类的继承 (2)变量的继承和覆盖,方法的继承,重载和覆盖的实现: 二.实验的内容 (1)根据下面的要求实现圆类Circle. 1.圆类Circle的成员变量:radius表示圆 ...

  6. 使用注解@CrossOrigin解决跨域问题

    转一个大兄弟写的贴子,总结得很好,很全面 https://www.cnblogs.com/mmzs/p/9167743.html 作者: 淼淼之森

  7. 洛谷 P1072 Hankson 的趣味题 题解

    题面 提前知识:gcd(a/d,b/d)*d=gcd(a,b); lcm(a,b)=a*b/gcd(a,b); 那么可以比较轻松的算出:gcd(x/a1,a0/a1)==gcd(b1/b0,b1/x) ...

  8. shell with hadoop

    shell 命令操作 hadoop 之前多少提及过,这里做个总结. shell with hdfs 基本命令 bin/hadoop fs 大于下面的命令 bin/hdfs dfs dfs 是 fs 的 ...

  9. css实现两个div并排等高（一个div高度随另一个高度变化而变化）

    方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;

  10. Java RMI 最简单实例

    IHello.java import java.rmi.Remote; import java.rmi.RemoteException; public interface IHello extends ...