前后端分离vue简介

vue简介

vue是一个渐进式js框架,用于构建用户界面,其主要特点是易学易用、轻量、灵活和高效。Vue.js由前Google工程师尤雨溪( Evan You)在2014年创建,它的核心库只关注视图层,是一款非常优秀的MVVM框架,提供了响应式和组件化的视图组织方式。它可以轻松与其他JavaScript库和第三方库集成,并支持服务端渲染(server-side rendering)和单文件组件(Single File Components)。Vue.js的主要特点是数据驱动、组件化、指令系统和可插拔性

官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js

spring-context依赖包含了很多的jar

mvvm模型:model,view,view-model

mvc模型:model,view,comtroller

后端 ajax拿数据 json数组[]

前端 $.each(arr,function(){

str=...

})

$("table").html()...

mvvm模型:虚拟dom,渲染dom树==数据双向绑定

库与框架的区别

库(Library),本质上是一些函数的集合,每次调用函数,实现一个特定的的功能,接着把控制权交给使用者

代表:jQuery

jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作

2.2 框架(Framework),是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码

代表:vue

框架规定了自己的编程方式,是一套完整的解决方案

使用框架的时候,由框架控制一切,我们只需要按照规则写代码

框架的侵入性很高(从头到尾)

前后端分离

1.确定数据格式/接口文档

2.前端后端各司其职

传统开发:jsp 找项目原状页面--》专业的前端写项目原型页,后端代码 html--》js样式乱了

1迁就网上的原型页 2自己改样式

客户提的新需求,改变了页面版

重大问题:

1.后端写代码必须等前端完成后,意味着项目周期会拉长

2.后端做了他不擅长的事

3.不便于后期的维护

vue的入门

v-model:数据双向绑定

边界中的变量,在vue实例中变量定义

:value:从vues实例中的定义变量取出,用到的边界中

@click/v-on:click:

js:onclick

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title></title></head><body><!-- 定义vue所管理的边界,有且只有一个根节点 --><div id="app">{{msg}}<span id="show"></span><input id="content"><button type="button" onclick="tan">弹出来吧,光</button></div>			<script type="text/javascript">// 构建vue实例并绑定边界new Vue({el:"#app",data(){return{msg:'hello  vue 你相信光吗?'}}})function tan(){var content=$("#content").val();$("#show").text(content);}</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title></title></head><body><!-- 定义vue所管理的边界,有且只有一个根节点 --><div id="app"><!-- {{msg}} --><input v-bind:value="msg"><!-- <input v-model="msg"> --><button type="button" @click="tan()">弹出来吧,光</button></div><script type="text/javascript">// 构建vue实例并绑定边界new Vue({el:"#app",data(){return{msg:'hello  vue 你相信光吗?'}},methods:{tan(){alert(this.msg);}}})</script></body>
</html>

vue的生命周期

becreate , created , beforeMount , mounted , beforeUpdate , updated , beforedestory , destoryed

vue初始化默认触发的钩子函数:becreate , created , beforeMount , mounted

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script></head><body><div id="d1"><div>number:{{number}}</div><div>{{detail()}}</div><input type="text" v-model="number" /></div><script>var data = {number:999,msg:null};var vm = new Vue({el:'#d1',data:data,methods:{detail:function(){return "使用方法来插值:"+this.msg;}},beforeCreate:function(){console.log('beforeCreate:刚刚new Vue()之后,这个时候,数据还没有挂载呢,只是一个空壳')           console.log(this.msg)//undefinedconsole.log(document.getElementsByClassName("myp")[0])//undefined},created:function(){console.log('created:这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数')this.msg+='!!!'console.log('在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取')console.log('接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染')},beforeMount:function(){console.log('beforeMount:虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated')this.msg+='@@@'console.log('在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取')console.log(document.getElementsByClassName("myp")[0])//undefinedconsole.log('接下来开始render,渲染出真实dom')},// render:function(createElement){//     console.log('render')//     return createElement('div','hahaha')// },mounted:function(){ console.log('mounted:此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了')console.log(document.getElementsByClassName("myp")[0])console.log('可以在这里操作真实dom等事情...')//    this.$options.timer = setInterval(function () {//        console.log('setInterval')//         this.msg+='!'  //    }.bind(this),500)},beforeUpdate:function(){//这里不能更改数据,否则会陷入死循环console.log('beforeUpdate:重新渲染之前触发')console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         },updated:function(){//这里不能更改数据,否则会陷入死循环console.log('updated:数据已经更改完成,dom也重新render完成')},beforeDestroy:function(){console.log('beforeDestory:销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等...')// clearInterval(this.$options.timer)},destroyed:function(){console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳,这里也可以善后')}});</script></body>
</html>

 

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

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

相关文章

Azure AD混合部署,通过 Intune 管理设备,实现条件访问

一、设备同步到AAD上面 1、配置 AAD Connect 2、选择 3、下一步 4、配置本地 企业管理员 5、配置成功 二、通过 组策略把设备同步到 Intune 上面 1、创建一条组策略 2、设置 &#xff08;1&#xff09;计算机配置 → 管理模板 → Windows 组件 → MDM → 使用默认 Azure AD …

增强for循环和一般for循环的对比使用

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。个人B站主页热爱技术的小郑 &#xff0c;视频内容主要是对应文章的视频讲解形式。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘…

spring源码解析——IOC之自定义标签解析

概述 之前我们已经介绍了spring中默认标签的解析&#xff0c;解析来我们将分析自定义标签的解析&#xff0c;我们先回顾下自定义标签解析所使用的方法&#xff0c;如下图所示&#xff1a; 我们看到自定义标签的解析是通过BeanDefinitionParserDelegate.parseCustomElement(ele…

【赘婿国漫】从网络文学,到热播动漫,种马文属性或许是最大优点

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 《赘婿》第一季结束以来&#xff0c;有关该剧的讨论就一直没有停止过。这部由网络小说改编而来的国漫&#xff0c;虽然收获了不俗的收视成绩&#xff0c;但也引发了许多争议。在原著作者的控制范围之外&#x…

智慧银行:数字化金融时代的引领者

在当今数字化的时代&#xff0c;金融行业正经历着一场前所未有的变革。传统的银行模式已经不再适用&#xff0c;取而代之的是智慧银行的新兴概念。智慧银行不仅仅是数字化的银行&#xff0c;更是一个全新的金融服务范式&#xff0c;将科技与金融相结合&#xff0c;为客户提供更…

技术干货 | JMeter实现参数化的4种方式

参数化释义 什么是参数化&#xff1f;从字面上去理解的话&#xff0c;就是事先准备好数据&#xff08;广义上来说&#xff0c;可以是具体的数据值&#xff0c;也可以是数据生成规则&#xff09;&#xff0c;而非在脚本中写死&#xff0c;脚本执行时从准备好的数据中取值。 参数…

方法的重载

方法的重载 在同一个类中&#xff0c;定义了多个同名的方法&#xff0c;这些同名方法名具有同样的功能每个方法具有不同的参数类型或者参数个数&#xff0c;这些同名的方法就构成了重载关系。 简记&#xff1a;同一个类中&#xff0c;方法名相同&#xff0c;参数不同的方法。与…

编程每日一练(多语言实现):判断偶数

文章目录 一、实例描述二、技术要点三、代码实现3.1 C 语言实现3.2 Python 语言实现3.3 Java 语言实现 一、实例描述 利用单条件单分支选择语句判断输入的一个整数 是否是偶数。 运行程序&#xff0c;输入一个 整数18&#xff0c; 然后按回车键&#xff0c;将提示该数字是偶数…

第十四届蓝桥杯大赛软件赛决赛 C/C++ 大学 B 组 试题 B: 双子数

[蓝桥杯 2023 国 B] 双子数 试题 B: 双子数 【问题描述】 若一个正整数 x x x 可以被表示为 p 2 q 2 p^2 \times q^2 p2q2&#xff0c;其中 p p p、 q q q 为质数且 p ≠ q p \neq q pq&#xff0c;则 x x x 是 一个 “双子数”。请计算区间 [ 2333 , 233333333333…

1.算法——数据结构学习

算法是解决特定问题求解步骤的描述。 从1加到100的结果 # include <stdio.h> int main(){ int i, sum 0, n 100; // 执行1次for(i 1; i < n; i){ // 执行n 1次sum sum i; // 执行n次} printf("%d", sum); // 执行1次return 0; }高斯求和…

vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标

GitHub Demo 地址 在线预览 vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标 [GitHub Demo 地址](https://github.com/iotjin/jh-vue3-admin)[在线预览 ](https://iotjin.github.io/jh-vue3-admin) 一、iconify插件安装使用效果图 二、通过自动导入使用ic…

基于微信小程序的音乐播放器设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

在虚拟机上安装win10/ubuntu的教程

以下内容源于网络资源的学习与整理&#xff0c;如有侵权请告知删除。 一、下载软件资源 1、首先下载虚拟机Vmware_Pro17软件并正确安装&#xff1a;网盘链接 2、然后下载操作系统的镜像文件&#xff1a;MSDN, 我告诉你 - 做一个安静的工具站 二、在虚拟机上安装ubuntu系统 1…

共享门店模式:一种新兴的商业模式

共享门店模式是一种利用实体店铺的空间和资源&#xff0c;让多个品牌或商家在同一地点共同运营的商业模式。这种模式可以提高店铺的利用率&#xff0c;降低经营成本&#xff0c;增加客流量&#xff0c;实现资源的最大化利用。如果你是一个有创业想法的企业家&#xff0c;或者你…

2023-9-26 JZ52 两个链表的第一个公共节点

题目链接&#xff1a;两个链表的第一个公共节点 import java.util.*; /* public class ListNode {int val;ListNode next null;ListNode(int val) {this.val val;} }*/ public class Solution {public ListNode FindFirstCommonNode(ListNode head1, ListNode head2) {ListNo…

数据统计和分析怎么做?spss如何做好数据分析?

为什么要做数据分析?数据分析有什么意义&#xff1f;数据分析可以为企业和组织提供多方面的帮助&#xff0c;包括提高工作效率、优化业务流程、升职加薪、提高管理效率以及改进汇报效果等方面。 IBM SPSS Statistics 26是一款功能强大的统计分析软件&#xff0c;适用于Mac操作…

LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机

LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机 随着全球风电装机容量的快速增长&#xff0c;雷电活动对风力发电机组造成的损害受到更多关注&#xff0c;特别是在雷电活动强烈的地区。在冬季闪电期间&#xff0c;风力涡轮机等高层结构会受到向上的雷击。众所周知&#x…

JetBrains 产品安装插件(plugins)的两种方式

安装分为在线、离线两种方式&#xff1a; 在线方式&#xff1a; File > Settings > Plugins 搜索插件 Install 即可 离线方式&#xff1a; 官网&#xff1a;https://plugins.jetbrains.com/ 搜索到插件后&#xff0c;点击 "Get"&#xff0c;选择自己安装的…

maven本地安装jar包

在实际开发中&#xff0c;有些jar包不能通过公共库下载&#xff0c;只能本地安装。可以按照以下步骤操作&#xff1a; 1、安装命令 mvn install:install-file -DgroupIdcom.chinacreator.sm -DartifactIdfbm-sm-common -Dversion0.0.1 -Dpackagingjar -Dfile../newJar/fbm-sm…

【LeetCode热题100】--160.相交链表

160.相交链表 使用双指针&#xff1a; /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ public class Solution {public ListNode getInter…