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

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

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

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

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

好了,开始吧

准备

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

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

接着,我会围绕以下几个Vue.js的基本(核心)使用方法逐个做测试和使用说明:

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

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

新建Vue对象 引用vue.js在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

新建Vue实例在Vue.html中插入一个id为firstVue的

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

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

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript"> var myVue = new Vue({ el: "#firstVue" }) </script>

解释一下代码

js变量myVue就是Vue创建的一个对象,可以理解成把

{{my_data}}

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

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

data:{ my_data: “test” }整个代码看起来向下面这样:

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

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

完成数据绑定工作,

标签里的{{myData}}数据会随着myVue实例里的myData数据的变动而变动,浏览器查看当前页面,会出现’test’字符串,说明数据绑定成功这是在HTML标签内部的数据绑定,那么如果想绑定某个HTML标签的属性值,就要用到v-bind:属性了,比如我想绑定一个标签是否可见的属性(hidden),那么就应该这么写:

{{my_data}}

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由于经常会用到,所以也可以缩写成冒号:,比如上面的

标签就完全可以这样写

{{my_data}}

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

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

事件绑定v-bind:是用来绑定数据的,v-on:则是用来绑定事件的,比如我要绑定一个

当然这里的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实例里的局部变量

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

{\{my_data\}}

<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>

好了,运行一下,点击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数据的反向传输

好,直接写一个例子吧

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

{{my_data}}

<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>

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

这个时候,当我们在输入框输入值的时候,v-model会实时将最新值(value)赋值给vue实例的my_data变量,而my_data变量又将实时展现在

标签中

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

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

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

运行这个页面,发现

标签中的内容会随着标签实时的变化,说明我们利用v-model语法变相实现了数据的双向传递

总结看看我们学到了什么

用new Vue({})新建vue实例 使用v-bind:和{{}}双大括号语法在html中绑定变量 使用v-on:和@语法绑定函数到标签的事件 使用v-model:语法使用户的页面输入反向传递回vue实例变量现在简单完善一下上面的代码,做成一个计数器程序,用户可以在输入框输入任意数字,点击按钮进行总数累加

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

{{my_total}}

<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>

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

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

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

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

©️李联华的博客网 当前IP地址:3.233.242.67,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/basic-usage-of-vuejs-concise-tutorial.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...