Vue基础了解

目录

1、什么是Vue.js

2、Vue的优点

3、Vue的安装

4、Vue程序 

5、Vue指令

代码演示: 

6、Vue实例的生命周期


1、什么是Vue.js

Vue (读音 /vjuː /,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,Vue.js 是前端的主流框架之一,和 Angular.js、React.js 一起,并成为前端三大主流框架!

2、Vue的优点

  1. 体积小:压缩后33K

  2. 高效率:基于虚拟dom,一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,最后在计算完毕才真正将DOM操作提交。

  3. 双向数据绑定,简化Dom操作:通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,把更多的精力投入到业务逻辑上

  4. 生态丰富,学习成本低

3、Vue的安装

直接用<script>引入

下载 Vue.js 并导入 <script src="js/v2.6.10/vue.min.js"></script> 文件

 

4、Vue程序 

  1. 导入开发版本的Vue.js
  2. 创建Vue实例对象,设置el属性和data属性
  3. 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script></head><body><!-- 创建一个标签{{message}} 插入一个值,不影响标签中的其他内容 --><!-- v-html="message”,v-text="message”会覆斋标签中其他内容{{message}},v-text="message”不能解析内容中html频签v-html="message”可以解析内容中html标签--><div id="app"><p>{{message}}  aaaaa</p><p v-html="message">bbbbb</p><p v-text="message">aaaa</p></div><script>// 创建一个vue对象var app=new Vue({el:'#app',data:{message: '<b>hello Vue!</b>'}})</script></body>
</html>

5、Vue指令

Vue指令作用
v-text

设置标签的文本内容。

默认写法会替换全部内容,使用差值表达式可以提高指定内容。

v-html

设置元素的innerHTML

内容中有html结构会被解析为标签

v-on

元素绑定事件

事件名不需要写on指令可以写成@

绑定的方法定义在methods属性中,可以传入自定义参数

v-model

便捷的设置和获取表单元素的值.

绑定的数据会和表单的数据值相关联。

绑定的数据<--->表单元素的值 ,双向的数据绑定。

v-show

根据真假切换元素的显示状态。

原理是修改元素的display,实现显示隐藏。

指令后面的内容,最终都会解释为布尔值。

值为true元素显示,值为false元素隐藏。

数据改变之后,对应元素的显示状态会同步更新

v-if

根据表达式的真假切换元素的显示状态。

本质通过操作dom元素来切换。

显示状态表达式的值为true,元素存在于dom中,为false,从dom中移出。

频繁的切换v-show,反之使用v-if,前者的切换消耗小。

v-bind

为元素绑定数据属性。

完整写法是v-bind:属性名(:属性名) 

v-for

根据数据生成列表结构。

数据经常和v-for结合。

使用语法是(item,index)in 数据,item和index可以结合其他指令一起使用。

数据长度的更新会同步到页面上是响应式的。

为循环绑定一个key值:key="值" 尽可能唯一。

代码演示: 

v-html  , v-text

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script></head><body><!-- 创建一个标签{{message}} 插入一个值,不影响标签中的其他内容 --><!-- v-html="message”,v-text="message”会覆斋标签中其他内容{{message}},v-text="message”不能解析内容中html频签v-html="message”可以解析内容中html标签--><div id="app"><p>{{message}}  aaaaa</p><p v-html="message">bbbbb</p><p v-text="message">aaaa</p></div><script>// 创建一个vue对象var app=new Vue({el:'#app',data:{message: '<b>hello Vue!</b>'}})</script></body>
</html>

 v-on/@

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script></head><!-- v-on为标签添加事件 --><body><div id="app"><input type="button" value="按钮1" v-on:click="test1(1)" /><input type="button" value="按钮2" @click="test2(2)"/></div><script>var app=new Vue({el:'#app',data:{messgae:'<b>Hello Vuel</b>',name:""},methods:{test1(a){alert(this.messgae+":"+a);},test2(a){alert(this.messgae+":"+a);}}})</script></body>
</html>

 v-model

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!--  --><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script></head><body><div id="app">{{ message }},{{name}}<input v-model="name"/></div><script>var app=new Vue({el:'#app',data:{message: 'hello vuel',name: "jim"}})</script></body>
</html>

 v-show

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script><!-- v-show根据真假切换元素的显示状态 通过修改元素的display,实现显示隐藏 ,效率高--></head><body><div id="app"><img v-show="isShow" src="../img/1.jpg" /><img v-show="age>16" src="../img/2.jpg" /><div>sss</div><input type="button" @click="oper()" value="操作" /></div></body><script>var app = new Vue({el: '#app',data: {isShow: true,age: 11},methods: {oper() {this.isShow = !this.isShow;this.age = 19;}}})</script>
</html>

 v-if

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script><!-- v-if根据真假切换元素的显示状态(与v-show不同,他是直接彻底删除,显示时重新创建)效率低v-if 可以 v-else  联合使用  两个必须紧挨着--></head><body><div id="app"><img v-if="isShow" src="../img/4.jpg"><img v-if="age>18" src="../img/5.jpg"/><img v-else src="../img/3.jpg"/><input type="button" @click="oper()" value="操作"/></div></body><script>var app=new Vue({el:'#app',data:{isShow:true,age:10},methods:{oper(){this.isShow=!this.isShowthis.age=19;}}})</script>
</html>

 v-bind

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script><!-- v-bind是为元素绑定属性v-bind:属性名="变量名"  简写为 :属性名一旦为属性添加v-bind值 就是一个在data中定义的变量了--><style>.active {color: rebeccapurple;background-color: aqua;}</style></head><body><!-- :title="array[index]" 鼠标停留时的提示信息--><div id='app'><img v-bind:src="imgurl[index]" :title="array[index]" /><!-- 我们可以传给 v-bind:class 一个对象,以动态地切换 class: --><div v-bind:class="{ active: isActive }">wwww</div><input type="button" @click="oper()" value="操作" /></div></body><script>var app = new Vue({el: '#app',data: {imgurl: ["../img/1.jpg", "../img/2.jpg", "../img/3.jpg"],array: ["苹果手机", "华为手机"],index: 0,isActive:true},methods: {oper() {this.index++;this.isActive=!this.isActive;}}})</script>
</html>

 v-for

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="v2.6.10/vue.min.js"></script></head><body><div id="app"><ul><li v-for="user in users">姓名:{{user.name}}年龄:{{user.age}}性别:{{user.gender}}</li></ul>{{student.name}}{{student.age}}{{student.gender}}</div></body><script>var app = new Vue({el: '#app',data: { //数组  模拟从后端响应回来的数据 数组 集合users: [{name: "jim",age: 18,gender: "男"},{name: "liu",age: 19,gender: "女"},{name: "mei",age: 15,gender: "男"},{name: "wang",age: 18,gender: "女"}],student: {name: "bei",age: 10,gender: "男"}},methods:{//自定义函数},//vue对象生命周期 钩子函数,在生命周期的每个阶段为我们提供了一个函数,可以自动执行beforeCreate(){console.log("beforeCreate")},created(){console.log("created")},beforeMount(){console.log("beforeMount")},mounted(){//vue 对象创建成功 且 与标签绑定后执行,这是我们常用的,在此自动的与后端交互console.log("created")}})</script>
</html>

6、Vue实例的生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程。

例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。

同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

钩子函数,在生命周期的每个阶段为我们提供了一个函数,可以自动执行

beforeCreate: function () {
console.log('beforeCreatea ’);
},
created: function () {
console.log('createda ' );
},
beforeMount:function(){
console.log('beforeMounta’);
},
mounted:function(){     //常用
console.log('mounteda’);
}

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

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

相关文章

Python28 十大机器学习算法之线性回归和逻辑回归

1.三类广义上的机器学习算法 监督学习。工作原理&#xff1a;该算法由一个目标/结果变量&#xff08;或因变量&#xff09;组成&#xff0c;该变量将从一组给定的预测变量&#xff08;自变量&#xff09;进行预测。使用这组变量&#xff0c;我们生成了一个将输入数据映射到所…

常见的工业信号指示灯及按钮开关代表什么?如何辨认?

信号指示灯&#xff0c;是用灯光监视电路和电气设备工作或位置状态的器件。也是自动化设备中最直观&#xff0c;唯一的监视元器件。主要的作用是通常用于反映电路的工作状态&#xff08;有电或无电&#xff09;、电气设备的工作状态&#xff08;运行、停运或试验&#xff09;和…

小程序web-view无法打开该页面的解决方法

问题&#xff1a;开发者工具可以正常打开&#xff0c;正式上线版小程序使用 web-view 组件测试时提示&#xff1a;“无法打开该页面&#xff0c;不支持打开 https://xxxxxx&#xff0c;请在“小程序右上角更多->反馈与投诉”中和开发者反馈。” 解决方法&#xff1a;需要配…

市场拓展招聘:完整指南

扩大招聘业务会给你带来很多挑战&#xff0c;更不用说你已经在处理的问题了。助教专业人士每周花近13个小时为一个角色寻找候选人。此外&#xff0c;客户的需求也在不断变化&#xff0c;招聘机构之间的竞争也在加剧。毫无疑问&#xff0c;对增长有战略的方法会有很大的帮助。一…

jeecg导入excel 含图片(嵌入式,浮动式)

jeecgboot的excel导入 含图片&#xff08;嵌入式&#xff0c;浮动式&#xff09; 一、啰嗦二、准备三、 代码1、代码&#xff08;修改覆写的ExcelImportServer&#xff09;2、代码&#xff08;修改覆写的PoiPublicUtil&#xff09;3、代码&#xff08;新增类SAXParserHandler&a…

【数学建模】——【python库】——【Pandas学习】

专栏&#xff1a;数学建模学习笔记 pycharm专业版免费激活教程见资源&#xff0c;私信我给你发 python相关库的安装&#xff1a;pandas,numpy,matplotlib&#xff0c;statsmodels 总篇&#xff1a;【数学建模】—【新手小白到国奖选手】—【学习路线】 第一卷&#xff1a;【数学…

总结一下Linux、Windows、Ubuntu、Debian、CentOS等到底是啥?及它们的区别是什么

小朋友你总是有很多问好 你是否跟我一样&#xff0c;不是计算机科班出身&#xff0c;很多东西都是拿着在用&#xff0c;并不知道为什么&#xff0c;或者对于它们的概念也是稀里糊涂的&#xff0c;比如今天说的这个。先简单描述下&#xff0c;我先前的疑问&#xff1a; Linux是…

layui+jsp项目中实现table单元格嵌入下拉选择框功能,下拉选择框可手动输入内容或选择默认值,修改后数据正常回显。

需求 table列表中的数据实现下拉框修改数据&#xff0c;当默认的下拉框不符合要求时&#xff0c;可手动输入内容保存。内容修改后表格显示修改后的值同时表格不刷新。 实现 layui框架下拉框组件只能选择存在的数据&#xff0c;不支持将输入的内容显示在input中的功能&#x…

【C++进阶9】异常

一、C语言传统的处理错误的方式 终止程序&#xff0c;如assert 如发生内存错误&#xff0c;除0错误时就会终止程序返回错误码 需要程序员自己去查找对应的错误 z如系统的很多库的接口函数都是通 过把错误码放到errno中&#xff0c;表示错误 二、C异常概念 异常&#xff1a;函…

传神论文中心|第14期人工智能领域论文推荐

在人工智能领域的快速发展中&#xff0c;我们不断看到令人振奋的技术进步和创新。近期&#xff0c;开放传神&#xff08;OpenCSG&#xff09;社区发现了一些值得关注的成就。传神社区本周也为对AI和大模型感兴趣的读者们提供了一些值得一读的研究工作的简要概述以及它们各自的论…

steam搬砖

​   CS2/Steam游戏拆砖项目如何赚钱&#xff0c;利润在哪里&#xff1f;    1、利润主要来自于汇差。例如&#xff0c;今天美元的汇率是1美元7.3人民币&#xff0c;100美元730人民币。但事实上&#xff0c;通过某些特定渠道&#xff08;如TB&#xff09;充值100美元仅需55…

Meet AI4S 直播预告丨房价分析新思路:神经网络直击复杂地理环境中的空间异质性

近年来&#xff0c;房地产市场起起落落&#xff0c;房价已经成为了扰动居民幸福感的重要影响因素。大多数家庭都需要面对「买不买房、何时买房、在哪儿买房、买什么房」的艰难抉择&#xff0c;每一个问题的答案都在某种程度上与房价的波动息息相关。 近年来&#xff0c;我国各…

RocketMq源码解析九:刷盘机制及过期文件删除

一、刷盘机制 刷盘策略在不同时间进行刷写磁盘。RocketMQ的存储是基于JDK NIO的内存映射机制(MappedByteBuffer)的,消息存储首先将消息追加到内存,再根据配置的刷写磁盘 同步刷盘表示消息追加到内存后,立即将数据刷写到文件系统中。代码的调用链如下: submi…

【新版本来袭】ONLYOFFICE桌面编辑器8.1 —— 重塑办公效率与体验

文章目录 一、功能完善的PDF编辑器&#xff1a;重塑文档处理体验编辑文本插入和修改各种对象&#xff0c;如表格、形状、文本框、图像、艺术字、超链接、方程式等添加、旋转和删除页面添加文本注释和标注 二、幻灯片版式设计&#xff1a;创意展示的无限舞台三、改进从右至左显示…

OCR训练和C#部署英文字符训练

PaddleOCR是一个基于飞桨开发的OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;系统。其技术体系包括文字检测、文字识别、文本方向检测和图像处理等模块。以下是其优点&#xff1a; 高精度&#xff1a;PaddleOCR采用深度学习算法进行训练…

Web渗透:php反序列化漏洞

反序列化漏洞&#xff08;Deserialization Vulnerability&#xff09;是一种在应用程序处理数据的过程中&#xff0c;因不安全的反序列化操作引发的安全漏洞&#xff1b;反序列化是指将序列化的数据&#xff08;通常是字节流或字符串&#xff09;转换回对象的过程&#xff0c;如…

【MySQL备份】lvm-snapshot篇

目录 1.简介 1.1.如何工作 1.2.应用场景 1.3.注意事项 1.4.优缺点 2.为什么选择lvm快照备份&#xff1f; 3.创建LVM 3.1.操作流程 3.2.正常安装MySQL后进行备份 3.3.MySQL运行一段时间后进行备份 3.3.1.准备lvm及文件系统//先添加一块磁盘 3.3.2.将数据迁移到LVM …

MySQL学习(5):SQL语句之数据查询语言:DQL

1.DQL语法 select 字段列表 from 表名列表 #DQL是可以进行多表查询的 where 条件列表 group by 分组字段列表 having 分组后条件列表 order by 排序字段列表 limit 分页参数 2.基本查询&#xff08;select&#xff09; 2.1查询多字段 select 字段1,字段2,字段3,......fro…

基于Volov7的安全帽检测系统

1 项目介绍 1.1 摘要 随着工业化和城市化的迅猛推进&#xff0c;工作场所的安全管理愈发受到重视。安全帽作为保护工人头部安全的关键装备&#xff0c;其实时监测和检测的重要性不言而喻。本文提出并深入研究了基于YOLOv7算法的安全帽佩戴检测技术&#xff0c;该技术旨在实现…

Day.js

Day.js 是什么&#xff1f; Day.js是一个极简的JavaScript库&#xff0c;可以为现代浏览器解析、验证、操作和显示日期和时间。 Day.js中文网 为什么要使用Day.js &#xff1f; 因为Day.js文件只有2KB左右&#xff0c;下载、解析和执行的JavaScript更少&#xff0c;为代码留下更…