Vue前端框架入门

文章目录

Vue

经过一小段时间学习

我认为vue就是在原js上进行的一个加强

简化JS中的DOM操作

vue是分两个层的

一个叫做视图层(View),你可以理解为展现出来的前端页面

一个叫数据模型层(Model),包含数据和一些数据的处理方法
MVVM就是实现这两层之间的数据的双向绑定

快速入门

{{}}是我们的插值表达式,用来展现我们的数据,里面是可以进行算数运算的

简而言之

对应el相当于一个id选择器,然后我们里面定义data是我们的数据模型
v-model是为表单元素进行数据绑定的指令

这是我们的程序

这里我们编写的视图,我们把message数据模型展示

我们可以通过input修改

这样的话,后面的数据也是会进行对应的修改,相当于你更改了message数据模型

展示数据是和数据模型层绑定的,所以会一起变

Vue指令

vue中带v-xxx就是vue中的指令


使用这些指令前提:JS标签中创建Vue对象,再定义数据层模型

v-bind为标签指定href,css样式等等,也是动态的绑定vue的数据层

而v-model之前也演示过,主要是进行一个数据双向绑定的操作

这样写代码

这个跳转链接会根据你输入栏里的网址

刚刚跳转网址(因为都是一个数据)

v-on绑定事件指令

绑定一般都是method而不是data了

然后点击就会执行对应的函数


v-if、v-else-if、v-else以及v-show

两种都是根据条件进行渲染
v-if三件套是符合条件才渲染

而v-show是全都渲染,然后判断条件,将不符合的diaplay属性(css样式修改)更改为none(即不显示)

对应使用方法

v-for就是适用于列表元素的遍历的一个指令

复制代码
<v-for="(内部元素名,...) in 遍历数组(数据结构)名 ">
元素名自己定义随便写
数据结构对应技术我们data里面的 数组

生命周期

概述

流程图

在不同生命周期,会执行对应的方法,我们可以定义对应的方法

来起到一个通知的作用

相关推荐
其实防守也摸鱼16 分钟前
网络安全法竞赛知识总结与题库
前端·网络·人工智能·安全·web安全·重构·nc
山雀~22 分钟前
浏览器兼容方案(Web 项目的三层实践)
前端
Jack N29 分钟前
【Strapi 系列之五】前端怎么接?Next.js + Tailwind 拉取 Strapi 数据(含代码)
开发语言·前端·javascript·strapi
__sjfzllv___33 分钟前
在职前端Leader学习/转行 AI Agent -DAY85
前端
来一首_We_go40 分钟前
React Flow Pro 高级交互实现
前端·react.js
weedsfly1 小时前
React 不可变数据:为什么页面“明明数据变了却不更新
前端·javascript·react.js
行者全栈架构师1 小时前
【共创稿事节】双引擎智能相册:HarmonyOS 7(API 26)文搜图 × 图像超分端侧 AI 联动实战
前端·算法·架构
chromoany1 小时前
agent 写的 README 为什么装不上:一条“没有出处就删掉”的规则
前端
deli0071 小时前
商品条形码最后一位怎么来的?Code128 校验位实测
前端
小蒜学长1 小时前
基于SpingBoot+Vue的定向越野赛事管理系统的设计与开发(代码+数据库+LW)
java·前端·spring boot·后端·前后端分离·定向越野赛事