Vue前端+快速入门【详解】

目录

1.Vue概述

2. 快速入门

3. Vue指令

4.表格信息案例    

5. 生命周期


1.Vue概述

        1.MVVM思想

        原始HTML+CSS+JavaScript开发存在的问题:操作麻烦,耦合性强

        为了实现html标签与数据的解耦,前端开发中提供了MVVM思想:即Model-View-ViewModel:

  • Model: 数据模型,指要展示到页面上的数据。在web开发中通常从服务端获取到数据,再把这些数据展示出来

  • View: 视图,用于展示数据的各种html标签

  • ViewModel: 视图模型控制中心,负责把Model数据显示到View里,也负责从View里收集数据到Model里。Vue框架就承担了这个角色

        2.Vue框架简介

                Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架,它实现了MVVM思想         

                Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

                框架即是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效。

2. 快速入门

        1.开发步骤:

                1.编写html页面,引入vue框架的js类库

                2.在html页面里,使用Vue 把"hello vue"到页面上

        

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title></head>
<body><div id="app"><!-- 使用插值表达式,把数据区域里message的数据插入进来 -->{{message}}</div>
</body>
<script src="js/vue.js"></script>    
<script>//定义Vue对象new Vue({//vue接管id为app的标签区域el: "#app", //数据区域,就是MVVM里的Modeldata:{message: "Hello Vue"},//方法区域,Vue里用到的所有方法都要写到这里,否则调用不到methods:{}})
</script>
</html>

3. Vue指令

        指令:HTML 标签上带有 v- 前缀的特殊属性,不同指令具有不同功能作用。

        

        1.v-bind和v-model: 

    

v-bind使用示例:

        

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-bind</title>
</head>
<body><div id="app"><!-- v-bind:用于把数据区域里的数据,绑定到 html标签的属性上语法:完整写法:  v-bind:属性名="数据名"简单写法:        :属性名="数据名"单向绑定:数据区域 ===> 页面视图(标签的属性上)--><a v-bind:href="siteUrl">{{siteTitle}}</a> <br><a :href="siteUrl">{{siteTitle}}</a></div><script src="./js/vue.js"></script><script>new Vue({el: "#app",data: {siteUrl: "http://www.baidu.com",siteTitle: "百度"},methods:{}});</script>
</body>
</html>

v-model使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-model</title>
</head>
<body><div id="app"><!-- v-model:用于实现 数据区域 和 页面上表单项的 双向绑定。注意:仅适用于表单项,input, select, textarea语法: v-model="数据名称"效果:数据区域 ==> 页面表单项上: 数据区域里的数据变化,页面表单项上会随之变化页面表单项上 ==> 数据区域: 在页面上输入了表单项的数据,数据区域也会随之变化-->帐号:<input type="text" v-model="username"> <br>性别:<input type="radio" name="gender" value="male" v-model="sex">男<input type="radio" name="gender" value="female" v-model="sex">女  <br>数据区域里值:{{username}} , {{sex}}</div><script src="./js/vue.js"></script><script>new Vue({el: "#app",data: {username: "tom",sex: "male"},methods:{}});</script>
</body>
</html>

        2.  v-on

        v-on: 用来给html标签绑定事件。

                完整写法:v-on:事件名="函数名(实参列表)"

                简写形式:@事件名="函数名(实参列表)"

        注意事项:

                v-on语法给标签的事件绑定的函数,必须在Vue的方法区域中

                v-on语法绑定事件时,事件名不写on。例如:onclick=""在vue里写成v-on:click=""

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-on</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><input type="button" value="点我一下" v-on:click="handle()"><input type="button" value="点我一下" @click="handle()"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {handle: function(){alert("你点我了一下...");}}})
</script>
</html>

        3.v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-if与v-show</title><script src="js/vue.js"></script>
</head>
<body><div id="app">年龄<input type="text" v-model="age">经判定,为:<span v-if="age <= 35">年轻人(35及以下)</span><span v-else-if="age > 35 && age < 60">中年人(35-60)</span><span v-else>老年人(60及以上)</span><br><br>年龄<input type="text" v-model="age">经判定,为:<span v-show="age <= 35">年轻人(35及以下)</span><span v-show="age > 35 && age < 60">中年人(35-60)</span><span v-show="age >= 60">老年人(60及以上)</span></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{age: 20},methods: {}})
</script>
</html>

             4.v-for

                v-for: 从名字我们就能看出,这个指令是用来遍历的。注意:需要循环哪个标签,v-for 指令就写在哪个标签上。

                完整语法:

                <标签 v-for="(变量名,索引变量) in 集合模型数据">
                    <!--索引变量是从0开始,所以要表示序号的话,需要手动的加1-->
                   {{索引变量 + 1}} {{变量名}}
                </标签>

                简写形式:

                <标签 v-for="变量名 in 集合模型数据">
                    {{变量名}}
                </标签>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>
</html>

   4.表格信息案例    

        

步骤:

  • 使用v-for的带索引方式添加到表格的<tr>标签上

  • 使用{{}}插值表达式展示内容到单元格

  • 使用索引+1来作为编号

  • 使用v-if来判断,改变性别和等级这2列的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-案例</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >= 60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>
</html>

5. 生命周期

        vue的生命周期:指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法

mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

编写mounted声明周期的钩子函数,与methods同级

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>

     

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/717802.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql-主从架构篇(一主多从,半同步案例搭建)

主从架构 主从架构有什么用&#xff1f; 通过搭建MySQL主从集群&#xff0c;可以缓解MySQL的数据存储以及访问的压力。 数据安全&#xff08;主备&#xff09;&#xff1a;给主服务增加一个数据备份。基于这个目的&#xff0c;可以搭建主从架构&#xff0c;或者也可以基于主…

redis进阶(一)

文章目录 前言一、Redis中的对象的结构体如下&#xff1a;二、压缩链表三、跳跃表 前言 Redis是一种key/value型数据库&#xff0c;其中&#xff0c;每个key和value都是使用对象表示的。 一、Redis中的对象的结构体如下&#xff1a; /** Redis 对象*/ typedef struct redisO…

c# .net8 香橙派orangepi + hc-04蓝牙 实例

这些使用c# .net8开发&#xff0c;硬件 香橙派 orangepi 3lts和 hc-04蓝牙 使用场景&#xff1a;可以通过这个功能&#xff0c;手机连接orangepi进行wifi等参数配置 硬件&#xff1a; 1、带USB口的linux开发板orangepi 2、USB 转TTL 中转接蓝牙&#xff08;HC-04) 某宝上买…

Flink:Temporal Table Function(时态表函数)和 Temporal Join

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

设计模式(十五)状态模式

请直接看原文:设计模式系列 ------------------------------------------------------------------------------------------------------------------------------- 前言 建议在阅读本文前先阅读设计模式&#xff08;十一&#xff09;策略模式这篇文章&#xff0c;虽说状态…

【MATLAB】MVMD_ MFE_SVM_LSTM 神经网络时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 MVMD_MFE_SVM_LSTM神经网络时序预测算法结合了多变量多尺度分解&#xff08;MVMD&#xff09;、多尺度特征提取&#xff08;MFE&#xff09;、支持向量机&#xff08;SVM&#xff09;和长…

小米消息队列的选型与实践

之前写了一篇关于消息队列的文章&#xff1a;《消息队列介绍与对比》&#xff0c;本文主要介绍消息队列在实际工作中的使用情况&#xff08;截止到2023年&#xff0c;因为我2023年离职了&#xff0c;后续的情况不了解了&#xff0c;哈哈&#xff09;。 市面上的多种消息队列都有…

node问题: command not found: nodemon

如何安装并使用 nodemon npm i -g nodemon 问题与解决方案&#xff1a; 问题&#xff1a;zsh: command not found: nodemon 解决方案&#xff1a; 在你的 package.json 中加入&#xff1a; "scripts": {"auto": "npx nodemon server.js" }…

单例模式及应用场景

如果希望自己的代码更优雅、可维护性更高以及更简洁&#xff0c;往往离不开设计模式这一解决方案。 在JS设计模式中&#xff0c;最核心的思想&#xff1a;封装变化&#xff08;将变与不变分离&#xff0c;确保变化的部分灵活&#xff0c;不变的部分稳定&#xff09;。 那么来…

[嵌入式系统-36]:龙芯1B 开发学习套件 -5- PMON常见命令

目录 0. 开机时按c键进入pmon模式 &#xff08;自启动模式时&#xff09; 1、帮助命令 h 2、显示设备信息 devls 3.重启&#xff1a;reboot 4、设置环境变量 set/unset 5.查询环境变量&#xff1a;env 6.网络设置相关命令&#xff1a; ①设置IP&#xff1a;ifconfig&am…

Linux 基础IO(1)内存文件

文章目录 铺垫文件的系统调用接口文件描述符缓冲区 铺垫 文件文件内容 文件属性访问文件之前&#xff0c;都要先打开文件&#xff0c;而要访问&#xff0c;修改&#xff0c;编辑文件&#xff0c;文件就必须加载到内存中程序运行起来变成进程&#xff0c;被CPU调度&#xff0c;…

详解Win 7重置电脑操作步骤

文章目录 介绍Win 7 重置系统的方法&#xff1a;1.按下键盘上的Windows键和R键&#xff0c;打开运行窗口&#xff0c;输入sysprep 点击回车确定。2.之后就会出现如下界面&#xff0c;在这个新打开的窗口中双击 sysprep 程序3.选择【进入系统全新体验&#xff08;00BE) 】&#…

基于SpringBoot的在线拍卖系统(附项目源码+论文)

摘要 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单管理、留言板管理、系统管理&#xff0c;用户&#xff1b;首页、个人中心、历史竞拍管理、竞拍订单管理、留言板管理&#xff0…

STM32学习和实践笔记(1): 装好了的keil μVision 5

2019年3月在淘宝上买了这块STM32的开发板&#xff0c;学了一段时间后就丢下了&#xff0c;今天重新捡起来&#xff0c;决定好好学习、天天向上。 对照教程&#xff0c;今天先把keil5装上了。 装的过程有以下几点值得记录下&#xff1a; 1&#xff09;用注册机时&#xff0c;…

【应用多元统计分析】--多元数据的直观表示(R语言作图)

例1.2 为了研究全国31个省、市、自治区2018年城镇居民生活消费的分布规律&#xff0c;根据调查资料做区域消费类型划分。 指标&#xff1a; 食品x1&#xff1a;人均食品支出(元/人) 衣着x2&#xff1a;人均衣着商品支出(元/人) 居住x3&#xff1a;人均居住支出(元/人) 生活x4…

欧拉回路(Eulerian Path)

1.定义 如果图 G G G(有向图或者无向图)中所有边一次仅且一次行遍所有顶点的通路称作欧拉通路。 如果图 G G G中所有边一次仅且一次行遍所有顶点的回路称作欧拉回路。 具有欧拉回路的图成为欧拉图(简称 E E E图)。具有欧拉通路但不具有欧拉回路的图成为半欧拉图。 顶点可以经…

SpringMVC--03--前端传数组给后台

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 案例1乘客个人信息方法1&#xff1a;表单提交&#xff0c;以字段数组接收方法2&#xff1a;表单提交&#xff0c;以BeanListModel接收方法3&#xff1a;将Json对象序…

leetcode移除元素

注意&#xff0c;在本题中&#xff0c;是对原数组进行操作&#xff0c;需要原地删除指定元素&#xff0c;所以我们可以采用快慢指针来操作。 顾名思义&#xff0c;快慢指针是有两个指针&#xff0c;一直快指针&#xff0c;一个慢指针。在本题中&#xff0c;快慢指针起点都是0&a…

Matlab 机器人工具箱 运动学

文章目录 R.fkine()R.ikine()R.ikine6s()R.ikuncR.jacob0、R.jacobn、R.jacob_dotjtrajctraj参考链接 官网&#xff1a;Robotics Toolbox - Peter Corke R.fkine() 正运动学&#xff0c;根据关节坐标求末端执行器位姿 mdl_puma560; % 加载puma560模型 qz % 零角度 qr …

继承(使用及深入、super、重写/复写)--学习JavaEE的day14

day14 一、继承 概念 Java中的继承是一个对象获取父对象的所有属性和行为的机制 理解&#xff1a;继承是指一个类(子类)可以继承另一个类(父类)的属性和方法 关键字extends 优点&#xff1a;减少代码的冗余 缺点&#xff1a;继承会增加类与类之间的关系&#xff0c;会增加代码…