欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

学习Vue框架中必掌握的重点知识

程序员文章站 2022-03-27 11:34:51
一、什么是vuevue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是,vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一...

一、什么是vue

vue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是,vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,vue 也完全能够为复杂的单页应用提供驱动。

二、与原生js的区别

我们可以通过一个小案例来演示

案例:把输入框中的信息实时显示在span标签中

原生js

vue

区别:其中明显的区别就是省去了对dom元素的操作

总结:

  1. 创建dom元素,使其成为vue实例的挂载点,vue实例中的所有数据这能在挂载点中使用
  2. 通过new vue来创建实例对象
  3. el属性指定当前vue实例的挂载点
  4. data中是模型数据,这些数据依赖于当前vue的实例,可以通过控制台输入app.msg来查看数据
  5. 可以通过插值表达式使用data中的数据

三、数据绑定

数据绑定就是将vue实例中的data属性中的数据显示在挂载点中

1、内容绑定

将data中的数据显示成内容

若想显示html标签只要是标签中用v-html即可

2、属性绑定

将data中的数据作为某个元素的属性值

使用v-bind即可,属性可以是内置的,也可以自定义的,简写方式:

3、表单标签的值

可以使用v-model指令在表单标签中使用双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

1、文本框和文本域

2、复选框

单选框

下拉框

传递参数

四、事件处理

可以用 v-on 指令监听 dom 事件,并在触发时运行一些 javascript 代码。

五、列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

从服务器中获取数据

六、条件渲染

1、v-if指令用于条件性的渲染一块内容

2、也可以使用v-else添加一个else块

3、在<template>元素上使用v-if条件渲染分组

当需要切换多个元素的时候可以把v-if添加到template内,因为<template>元素是一个不可见元素,渲染的结果将不包含<template>元素

4、v-if-else顾名思义就是充当v-if的else if块,可连续使用

5、v-show同样是根据条件展示元素

v-if不同的是v-show的元素会始终被渲染并保留在dom中。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

七、class与style绑定

我们可以使用v-bind来绑定类名或内联样式

绑定class,以动态的切换class,也可以与普通的class共存

渲染结果为:

绑定内敛级样式

语法v-bind:style

也可以直接绑定到一个样式对象中,这样会使模板更清晰

八、计算属性

当我们需要计算模板中的值时可以使用计算属性(computed)

九、侦听器

侦听器可以观察和响应vue实例上的数据变动

php代码

演示

演示

学习Vue框架中必掌握的重点知识

十、插槽

插槽内容

当组件渲染时,slot会被替换为<span>插槽内容</span>。插槽内可以包含任何模板代码

后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中:

我们可能希望这个 <button> 内绝大多数情况下都渲染文本“submit”。为了将“submit”作为后备内容,我们可以将它放在 <slot> 标签内:

现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时:

后备内容“submit”将会被渲染:

学习Vue框架中必掌握的重点知识

但是如果我们提供内容:

则这个提供的内容将会被渲染从而取代后备内容:

学习Vue框架中必掌握的重点知识

具名插槽

有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件:

对于这样的情况,<slot> 元素有一个特殊的 attribute:name。这个 attribute 可以用来定义额外的插槽:

一个不带 name<slot> 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot<template> 中的内容都会被视为默认插槽的内容。

然而,如果你希望更明确一些,仍然可以在一个 <template> 中包裹默认插槽的内容:

任何一种写法都会渲染出:

以上就是学习vue中必掌握的重点知识的详细内容,更多关于vue重点知识的资料请关注其它相关文章!

相关标签: vue 框架