VueJS简明教程(一)之基本使用方法

时间  2019-12-10
标签 vuejs 简明 教程 基本 使用方法 繁體版
原文   原文链接

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

若是说是JQuery是手工做坊，那么Vue.js就像是一座工厂，虽然Vue.js作的任何事情JQuery均可以作，但不管是代码量仍是流程规范性都是前者较优。css

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

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

好了，开始吧vue

准备

首先，如下几点但愿你已经知道或者作到了:java

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

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

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

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

新建Vue对象

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

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

<script type="text/javascript">
    var myVue = new Vue({
        el:"#firstVue"
    })
</script>

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

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#firstVue"
    })
</script>
</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>标签添加下面一句话

{{ my_data }}

变成这样

<div id="firstVue">
    {{my_data}}
</div>

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

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

data:{
    my_data: "test"
}

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

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
    {{my_data}}
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:"#firstVue",
        data:{
            my_data: "test"
        }
    })
</script>
</html>

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

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

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

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

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

var myVue = new Vue({
    el:'#firstVue',
    data:{
        my_data: "test",
        my_hidden: "hidden"
    }
})

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

固然，v-bind:不只能够绑定hidden属性，disabled属性，style属性, color属性，凡是标签有的属性，均可以经过这个方法进行绑定

v-bind因为常常会用到，因此也能够缩写成冒号:，好比上面的<div>标签就彻底能够这样写

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

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

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

事件绑定

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

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

固然这里的click能够换成任意一个html事件，好比load , doubleclick , mouseon , mousedown这些，不过click确定是咱们最经常使用的

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

var myVue = new Vue({
    el:'#firstVue',
    data:{
        my_data: "test",
        my_hidden: "hidden"
    },
    methods:{
        clickButton:function(){
            this.my_data = "Wow! I'm changed!"
        }
    }
})

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

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

若是不加this，系统会默认你想引用的是一个全局变量，但是这里咱们须要引用的是这个vue实例里的局部变量

如今总体代码和以前有些变化，看起来是这样的：

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <button v-on:click="clickButton">Click Me</button>
        <p>{\{my_data\}}</p>
    </div>
</body>
<script type="text/javascript">
var myVue = new Vue({
    el:'#firstVue',
    data:{
        my_data: "test",
        my_hidden: "hidden"
    },
    methods:{
        clickButton:function(){
            this.my_data = "Wow! I'm changed!"
        }
    }
})
</script>
</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数据的反向传输

好，直接写一个例子吧

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <input type="text" v-model="my_data" />
        <button v-on:click="clickButton">Click Me</button>
        <p>{{my_data}}</p>
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_data: "test",
            my_hidden: "hidden"
        },
        methods:{
            clickButton:function(){
                this.my_data = "Wow! I'm changed!"
            }
        }
    })
</script>
</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实例变量

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <input type="number" v-model.number="my_step" />
        <button v-on:click="clickButton">Add</button>
        <p>{{my_total}}</p>
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_step: 1,
            my_total: 0
        },
        methods:{
            clickButton:function(){
                this.my_total = this.my_total + this.my_step
            }
        }
    })
</script>
</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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程