01

什么是Vue.js

Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架

看到这里,你就会问了,什么是渐进式?

  • 渐进式就是你可以将Vue作为一个项目中的部分组件改用Vue实现,不需要引入其他复杂的功能,带来丰富的交互体验。

  • 也可以在一个项目中,更多的的业务逻辑都使用Vue,这样Vue整个核心库以及其生态系统可以逐步的引用。

02

引入Vue的方法

本篇文章因为是主要是为了Vue的入门教程,重点主要是Vue的整个基础语法上,所以不使用vue-cli,先采用手动引入js的方式,学会Vue的基础使用,循环渐进,更加有利于我们的学习!

引入Vue.js有三种方式:

1、直接CDN引入

6c12f2b131161a8dcabb5ea2e07b003d.png

2、下载和引入

       开发环境:https://vuejs.org/js/vue.js

       生产环境:https://vuejs.org/js/vue.min.js

3、NPM安装

       后续会有专门的文章介绍webpack和cli的使用。

03

第一个体验

我们在将Vue引入之后就可以开始我们第一个Vue程序了,体验一下Vue的响应式。

b8397af0ebbc73cff8890befd1ea1086.png

运行结果:

6d0ed96ffe3f7d66fea1b95b471af23c.png

解释一下:

app变量就是Vue创建的对象,创建对象的时候传入了一些options:{}

  • el:该属性决定了Vue的这个对象挂载在了哪个元素上。上述代码中就是将这个对象挂载在了id为app的这个元素上,这个对象把

    {{message}}
    中所包含的所有的DOM都进行了实例化。
  • data:该属性存储一些数据(数据可以来自于自己定义的,也可以是服务器加载的)。

将data中的文本数据,插入到HTML的操作,有一个统一的名字——Mustache语法(双大括号)。

04

Vue的基础语法

2.1插值语法

 

插值操作就是将Mustache语法放入到Vue对象中。Mustache语法双大括号里面是以变量的形式出现的,也可以是表达式的形式,也可以在一个标签中出现两个Mustache,不在大括号中的内容则以原值显示。

b8397af0ebbc73cff8890befd1ea1086.png

结果:

fa255f3477aa00ad0771ef9505d386bf.png e48f22f29a4ad962c17dccbf7b052626.gif

上面有说过,Vue是响应式的,响应式就是随着data中变量的改变,页面显示的值也会相应的随之改变。如:我们可以在打开开发者模式,进入Console中进行修改count的值

e644d2ad6416c93cbef795a97193e777.png

修改完之后,页面的结果变为:

7b1c73a1386a8244b3aa6396cbfa1b38.png

为了不希望它改变,我们可以加入一个Vue的指令v-once。

78e4bc02932eaa0ac1a422e70507f075.png

大家可以自己测试一下!

某些时候,我们的数据是一段HTML代码,但是我们想要显示的是显示解析HTML代码之后的内容,但是如果我们直接在Mustache语法直接显示的话,他展示的为这段HTML代码,我们可以使用v-html指令,这个指令后面会跟一个string类型,然后将string类型的HTML解析出来并且渲染。

c4fe79e385131717d0962b9b6360ad63.png

结果:

2825bb9fee7189ef9cb5741498416ebe.png e81f515d6bbf67b9e0047e6edc611e96.gif

将数据显示在页面中,除了Mustache语法外,还有一种是使用v-text指令。该指令一般情况下接收的是一个string类型的值。

239d77f3322f825375fa48cbc6b7f42c.png

结果:

b6ceb204f123db2101d810c2d1e9f00f.png

接下来我们学习下一个指令v-pre,这个指令会跳过这个元素和子元素的编译过程,显示原本的大括号语法。

281223634422b3f39cb0968823c50a0a.png dcde09afaddf4d2f7f8e7924a627f2a6.png

2.2绑定属性

 

前面我们学习的插值语法是将数据插入到模板的内容中,但是除了内容需要动态的决定以外,某些特有的属性我们也希望它可以动态的来绑定,比如:a标签中的href属性。这个时候我们就可以使用v-bind指令。

v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值

ef0bf8bbc027281100a97499af2567eb.png

结果:

dcd7c1384e4cca2ea9e7f6327b00b1ab.png

点击百度就可以跳转到百度的页面了,大家不妨试一试。

v-bind也可以使用语法糖的形式,也就是它的简写方式

39c09ec93331b853a1eef74bfb745cad.png

2.3事件监听

 

在我们开发的过程中,我们通常要和用户进行交互,我们就需要监听用户的操作,比如:点击事件,获取焦点事件,键盘事件等等。在Vue中,我们通常使用v-on指令来实现监听事件的功能。

v-on的语法糖@,所以接下来,我们下面的示例代码均使用语法糖形式。

032a7e02ccdf54dc11d9998da8ce3a92.png

注:其中的methods是Vue定义方法的位置,也是Vue对象的一个属性。在调用其中的方法的时候,需要注意参数问题:

  1. 如果方法中不需要参数,则()可以省略不写。

  2. 如果方法需要一个参数,调用方法的时候没有写括号,那么会默认的将原生事件event参数传递进去。

  3. 如果方法同时传入了多个参数,那么原生事件event需要手动通过$event传入。

abfe903df3f91c12689418c5a6155f6d.png

结果:

5f3eeb454f058698d2b291fdb4fd4907.png

2.4条件判断

 

条件判断指令v-if、v-else-if、v-else。

3ea59cc764932bc47018f54a38459b6d.png

结果:

31821bd195ea3f8c8aeda41912d65a0c.gif

实现一个小案例:

有两个按钮:点击按钮1,显示一个input元素;点击按钮2,显示另一个input元素。

9bdfb5312917ffd5895bd582c04384b7.png

完成之后,我们在input1中输入值,点击按钮2

结果:

183fa32bb7e25fb43be49c9b2da201b8.gif

在点击按钮切换的时候,input已经发生了变化,但是里面的值并没有随着按钮的切换而置空,原因是:

Vue在进行DOM渲染的时候,出于对性能的考虑,会尽可能的复用已经存在的元素,所以在使用v-if的时候,要加上key,并且保证key的值不同,这样就不会出现复用的情况。

v-show和v-if的比较:

  • 两者都是可以决定一个元素的显隐;

  • v-if条件为false 的时候,不会有对应的元素在DOM中;v-show的条件为false时,仅仅是将元素的display属性置为none;

  • 在开发中,如果显隐的切换很频繁,使用v-show;当只有一次,则使用v-if。

2.5循环

 

Vue中使用v-for指令来实现将一组数据的渲染。

52f167dc9ed619f32fbfd15d5ad67380.png

结果:

df7659466b935d7720d6474677a2f147.png

如果你看了官网中关于v-for的介绍,就会发现,在官网的介绍中,建议在使用v-for时,加上key属性,这个是为什么呢?(有兴趣可以去了解一下Diff算法),我这里简单的描述一下。

当同一层有很多相同的节点,我们需要在中间添加一个新的节点的时候,比如有1,2,3,4,5五个顺序的节点,现在要在第2个节点之后新加一个节点6,那么Diff算法会将3更新为6,4更新为3,5更新为4,再添加一个5节点,这样我们渲染真实DOM开销是非常大的,那么为了解决这个问题,我们给每个节点设置一个key来做唯一的表示,这样子就可以正确的识别此节点,那么再添加6节点的时候,只需要找到插入的位置,直接插入新的6节点就好了。

2.6表单双向绑定

 

Vue中使用`v-model`指令来实现了表单元素和数据的双向绑定。

6dd621a643df7327d73a77cdb5d427d0.png

结果:

43fc3cb40b1bcb531f78a162681d8281.png

我们可以很直观的看到显示的结果,当我们input中的数据发生变化时,会将输入的内容传递给message变量,页面中的message也会随之发生改变,所以,通过v-model我们实现了双向绑定。

有人可能会疑问,v-model的双向绑定都是怎么实现的呢?其实v-model就是一种语法糖的表示形式,它包含了两个操作:

  1. 将input的value属性通过v-bind来绑定;

  2. 通过v-on给input标签添加了input事件(input事件是当input标签中的值发生变化时触发的事件)

8b198642775dccfbd217903613dda3f7.png

接下来,介绍几个有关v-model的修饰符

  • 通常情况下,我们已经知道了,给input标签添加v-model指令之后,数据发生改变,那么data中对应的值也会发生相应的变化。

某些时候我们不想它们自动变化,可以使用lazy修饰符,该修饰符可以在标签失去焦点或者是回车的时候才会更新数据。

e1f6743d77af7bed995e73a89b9bdf8d.png b37ffb7e60ff2afa402abb1050b3a6ac.gif
  • 通常情况下,我们的输入框都会将输入的内容当成字符串进行处理,但是如果我们希望处理的是数字类型,我们可以使用number修饰符可以让输入框输入的内容自动转为数字类型。

  • 如果在我们输入的内容中前后有许多的空格,通常我们希望可以将这些空格去除,那么可以使用trim修饰符来去除左右两端的空格。

2.7计算属性

 

通过前面的学习,我们已经知道,通过插值的操作可以对data中的数据在页面进行显示,但是某些时候,我们需要显示的内容可能是通过data中的数据进行一系列操作之后再进行显示的,这个时候我们就可以使用计算属性的方法,计算属性是在computed中,它也是Vue对象中的一个属性。

实现一个小案例:

计算小明需要购买课本的总价格

6e2aefeea960f142be7845b3a4ae68c0.png

结果:

c6965435a9490ba257ceea9d0e109edc.png

学会了吧,是不是很简单。其实每个计算属性都有一个getter和一个setter方法。

28d095955d17d9e92b4279866efe58b6.png

结果:

22c4d5328afecf5bbbe9a8dfc7db8b22.png

我们再来讨论最后一个问题,这个功能我们不仅可以使用计算属性的方法实现,同样的我们也可以通过定义方法来实现,那么两者的区别在哪里呢?我们为什么要使用计算属性的方法,而不使用定义方法来实现呢?

首先,我们在刚才的代码中,我们加上一个getTotalPrice方法,然后将计算属性的值和方法的值在页面显示多次

aa4452d3c8e1b33673b04e992c83c9de.png 781eb88ae4398b3e65c3911b94ad7c43.png

结果:

5776de9f2c97d3b5c62059bacf2ab26b.png

我们可以看出,计算属性会进行缓存,如果是多次使用计算属性的值,只会调用一次;而方法在每次调用的时候都会进行调用。

通过这个小实验,相信这两个用哪一个你也会学会选择了!

2.8监听属性

 

在Vue中,我们可以使用watch来监听属性的变化。

f5fac124cc8d65add6e31ab4166a1598.png

结果:

85b52673389048d911e4c96fe5ed3959.gif fd0fe3829e915859c65c15ef165ab2dc.png

结果:

819654d8cb6bce8f48e997f7acafcbb9.png

如果监听的对象是一个对象类型的话,那么使用普通的监听是没有效果的,所以有两种方式监听对象:

  1. 使用深度监听(监听后的结果值一样)

  2. 使用计算属性的方式获取对象中需要监听的属性,进行普通监听

Logo

前往低代码交流专区

更多推荐