快速入手Vue框架

发布时间:2024年01月07日

1.Vue的介绍

(1)Vue是一套构建用户界面的渐进式前端框架。

(2)只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合。

(3)通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。

(4)特点

? ? ? ? ? ? ? * 易用:在有HTMLCSSJavaScript的基础上,快速上手。

? ? ? ? ? ? ? * 灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

? ? ? ? ? ? ? * 性能:20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

2.Vue的快速入门

2.1.编写步骤:

(1)下载和引入vue.js文件。

(2)编写入门程序。

? ? ? ? ? ? ? ? 视图:负责页面渲染,主要由HTML+CSS构成。

? ? ? ? ? ? ? ? 脚本:负责业务数据模型(Model)以及数据的处理逻辑。

2.2.代码:

2.3小结:

(1)Vue是一套构建用户界面的渐进式前端框架。

(2)Vue的程序包含视图和脚本两个核心部分。

(3)脚本部分

? ? ? ? ?* Vue核心对象:每一个 Vue 程序都是从一个 Vue 核心对象开始的。

? ? ? ? ?* 选项列表

? ? ? ? ? ? ? ?* el:接收获取的元素。

? ? ? ? ? ? ? ?* data:保存数据。

? ? ? ? ? ? ? ?* methods:定义方法。

? ? ? ? ?* 视图部分

? ? ? ? ? ? ? ?* 数据绑定:{{变量名}}

3.Vue 常用指令

3.1.指令介绍

(1)指令:是带有 v- 前缀的特殊属性,不同指令具有不同含义。例如 v-html,v-if,v-for。

(2)使用指令时,通常编写在标签的属性上,值可以使用 JS 的表达式

(3)常用指令:

指令作用
v-html把文本解析为 HTML 代码
v-bind为 HTML 标签绑定属性值
v-if条件性的渲染某元素,判定为真时渲染,否则不渲染
v-else条件性的渲染
v-else-if条件性的渲染
v-show根据条件展示某元素,区别在于切换的是display属性的值
v-for列表渲染,遍历容器的元素或者对象的属性
v-on为 HTML 标签绑定事件
v-model在表单元素上创建双向数据绑定

3.2.代码形式介绍

(1)文本插值:v-html:把文本解析为 HTML 代码。

(2)绑定属性:v-bind:为 HTML 标签绑定属性值。

(3)条件渲染:

  • v-if:条件性的渲染某元素,判定为真时渲染,否则不渲染。
  • v-else:条件性的渲染。
  • v-else-if:条件性的渲染。
  • v-show:根据条件展示某元素,区别在于切换的是display属性的值。

(4)列表渲染:v-for:列表渲染,遍历容器的元素或者对象的属性。

(5)事件绑定:v-on:为 HTML 标签绑定事件。

(6)表单绑定:v-model:在表单元素上创建双向数据绑定。

双向数据绑定:

? ? ? ?当原始数据产生更改,页面数据也会随之改变。

? ? ? ?页面数据更改时,原始数据也随之而变。

MVVM模型(ModelViewViewModel):是MVC模式的改进版:

? ? ? 在前端页面中,JS对象表示Model,页面表示View,两者做到了最大限度的分离。 将Model和View关联起来的就是ViewModel,它是桥梁。ViewModel负责把Model的数据同步到View显示出来,还负责把View修改的数据同步回Model。

4.Vue 自定义组件

(1)概念:本质上,组件是带有一个名字且可复用的 Vue 实例。

(2)定义格式:

? ? ? ? ?Vue.component(组件名称, {

? ? ? ? ?props:组件的属性,

? ? ? ? ?data: 组件的数据函数,

? ? ? ? template: 组件解析的标签模板

? ? ? ? })

(3)代码形式介绍:

5.Vue的生命周期

(1)生命周期:一个vue实列,在beforeCreate(创建前)阶段,会进行事件及生命周期的初始化,在created(创建后)阶段,进行注入以及校验;在beforeMount(载入前)阶段,进行判断是否指定了“el”选项,否,则查看当前是否调用vm.$mount(el)函数,当前函数与“el”功能一致,都是用来去解析元素的,如果没有调用,则当前元素无法解析,导致程序无法继续执行;而当前有调用vm.$mount(el)函数或者指定了“el”选项,则接着进行判断是否指定template模板选项,是,会将template进行编译到render函数中,否将el外部的HTML作为template进行编译;在mounted(载入后)阶段,进行vm.$el的创建,并用其替换掉“el”,当前整个vue已经挂载完毕,如果在没有数据修改的状态下,紧接着是进入到销毁阶段,在有数据修改的状态下,会进入beforeUpdate(更新前)阶段,进行虚拟DOM重新渲染并应用更新;接着进入updated(更新后)阶段;当调用vm.$destroy()函数时,进入beforeDestroy(销毁前)阶段;进行绑定解除以及销毁子组件和事件监听器,最后销毁完毕destroyed(销毁后)阶段。

(2)生命周期演示效果

文章来源:https://blog.csdn.net/2401_82356378/article/details/135407849
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。