JavaWeb2-Vue

Vue

前端框架,免除原生JS中的DOM操作简化书写
(以前学过又忘了,现在才知道原来vue是前端的)
基于MVVM思想(model-view -viewModel)实现数据双向绑定
model是数据模型
view负责数据展示 即DOM
中间这个负责二者监听和绑定
在这里插入图片描述
详细使用讲解 VueJS简明教程(一)之基本使用方法

新建Vue对象

1.引用vue.js
在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

2.新建Vue实例
html:

<div id="firstVue">{{messages}}</div>

JS:

<script type="text/javascript">var myVue = new Vue({// myVue 就是Vue创建的一个对象,可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象, 这个对象就是myVueel:"#firstVue",//el是Vue的保留字,用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器,告诉Vue要实例化ID=“firstVue”的这个标签。data:{// data参数用来绑定VUE实例的数据变量,每个不同变量之间用逗号分隔,上面我们绑定了自定义变量my_data,并赋初值'test'message:"test",}})
</script>

数据绑定

v-bind:是用来绑定数据的,v-on:则是用来绑定事件的,比如我要绑定一个的 click事件就这么写

<div id="firstVue" v-bind:hidden="my_hidden">{{my_data}}</div>
<a v-bind:href="url">链接</a>
var myVue = new Vue({el:'#firstVue',data:{my_data: "test",my_hidden: "hidden",url:"www.baidu.com",}
})

v-bind:不仅可以绑定hidden属性,disabled属性,style属性, color属性,凡是标签有的属性,都可以通过这个方法进行绑定
v-bind由于经常会用到,所以也可以缩写成冒号:hidden="my_hidden"

事件绑定

v-on:是用来绑定事件的

<div>{{my_data}}</div>
<button v-on:click="clickButton()">Click Me</button>
var myVue = new Vue({el:'#firstVue',data:{my_data: "test",my_hidden: "hidden"},methods:{clickButton:function(){this.my_data = "Wow! I'm changed!"//引用的是这个vue实例里的局部变量,用this //如果不加this,系统会默认你想引用的是一个全局变量}}
})

v-on:语法同样有一个缩写@,比如v-on:click="clickButton"就等价于@click="clickButton"

表单控件绑定

从DOM中实时获取用户输入的数据赋值给vue实例
v-model 通过两步实现了数据反向传递:
第一步,绑定了DOM标签的input事件(比如叫tapInput())
第二步,当用户进行输入时候,触发tapInput()函数,tapInput()函数内部读取此DOM标签的Value值,赋值给vue实例
通过以上两步,v-model语法糖实现了vue数据的反向传输

<!DOCTYPE html>
<html>
<head><title>Vue Demo</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body><div id="firstVue"><input type="text" v-model="my_data" /><button v-on:click="clickButton">Click Me</button><p>{{my_data}}</p></div>
</body>
<script type="text/javascript">var myVue = new Vue({el:'#firstVue',data:{my_data: "test",my_hidden: "hidden"},methods:{clickButton:function(){//在<input>输入框输入值的时候,v-model会实时将最新值(value)赋值给vue实例的my_data变量,而my_data变量又将实时展现在<p>标签中this.my_data = "Wow! I'm changed!"}}})
</script>
</html>

v-model.number后面的这个.number的意思是说在返回my_step值的时候自动转换成integer类型,因为默认是string类型,所以要多这么一句。

组件

组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue的编译器为它添加特殊功能。
在有些情况下,组件也可以表现为用is特性进行了扩展的原生HTML元素。
所有的Vue组件同时也都是Vue的实例,所以可以接受相同的选项对象(除了一些根级特有的选项)并提供相同的生命周期钩子。

 <div id="firstVue"><button-demo>Click</button-demo>
</div>
Vue.component('button-demo',{template:'<button>Hello here!</button>'
})

通过Vue注册一个叫做’button-demo’的组件,这个自定义组件是由Hello here!组成的。
即注册了’button-demo’以后,就等价于Hello here!

VUE组件对相当于一个VUE实例,在组件内可以定义方法,数据,甚至可以引用其他组件

//定义button-counter组件
Vue.component('button-counter',{//定义数据data:function(){//一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝return {count: 0}},//定义方法methods:{clickAdd: function(){this.count++}},template:'<button @click="clickAdd">You clicked me {{count}} times</button>'})

全局、局部组件

上面我们注册的是全局组件,也就是在整个VUE根实例中注册的,也可以理解为调用了VUE的静态方法注册的,这样注册的组件是可以在任何VUE实例中使用的。
局部组件注册就允许用户把自定义组件的作用域限制在父级VUE实例中:

<div id="app"><component-a></component-a>
</div>
//component-a是一个全局组件
Vue.component('component-a',{template:'<div><p>这里是全局组件</p><component-b></component-b></div>',//使用components在父组件中注册局部组件components:{'component-b': {template:'<button>这是一个局部组件</button>'},}
})
new Vue({el: "#app"
})

component-a组件里使用了关键字components注册了一个局部组件component-b并且嵌入了component-a的模板语法中。

v-if/v-show

v-if和v-show的区别:
v-if是删除dom元素,直接不渲染,可以搭配v-else 和v-else-if使用
v-show是控制CSS隐藏元素,通过display:none

    <p v-if="age < 18">青少年</p><p v-else-if="age < 60">青年人</p><p v-else>老人</p>

v-for

1、遍历数组 v-for=“(item,index) in arr”
2、遍历对象 v-for=“(value,key,index) in obj”
3、遍历数字 v-for=“num in 10”
4、key关键字 提高重排顺序
只能是数字或字符串,必须是唯一的
v-for=(item,index) in arr:key=‘item.id’

<div v-for="(index,item) in addrs">{{index}}:{{item}}</div>
<script>let vm = new Vue({el:"#app",data:{addrs:['aa','bb'],obj:{name:'小花',age:18,sex:'女',}},methods:{},})
</script>

生命周期

详细见https://blog.csdn.net/m0_58709145/article/details/127393144
指一个对象从创建到销毁的过程。
每触发一个生命周期时间,会自动执行一个生命周期方法(钩子)。
在这里插入图片描述
4个阶段,8个生命周期
1.初始化阶段:
beforeCreate:实例刚创建完成,此时还没有data和methods属性
created:vue实例data和method属性已经初始化完成,此时还没有编译模板,从这个地方可以请求接口,获取数据等信息

2.实例挂载阶段
beforeMount:挂载前 模板编译完成,此时e l 还 没 有 挂 载 , el还没有挂载,data目前可见
mounted:挂载完成后 模板编译完成,$el挂载完成

3.数据更新阶段
这里选择性执行,获取数据更新完成执行updated,数据更新时执行beforeUpdate
beforeUpdate: 数据更新时执行,data数据此时已经是最新的数据,UI界面还是旧的
updated:数据更新完成后,界面和data里的数据此时都是最新的,完成的界面的更新渲染render

4.销毁阶段
销毁前: beforeDestroy: 组件准备销毁,此时data和methods方法都能用,没有完全销毁
销毁后:destroyed: 组件已经被销毁,此组件在浏览器中对应的DOM接口已被完全移除!
在这里插入图片描述

mounted[只用到这个]

发送请求到服务端,来获取服务端的数据

在这里插入代码片
new Vue({el:#app,data:{},method:{},mounted():{console.log("Vue挂载完成,发送请求获取数据");}.
})

流程【还没理解】

创建一个Vue实例,也就是 new Vue()的时候,首先函数会执行init函数,在init函数中,会执行beforeCreated钩子函数。beforeCreated,在此之前会先执行mergeOptions函数,得到$options选项,并且把这个设置成VUE实例的一个属性。所以在这个阶段,init已经执行,所以千万不要去修改data的数据,否则可能会出现数据无法监听的状况。在这个阶段,数据没有监听,也没有绑定到VUE实例上面,也没有挂载对象
当beforecreated执行完之后,当injections(注射)和reactivity(反射)的时候会执行created。在这个阶段,数据已经绑定到实例上面,但是还没有挂载对象。

当created之后,它会去判断instance(实例)里面是否含有 ‘el’ 这个option选项,如果没有,它会调用vm. m o u n t ( e l ) 这个方法,然后执行下一步 , 意味着它会停止编译,生命周期结束,如果有的话,直接执行下一步。之后会判断是否含有 t e m p l a t e 这个属性,如果有的话,它会把 t e m p l a t e 解析成一个 r e n d e r f u n c t i o n ,这是一个 t e m p l a t e 编译的过程,结果是解析成了一个 r e n d e r 函数,如果没有 t e m p l a t e 选项它会把外部的 H T M L 作为模板编译( t e m p l a t e 模板优先级高于 o u t e r H T M L )。 e n d e r 函数选项 > t e m p l a t e 选项 > o u t e r H T M L . 。 b e f o r e M o u n t e d 只会在有了 r e n d e r f u n c t i o n 之后才会执行,当执行完 r e n d e r f u n c t i o n 之后才会调用 M o u n t e d 。可以看到此时是给 v u e 实例对象添加 mount(el) 这个方法,然后执行下一步,意味着它会停止编译,生命周期结束,如果有的话,直接执行下一步。之后会判断是否含有template这个属性,如果有的话,它会把template解析成一个render function,这是一个template 编译的过程,结果是解析成了一个render函数,如果没有template选项它会把外部的HTML作为模板编译(template模板优先级高于outer HTML)。ender函数选项 > template选项 > outer HTML.。beforeMounted只会在有了render function之后才会执行,当执行完render function之后才会调用Mounted。可以看到此时是给vue实例对象添加 mount(el)这个方法,然后执行下一步,意味着它会停止编译,生命周期结束,如果有的话,直接执行下一步。之后会判断是否含有template这个属性,如果有的话,它会把template解析成一个renderfunction,这是一个template编译的过程,结果是解析成了一个render函数,如果没有template选项它会把外部的HTML作为模板编译(template模板优先级高于outerHTML)。ender函数选项>template选项>outerHTML.beforeMounted只会在有了renderfunction之后才会执行,当执行完renderfunction之后才会调用Mounted。可以看到此时是给vue实例对象添加el成员,并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。可以看出来,在mounted之前,渲染的DOM还没有挂载到页面内。当在Mounted挂载完之后,这个流程才会执行完。

其他的生命周期需要其他触发条件,比如当页面内data发生改变会调用beforeUpdate,然后经过virtual DOM,最后到Updated更新完毕。当组件被销毁的时候,会调用beforeDestory,以及destory。

beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

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

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

相关文章

工具方法 - 如何设定自己成为什么样的人

设定自己应该成为一个什么样的人是一个个人成长和自我发现的过程。以下是一些步骤和建议&#xff0c;可能会对你有帮助&#xff1a; 1. 自我反思 了解自己&#xff1a; 花时间思考你的兴趣、价值观、优点和缺点。问问自己&#xff1a; 我喜欢做什么&#xff1f;我擅长什么&a…

堆排序讲解

前言 在讲堆的删除时&#xff0c;我们发现一步一步删除堆顶的数据&#xff0c;排列起来呈现出排序的规律&#xff0c;所以本节小编将带领大家进一步理解堆排序。 1.堆排序概念 那么什么是堆排序&#xff1f; 堆排序&#xff08;Heap Sort&#xff09;是一种基于堆数据结构的排…

GPT-4o的崛起:人工智能新纪元的开端

如何评价GPT-4o? GPT-4o的崛起&#xff1a;人工智能新纪元的开端 随着人工智能技术的飞速发展&#xff0c;GPT-4o的发布再次引起了广泛关注。作为OpenAI推出的最新一代语言模型&#xff0c;GPT-4o不仅在技术能力上取得了重大突破&#xff0c;还在应用场景和用户体验上带来了…

网络学了点socket,写个聊天室,还得改进

目录 第一版: common 服务端: 客户端 第一版问题总结: 第二版 服务端: 客户端: 改进: Windows客户端 一些小问题 还可以进行的改进 这篇文章我就先不讲网络基础的东西了,我讲讲在我进行制作我这个拉跨聊天室中遇到的问题,并写了三版代码. 第一版: common #pragm…

SpringBoot-集成TOTP

TOTP验证码提供了一种高效且安全的身份验证方法。它不仅减少了依赖短信或其他通信方式带来的成本和延时&#xff0c;还通过不断变换的密码增加了破解的难度。未来&#xff0c;随着技术的进步和对安全性要求的提高&#xff0c;TOTP及其衍生技术将继续发展并被更广泛地应用。TOTP…

在CSS中,可以使用`float`属性来设置元素浮动

在CSS中&#xff0c;可以使用float属性来设置元素浮动。float属性有三个值&#xff1a;left、right和none。 float: left;&#xff1a;将元素浮动到左侧。float: right;&#xff1a;将元素浮动到右侧。float: none;&#xff1a;取消元素的浮动&#xff08;默认值&#xff09;。…

代码随想录算法训练营第三十一天| 455. 分发饼干、376. 摆动序列、53. 最大子数组和

[LeetCode] 455. 分发饼干 [LeetCode] 455. 分发饼干 文章解释 [LeetCode] 455. 分发饼干 视频解释 题目: 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#x…

多模态模型是什么意思(国内外的AI多模态有哪些)

在人工智能和机器学习的领域&#xff0c;我们经常会遇到一些专业术语&#xff0c;这些术语可能会让初学者感到困惑。其中&#xff0c;"多模态模型"就是这样一个概念。 什么是AI多模态。它是什么意思呢&#xff1f; 那么&#xff0c;多模态模型是什么意思呢&#xff1…

【Python】数据处理:SQLite操作

使用 Python 与 SQLite 进行交互非常方便。SQLite 是一个轻量级的关系数据库&#xff0c;Python 标准库中包含一个名为 sqlite3 的模块&#xff0c;可以直接使用。 import sqlite3数据库连接和管理 连接到 SQLite 数据库。如果数据库文件不存在&#xff0c;则创建一个新数据库…

大数据如何更好地助力乡村振兴战略的实施?

大数据可以在乡村振兴战略的实施中发挥重要的作用。以下是一些大数据如何更好地助力乡村振兴战略实施的方法&#xff1a; 优化资源配置&#xff1a;通过大数据分析&#xff0c;可以了解到乡村的资源分布和利用情况&#xff0c;帮助政府和相关机构更好地进行资源调配和规划&…

Web前端Git安装:一步步引导你走进版本控制的奇妙世界

Web前端Git安装&#xff1a;一步步引导你走进版本控制的奇妙世界 在Web前端开发的广阔天地中&#xff0c;Git作为一款强大的版本控制工具&#xff0c;扮演着举足轻重的角色。本文将引导你逐步完成Git的安装过程&#xff0c;并深入探讨其在前端开发中的重要作用。我们将从四个方…

SystemVerilog Interface Class的妙用

前言 Interface Class是在SystemVerilog 2012版本中引入的&#xff0c;但目前在验证中几乎很少采用&#xff0c;大多数验证工程师要么不知道它&#xff0c;要么没有看到使用它的任何好处&#xff0c;这使得Interface Class成为一个未被充分使用和不被重视的特性。本文将举两个…

docker镜像深入理解

大家好&#xff0c;本篇文章和大家聊下docker相关的话题~~ 工作中经常有关于docker镜像的问题&#xff0c;让人百思不解 docker镜像加载到系统中到哪里去了&#xff1f;docker load 加载镜像的流程是怎样的&#xff1f;为什么容器修改内容后&#xff0c;删除容器后再次开启容…

阿里云 MQTT 服务器搭建与测试(上传和下发数据finish)

一、 MQTT 概念 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级"通讯协议,该协议构建于 TCP/IP协议上,由 IBM 在 1999 年发布。MQTT 最大优点在于,可以以极少的代码和有限的带宽,…

c++之旅第十弹——IO流

大家好啊&#xff0c;这里是c之旅第十弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 一.流的概念&…

kNN算法-概述

所谓kNN算法就是K-nearest neigbor algorithm。这是似乎是最简单的监督机器学习算法。在训练阶段&#xff0c;kNN算法存储了标签训练样本数据。简单地说&#xff0c;就是调用训练方法时传递给它的标签训练样本会被它存储起来。 kNN算法也叫lazy learning algorithm懒惰学习算法…

计算机网络 期末复习(谢希仁版本)第8章

元文件就是一种非常小的文件&#xff0c;它描述或指明其他文件的一些重要信息。这里的元文件保存了有关这个音频/视频文件的信息。 10. 流式&#xff1a;TCP&#xff1b;流式实况&#xff1a;UDP。

Huawei 大型 WLAN 组网 AC 间漫游

AC1配置命令 <AC6005>display current-configuration # vlan batch 100 # interface Vlanif100description to_S3_CAPWAPip address 10.0.100.254 255.255.255.0 # interface GigabitEthernet0/0/1port link-type trunkport trunk allow-pass vlan 100# ip route-stati…

浅谈单臂路由

单臂路由概述 单臂路由&#xff08;router-on-a-stick&#xff09;是一种网络设计模式&#xff0c;它允许在一个物理接口上配置多个逻辑子接口&#xff0c;以实现不同VLAN&#xff08;虚拟局域网&#xff09;之间的互联互通。这种方法通常用于那些希望在一个物理接口上连接多个…

Chrome浏览器书签同步不及时怎么办?两种方法帮你解决!

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;CSDN博客专家   &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01…