精华内容
下载资源
问答
  • VSCode的.html页面使用vue运行过程 如何引入vue 1.外部引入vue 2.使用vue el: vue适用范围 data: 数据 methods: 方法 computed: 计算属性 watch: 监听器 component: 组件 计算属性: 监听属性: 如何运行.html...

    VSCode的.html页面运行和vue引入使用

    下载插件Vetur、ESLint
    Vetur: 使代码变得高亮,并带有快捷方式的代码输入。(当你第一次使用vscode编辑器时,所有代码的字体颜色都是白色的)
    ESLint: 是一个代码规范和错误检查工具
    https://blog.csdn.net/linton1/article/details/84232379

    如何引入vue在这里插入图片描述

    1.外部引入vue
    2.使用vue
    el: vue适用范围
    data: 数据
    methods: 方法
    computed: 计算属性
    watch: 监听器
    component: 组件

    计算属性:在这里插入图片描述
    监听属性:
    在这里插入图片描述

    如何运行.html页面

    1.在插件里面下载open on browser
    2.在.html页面中点击右键,出现Open In Default Browser/Open In Other Browser
    在这里插入图片描述
    在这里插入图片描述

    Vue单页面应用搭建

    1.安装node.js,当node.js安装成功npm便也安装成功,最后通过node -vnpm -v在cmd窗口检查是否安装成功。
    2.安装vue/cli,npm install -g @vue/cli,-g表示全局安装,并使用vue -V在cmd窗口检查是否安装成功。
    3.创建项目(文件) vue create 文件名

    安装node.js并检查是否安装成功

    进入node.js官网下载,安装过程一路next
    在这里插入图片描述
    进入cmd窗口,检查是否安装成功
    在这里插入图片描述

    安装vue/cli并检查是否安装成功

    https://www.cnblogs.com/cat520/p/12943480.html

    vue-cli的安装
    npm install @vue/cli -g
    vue-cli的卸载
    npm uninstall vue-cli -g
    检查vue-cli是否安装成功和其版本(其实检查是否安装成功就是看看能不能检查出你安装插件的版本,毕竟查不出版本就是没安装出来嘛)
    vue -V
    如果安装的vue-cli版本在3.0之前,安装的代码如下:
    npm install vue-cli -g(同样全局安装)

    vue/cli4的安装与使用
    1:若你已安装过vue-cli2的话,你得先卸载掉,命令如下
    //首先查看是否已安装过vul-cli
    vue -V
    //如是有的话,就用下面命令卸载
    npm uninstall vue-cli -g

    2:安装vue-cli 4.0.5
    //一键初始化项目
    npm init -y
    // 安装vue-cli
    npm install @vue/cli -g
    //也可使用cnpm 来安装 ,比较快些
    cnpm install @vue/cli -g

    创建项目

    1.打开cmd窗口,定位到你想把项目放在的文件位置。
    在这里插入图片描述
    或者第二种方法,打开你想要创建项目的文件夹,选中输入框的路径,输入cmd指令,然后点击回车,出现的效果和上图一致。
    在这里插入图片描述在这里插入图片描述
    2.创建一个项目
    //1.命令 回车
    vue create 项目名
    //2.选择自定义配置 Manually select features
    //3.选择你需要的配置
    Babel (必选)
    TypeScript(项目中使用ts开发的话,就勾选)
    Progressive Web App (PWA) Support (接口缓存,优化项目)
    Router
    Vuex
    CSS Pre-processors (css预处理器,需要)
    Linter / Formatter (代码格式,一般默认选中)
    Unit Testing (代码测试)
    E2E Testing(需求界面测试)
    //4.根据你选的配置进行Y/N选择
    //5.选择完之后,就可以运行项目
    npm run serve
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    ps: 另附一个创建webpack项目的方法https://www.cnblogs.com/dzcici/p/13539886.html

    展开全文
  • 页面查询列表,进入详情页时,返回需要页面返回到上次浏览的位置(保留列表之前的当前页搜索条件数据)2.由于查询列表获取的数据可能会短时间改变,如果前端长时间缓存数据,并不符合业务要求。3.我在进入详情页时...

    最近在做PC端前端项目中,需要实现以下场景:

    1.在页面查询列表,进入详情页时,返回需要页面返回到上次浏览的位置(保留列表之前的当前页和搜索条件数据)

    2.由于查询列表获取的数据可能会短时间改变,如果前端长时间缓存数据,并不符合业务要求。

    3.我在进入详情页时可以修改列表的数据,返回时滚动到,用户看到的应该是最新的数据

    4.每个列表页面需要保存当前页和搜索条件数据。

    针对以上前几点:

    页面的缓存,我们需要用到vue的内置组件keep-alive,来缓存列表页面,同时配合路由选项来更改页面的数据。

    在设置keep-alive缓存的组件中,首次进入组件,会一次调用组件的钩子函数:created --> mounted -->activated 再次进入时,只触发activated钩子函数

    1.在路由出口渲染组件时配置:

    2.在路由选项中,配置meta属性,keepAlive为true即为需要缓存的组件,同时设置isBack属性,用来标示页面是否是从详情页面返回的。

    {

    name: '首页',

    path: 'index',

    component: Index,

    meta: {

    keepAlive: true,

    isBack: false

    }

    },

    3.在组件实例中,通过beforeRouteEnter(to, from, next)路由守卫,来判断路由是从哪里跳转的,如果是从详情页跳转的,则将当前路由对象的meta.isBack 设置为true,否则设为false

    beforeRouteEnter(to, from, next) {

    if (from.path == "/detail") {

    to.meta.isBack = true;

    } else {

    to.meta.isBack = false;

    }

    next();

    },

    为了在其他页面进入时,更新页面中的列表数据,我们将在activated钩子函数中挂载页面初次进入时的请求数据:

    activated() {

    if (!this.$route.meta.isBack) {

    this.list = [];

    this.pageNum = 1;

    this.getList();

    }

    this.$route.meta.isBack = false;

    },

    4.在进入详情页,需要对该条数据进行修改时,修改成功后返回,应该更新列表。

    由于我们要在返回时滚动到浏览位置,因此不能去后台重新请求数据(否则无法回到之前浏览的位置),而是采用前端保存修改的数据,并在返回的activated钩子中对当前列表数据修改。

    需要注意的事项:

    由于vue自身限制,不能检测到数组直接修改长度和利用索引设值 因此,需要使用vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)

    然后根据页面离开时保存的滚动位置,将页面滚动到浏览位置。在router-view入口处,watch,$route对象,将keep-alive为true的页面,滚动到上次浏览位置。

    5.在页面列表中,我们需要用到分页加载数据,即滑动加载

    在keep-alive组件中,页面离开时,并不会销毁当前的vue实例,而是保存在内存中。因此就会造成问题:页面跳转时,触发了滑动事件,加载所有保存在内存中的滑动事件,改变了vue实例的数据。

    因此,我们需要在组件的路由守卫中,在页面离开时beforeRouteLeave中把滑动事件禁用,然后再在页面进入的时候,在activated钩子中恢复滑动事件的。

    注意: 使用keep-alive不能销毁实例,vm.$destroy(); 否则再进入页面,即使keep-alive为true也不会保存组件。如果keep-alive的页面较多,可以使用,在路由守卫中修改vuex的变量动态改变keep-alive的页面变量。

    展开全文
  • html个html页面嵌套在一起

    千次阅读 2021-06-10 15:25:28
    vue为什么要用vue传统的网页形式是浏览器脚本语言js连接了各种各样的Html,css,但缺乏正规的组织形式,比如在页面元素非常,结构很庞大的网页中,数据视图如果全部混杂在一起,像传统开发一样全部混合在HTML中...

    vue

    为什么要用vue

    传统的网页形式是浏览器脚本语言js连接了各种各样的Html,css,但缺乏正规的组织形式,比如在页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在HTML中,那么要对它们进行处理会十分的费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题,比如juqery中使用的$('#xxx').parent().parent().parent()

    一开始很容易找到,但是当页面结构改变时,也就是说,DOM关联和嵌套级别将改变,那么先前的代码可能会变成这样:

    $('#xxx').parent().parent().parent().parent().parent()

    产品迭代后,dom节点的搜索操作会造成很大的性能损失。

    Vue是一个友好,和高性能的js框架,可以帮助您创建更可维护和可测试的代码库。官方网站描述了Vue的优点,如下所示:

    04a70dc85bd21f422de1d3270e7160f9.png

    1.易于使用:

    学习曲线平缓,API简单易用。学习过程比做出反应容易,但没有那么痛苦

    2.灵活:

    如果您已经有了现成的服务器端框架,则可以将vue嵌入其中,以带来更丰富的交互式系统,或者您想在前端实现更多业务逻辑,则将其核心vue图书馆及其生态系统也可以满足您的各种需求。 Vue允许您将网页分为可重用的组件。每个组件可以包含自己的html,css,js文件来呈现相应的网页。本地的。

    3.高效:

    938788e555a1af542c24e867cbff0460.png

    虚拟dom:所有数据都在内存中,只有js引擎参与其中

    真实的dom将在其中包含浏览器呈现层

    您知道浏览器的虚拟DOM与实际DOM之间的区别(注意:虚拟DOM的需求实际上与框架的DOM操作机制有关):

    虚拟DOM将不执行排版和重绘操作

    经常对虚拟DOM进行修改,然后一次比较并修改真实DOM中需要修改的部分(请注意!),最后在真实DOM中进行排版和重绘以减少布局的损失并重新绘制过多的DOM节点

    频繁排版和重绘真实DOM的效率很低

    虚拟DOM有效地减少了大区域(真实DOM节点)的重绘和排版,因为最终的差异与真实DOM进行了比较,并且只能呈现其中的一部分(与2)相同

    使用虚拟DOM损失计算:

    总损失=虚拟DOM添加,删除和修改+(与Diff算法的效率有关)实际DOM差异添加,删除和修改+(较少的节点)排版和重绘

    直接使用真实的DOM损失计算:

    b902f3677a35402fa3293ce20e45cbeb.png

    总损失=完全添加,删除和修改了真正的DOM +(可能有更多的节点)排版和重绘。只能说虚拟DOM在某些情况下只会减少对真实DOM的操作次数。

    虚拟DOM只是一个JavaScript对象

    它将在比较之后选择要更新的DOM,而不是在某些情况下删除所有DOM并进行重建。

    在获取/修改大量DOM元素时,它将首先比较虚拟DOM中的值。

    虚拟dom是在内存中维护的dom树,它是物理dom之上的抽象层。在此抽象级别上,无论是查询操作还是修改操作,都将首先操作内存中的虚拟dom。在此过程中,可以进行许多优化以减少实体dom的操作。举两个例子,1.查询文本标签的值,可以直接从虚拟dom中找到它,而根本不查询实体dom。 2.在一项操作中,要修改列表中的两个记录,要修改的元素将首先将更改同步到虚拟dom,然后基于最新的虚拟dom一次渲染最终的物理dom。如果没有虚拟dom,则对两个记录的修改必须对应于对实体dom的至少两个操作。显然,实体dom操作越频繁,网页速度就越慢。

    关于vue.js的虚拟DOM,目前在业界有不同的评论。有人认为Vue.js是一个轻量级的框架。虚拟DOM的引入将增加Vue.js本身的代码大小,并且还将消耗更多的CPU(手机上的更多功率)(注意:更多的CPU消耗不会增加它的消耗,这意味着它会更困难,因为JavaScript计算是后台计算,并且其计算不足以使DOM操作变得滞后),并且当操作单个DOM元素时,还有一个额外的计算过程,该过程会更慢。但是有人认为,基本上将使用Vue.js开发的元素是页面中的许多元素,并且必须操作的DOM通常规模很大,并且平均而言更具成本效益。

    4.丰富的社区和第三方组件库

    社区

    论坛()-提问的最佳场所。

    Gitter()-开发人员。您可以在这里提问,但是最好在论坛中提问,因为该论坛有多个部分。

    a4ec174e12d1eb9d09c8b638efb97062.png

    Github()-报告问题,提交请求,并感谢您的贡献!

    vue组件库:

    element-ui薄荷UI

    muse-ui

    什么是vue

    1. Vue.js(发音为/vjuː/,类似于view)是用于构建用户界面的渐进框架。

    这里的渐进式框架也是上述Vue的灵活功能之一。使用Vue,您可以使用它在原始大型系统之上实现一个或两个组件,并将其用作jQuery。您也可以将其用于整个家庭。使用Angular时的存储桶开发;

    例如,在开始使用数据绑定来形成表单时,然后控制整个页面的dom,然后使用路由器控制单页面应用程序的路由,组件协调,vuex和数据协调等使用vue,您可以使用原始版本。在大型系统的顶部,可以代替实现一个或两个组件,并将它们用作jQuery;您还可以将其作为整个系列的存储桶用于Angular开发。

    97f1365a0ea5e3fc9abdce870d801558.png

    2. Vue仅关注视图层,并采用了自下而上的增量开发设计。

    7d23615f0324a3e7be1e24adbfc6039f.png

    查看图层:

    HTML中的DOM实际上是视图。网页通过DOM的组合和嵌套形成最基本的视图结构,然后通过CSS的修改,基本的视图结构是“组成”,使它们看起来更漂亮。最后,涉及到交互部分,您需要使用JavaScript来接受用户交互请求,并通过事件机制响应用户交互,并在事件处理功能中修改各种数据,例如修改DOM,innerHTML或innerText。部分。

    我们可以将HTML中的DOM与其他部分分开,将其划分为一个级别,该级别称为视图层。

    MVVM

    是Model-View-ViewModel的缩写,由三部分组成:Model,View和ViewModel。模型层代表数据模型,也可以在模型中定义数据修改和操作的业务逻辑;视图表示UI组件,负责将数据模型转换为UI并显示。 ViewModel是一个用于同步View和Model的对象。它是基于前端开发的体系结构模型。其核心是提供与View和ViewModel的双向数据绑定,这使ViewModel的状态更改能够自动传输到View,即所谓的双向数据绑定。

    0d08681b403c99c069562a8e78cbebb5.png

    Vue.js是一个Javascript库,提供了MVVM风格的双向数据绑定,重点是View层。它的核心是MVVM中的VM,即ViewModel。 ViewModel负责连接View和Model以确保视图和数据的一致性。这种轻量级的体系结构使前端开发更加高效和便捷。

    MVC

    控制器负责更新模型中的数据,视图从模型中请求数据;当用户的行为触发操作时,控制器将更新模型并通知视图更新,这时视图将向模型报告请求新数据

    3. Vue的目标是通过最简单的API实现响应数据绑定和组合视图组件。

    1723c1713f326cd5fce1739b57fc87c1.png

    响应的数据绑定:

    这意味着vue.js将自动响应数据更改,并根据用户事先在代码中编写的绑定关系来修改绑定在一起的所有数据和查看内容。这种绑定关系是通过输入标签的v-model属性在图上声明的,因此您可能还会看到人们粗略地将vue.js称为模板引擎,用于在其他地方进行声明式渲染。

    vue.js测试 -

    {{ message }}

    var app = new Vue({

    el: '#app',

    data: {

    message: 'Hello Vue!'

    }

    })

    组合视图组件:

    Vue.js使用组件将单页应用程序中的各个模块拆分为一个组件(组件),我们只需要在父应用程序中编写各种组件标签(占坑),然后编写要传递到组件标签中组件的参数(就像将参数传递给函数一样,此参数称为组件的属性),然后编写各种组件的实现(填充孔)。

    组件可以自由组合以形成功能齐全的接口。当不需要组件或要替换组件时,可以随时替换和删除它,而不会影响整个应用程序的操作(组件化)

    组件化的优势:

    提高开发效率

    易于重用

    简化调试步骤

    提高整个项目的可维护性

    易于协作开发

    本文来自电脑杂谈,转载请注明本文网址:

    http://www.pc-fly.com/a/shumachanpin/article-344717-1.html

    展开全文
  • Vue 单页面页面跳转滚动条记忆问题

    问题描述:

            单页面中页面跳转后,二级页面滚动条位置会跟上级页面一致。如首页列表页,进入详情如果详情内容可滚动,滚动条会同首页位置一致。原因vue路由跳转是通过对history.pushState()和history.replaceState()方法模拟来实现的,当调用router.go()或者 router.back()方法的时候就和history.hgo()、history.back()效果一样。但是,不加处理的情况下,组件的滚动行为会跟我们想象的不同

    解决方案:

            网上给出了很多解决方案,大多数是页面切换控制scroll位置。但是此处推荐vue官方给出的方案 scrollBehavior 方法,下边给出官方示例

    注意: 这个功能只在支持 history.pushState 的浏览器中可用。

    const router = new VueRouter({
      routes: [...],
      scrollBehavior (to, from, savedPosition) {
        // return 期望滚动到哪个的位置
        return { x: 0, y: 0 }
      }
    })

    更多深入使用方法和场景在此不多赘述。

    展开全文
  • app内嵌vue单页面应用的一些坑

    千次阅读 2020-12-22 09:02:24
    写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目,看看有哪些坑!!!1、白屏项目第一次上线正常项目第二次上线,20个用户反馈白屏(没见过这世面,心里慌的不行!!!),一时定位不到问题...
  • vue单页面的优缺点?

    2021-12-16 09:07:11
    1.优点: 用户体验好,快,内容的改变不需要重新加载整个页面,对服务器的压力小,前后端分离,比如vue项目 ... 页面导航不可用,如果一定要导航需要自行实线前进,后退(由于是单页面不能用浏览器的前进,后退功...
  • 按 应用崩溃 页面以及崩溃进程聚合分析不同 应用 页面和 应用进程下 应用的崩溃数据。操作步骤登录崩溃分析控制台。左侧导航栏选择多维分析 页面。您可以选择不同版本、时间段、异常指标,查看不同 应用 页面(View...
  • ipcMain.on('close-setting-page',(event,arg)=>{ console.log("mainreceiverendererclosesettingpagerequest"); mainWindow.loadFile(path.join(__dirname,'./index.html')); })
  • wps单页面方向设置为横向的方法

    万次阅读 2021-01-17 14:38:12
    今天小编就把wps单页面方向设置为横向的小技巧告诉大家。下面就是wps单页面方向设置为横向的方法的教程了。希望能帮助到大家。1、将光标定位于需要设置方向不同的页面的上一页最后一个文字的后面(比如第二页想要横向...
  • 单页面也可以设置。 注意: iOS/Android 微信客户端 6.6.0,Windows 微信客户端不支持 全局设置导航栏,隐藏 app.json设置 – “navigationStyle”: “custom” PS:从app.json中设置所有页面都会生效,导航...
  • 个HTML页面 使用 同一段HTML代码

    千次阅读 2021-06-11 11:21:22
    一个网页,可以分为很部分,举个例子,下面是一个特别简单的网页结构:一般情况下,footer都是用于标识网站的相关信息(备案、联系方式、制作方),每一个页面都是相同的,如果又100个这样的页面,如果在每一个页面...
  • <template> <div class="wrap wx_login_el"> <el-input v-model="loginForm.password" type="password" auto-complete="off" @keyup.enter.native="handleLogin" :disabled="isLogin" ... .
  • nginx配置页面访问

    千次阅读 2021-11-25 14:51:49
    server { listen 80; server_name localhost;... location ~ /tmp/ { return 403;... proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;... } 一定要分清里面的rootalias,不要混淆,否则访问不到
  • 如果需要获取的数据就是这么,拆分请求聚合请求,在时间上可以认为是聚合请求性能更好,这就EdgeChrome的对比一样,有说法是Edge其实比Chrome更快,但是Edge一定要等到资源下载完才开始加载,Chrome是边下载变...
  • 在微信浏览器或者在企业微信环境下,在A页面中用window.location.href跳转到新页面B,然后点击浏览器返回按钮回到之前的页面A,这时,我们会发现用nginx起的服务页面会不刷新,在用node起服务中页面是正常刷新的。...
  • 需求 为博客的每一篇文章生成分享海报,每张海报上需要一个带文章id的小程序码,微信官方提供三种方式生成小程序码。 api api名 区别 ...获取小程序二维码,适用于...获取小程序码,适用于需要的码数量极的业务场景
  • 一、背景需求背景是这样的,在小程序里面,点击查看用户签订的协议,跳转到协议详情页,刚好协议详情页在另一个H5项目的已经有,所以就想直接跳转过去,避免再开发小程序版本的协议详情页二、小程序跳转H5页面小程序...
  • 文章目录前后端分离单页面应用(SPA)项目示例(Vue+ElementUI+Axios+Django+MySql)1. 前端部分1. 1 前端vue平台搭建安装vue:安装Element-UI1. 2 创建前端子项目(vue的helloworld示例项目)用vue创建前端项目:...
  • 一本上百P的画册是分图层设计的,每个图层上只有1p或者2P,但为了配合印刷流程软件,需要把这个文件转成分页面的PDF文件,遇到这类型文件,通常得手动建立很画板页面,然后一个图层一个图层移入画板中,然后再存...
  • Page({ data: { hidden:[false,true,true,true], active: 0, //首页所用的数据 }, //tabbar底部切换事件 ... //页面切换 changePage(active){ let hidden = this.data.hidden; hidden.forEach(
  • 如果大家觉得有用,更的模块请 点击查看vue router给我们提供了两种页面间传递参数的方式:// 命名的路由router.push({ name: 'user', params: { userId: 123 }})// 带查询参数,变成 /register?plan=privaterouter...
  • 页面跳转的简单实现(点登录)

    千次阅读 2021-03-14 13:44:05
    编辑UserController@Controller@RequestMapping("/user")public class UserController {/*** 实现用户模块跳转* url1:http://www.jt.com/user/login.html 页面:login.jsp* url2:http://www.jt....
  • 遇到的问题:具体就是分享页面,使用了太页面,一些是以前得一些页面。如果全部重新浪费时间而且小程序安装包的内存要求一般是2M。重新写肯定浪费内存。所以尽可能得能使用以前得就用以前得页面。 作为一个...
  • 关于vue里页面的缓存

    千次阅读 2020-12-20 10:58:59
    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染。用法:运行结果描述:input输入框内,路由切换输入框内部的内容...结合router缓存部分页面:比较实用的例子:思路:通过before...
  • H5实现的点餐页面

    千次阅读 2021-06-11 00:40:27
    【实例简介】本项目是用h5实现的一个简单餐厅点餐页面,可以用于新手参考【实例截图】【核心代码】点餐页面(有点简单)└── 点餐页面(有点简单)├── base.html├── css│ ├── bootstrap.css│ ├── ...
  • 需求:从一个横向纵向都有滚动条的列表页进入详情页...2.数据加载,每次进去列表页时数据都会重新加载,列表的初始值都为空,表头也需要动态加载,所以返回页面时,整个列表是没有高度宽度的,所以即使设一个初始...
  • js中实现页面跳转

    千次阅读 2020-12-18 18:24:44
    一:JS 重载页面,本地刷新,返回上一页代码如下:返回上一页重载页面,本地刷新返回上一页重载页面,本地刷新返回前二页并刷新的JS代码应该怎样写。代码如下:history.go(-2);location.reload();二:js 方法代码如下:...
  • vue中v-if v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下:vue html代码块:ABCNot A/B/Cvue js代码块:var divApp = new Vue({el: '#divApp',data:{isActive: ...
  • Web页面测试接口测试的区别在那? 01 为什么离职? 这个根据自己的实际情况说明,列如: 公司节奏较慢,职业遇到瓶颈,没有什么成长进步 出于长远发展家庭规划的原因,打算在XX城市定居,所以离开了 02 非...
  • Vue3-KeepAlive,页面使用keepalive

    千次阅读 2021-03-24 13:05:21
    $route.meta.keepAlive" /> router-view> 请注意上述代码当中有:key属性,通常页面会使用到keepAlive属性,如果是页面,那么必须加上:key属性,否则会报错。 效果图(首页及mv页不会重新加载)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,200,157
精华内容 480,062
关键字:

多页面和单页面