天道酬勤,学无止境

vue中完美实现多组件动态调用渲染

<template>
  <div class="top">
    <div class="top_div">
      <div style="background-color:coral;">
        <img style="width: 50px;height: 50px" src="../assets/logo.png">
      </div>
      <div class="top_b" style="background-color:lightblue;">
        <div v-for='(item,index) in arrl'
             :class='{itemhover:index===isactivel}'
             @click='lfn(index)'>
          {{item}}
        </div>
      </div>
    </div>
    <div id="left">
      <div class="left_div" style="background-color:coral;">
        {{arrl[isactivel]}}
      </div>
      <div class="center_div" style="background-color:lightblue;">
        <div class="center_div_header">
          <div v-for='(item,index) in arr[isactivel]'
               :class='{itemhover:index===isactive}'
               @click='fn(index)'>
            {{item}}
          </div>
        </div>
        <div class="center_div_body">

          <div v-show=show_list[index] v-for='(item,index) in arr[isactivel]'
               :class='{itemdisplay :index===isactive}'>
            <component :is="currentView"></component>
          </div>
          </div>
        </div>
      </div>
    </div></template><script>
  import CommentSetting from './CommentSetting'
  export default {

    name: 'ting',
    table_title: [16, 17, 18, 19],
    data () {
      return {
        itemhoverindex: null,
        isactive: 0,
        isactivel: 0,
        isactivell: 0,
        arr: [['home','post','archive',"home"],['home','post','archive',"home"],['home','post','archive',"home"],['home','post','archive',"home"]],
        arrl: ['111','222','333','444'],
        show_list: [1,0,0,0],
        cindex:0,
        table_list:[['home','post','archive',"home"],['home','post','archive',"home"],['home','post','archive',"home"],['home','post','archive',"home"]],


      }
    },
    methods: {

      lfn: function (index) {

        this.show_list=[0,0,0,0]
        this.show_list[0]=1
        this.isactive=0
        this.isactivel = index

        console.log(this.isactivel,this.isactive)
      },
      fn: function (index) {
        this.show_list=[0,0,0,0]
        this.show_list[index]=1
        this.isactive = index      }



    },
    components: {
      'home':CommentSetting,
      "post":CommentSetting,
      "archive":CommentSetting    },
    computed:{
      currentView(){
        return this.table_list[this.isactivel][this.isactive];
      }
    }
  }</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>
  .top {
    border: 0;
    display: flex;
    flex-direction: row;
  }

  .top .top_div {
    border: 0;
    display: flex;
    flex-direction: column;
  }

  .top .top_div div {
    width: 150px;
    height: 50px;
  }

  #left {

    border: 0;
    display: flex;
    flex-direction: column;
  }

  .top #left .left_div{

    height:50px;
  }


  .top #left .center_div {
    height: 800px;
    width: 800px;
    display: flex;
    flex-direction: column;

  }

  .top #left .center_div .center_div_body {
    width: auto;
    height: 800px;
  }


  .top #left .center_div .center_div_header {
    width: auto;
    display: flex;
    flex-direction: row;
  }

  .top #left .center_div .center_div_header div {
    width: 80px;
    background-color: salmon;
  }

  .top .top_div .top_b {
    height: auto;
    border: 0;
    display: flex;
    flex-direction: column;
  }

  .top .top_div .top_b div {
    width: 150px;
    background-color: darkgray;
  }

  .itemhover {
    background-color: fuchsia !important;
    color: cornflowerblue !important;
    height: 50px;
  }

  .itemdisplay {
    display: block;
    height: 800px;
    background-color: burlywood;
  }</style>

在这里插入图片描述

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Vue的深入理解
    《12道vue高频原理面试题,你能答出几道?》 文章目录 1、spa(单页面)与多页面2、前端工程化MVC和MVVMMVCMVVM 3、Vue组件间通信方式4、前端路由hash和historyhashhistory(h5的API) 5、Vue 钩子函数执行顺序6、vue3.0相对vue2.0有什么变化或者改进computed原理7、computed 和 watch 的差异8、vue项目的运行流程9、双向绑定、单向数据流双向绑定:单向数据流(Prop): 10、数据响应式更新原理(data->View)11、Vue 组件 data 为什么必须是函数12、Vue 中怎么自定义指令13、如何封装一个组件、插槽slot(腾讯一面)13、Vuex(vue的状态管理)mutation和action的区别Vue 中的 key 到底有什么用?vm.$set()实现原理是什么?Vue 的渲染过程 1、spa(单页面)与多页面 参考文献 哪些网站使用了vue,及其seo Vue单页面应用 单页应用和多页应用:超级详细,超级好的一篇文章 单页面: 说白就是无刷新,整个webapp就一个html文件,里面的各个功能页面是javascript通过hash,或者history api来进行路由,并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html,所以叫单页面! 通俗点来讲
  • Vue必会知识点——使用篇
    文章目录 使用Vue的基本使用组件Vue高级特性VuexVue-router 使用 Vue的基本使用 v-html和v-text: 都会覆盖掉子组件v-html能解析html标签v-html有xxs风险 computed和watch: computed有缓存,data不变则不会重新计算。cpmputed在v-model绑定的时候需要有get(),set()watch需要设置deep为true才能深度监听watch监听引用类型,拿不到oldVal,因为同一个引用类型指针相同,修改值之后指向新的val,就拿不到旧的val。 v-show和v-if: v-if按照条件是否渲染,v-show是display的block或none;v-show页面加载的时候也会随之加载,不会重新销毁和渲染;v-if只有在判断符合的时候才会加载,不符合的时候会销毁,下一次需要重新加载渲染。需要频繁切换的时候使用v-show比较好,反之使用v-if。 v-for中的key: key的作用主要是为了高效的更新虚拟DOM。diff算法中通过tag和key来判断,是否是sameNode减少渲染次数,提升渲染性能当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是简单复用此处每个元素
  • Vue的一些笔记
    Vue的一些笔记 Vue是MVVM框架Vue2.x响应式数据原理Vue3.x响应式数据原理Vue2.x中如何监测数组变化nextTick的实现原理Vue的生命周期请求接口放在生命周期的位置v-model的原理Vue事件绑定原理Vue模板编译原理Vue2.x和Vue3.x渲染器的diff算法比较虚拟DOM以及key属性的作用keep-aliveVue中组件生命周期调用顺序SSRVue方面的性能优化 Vue是MVVM框架 MVVM:Model-View-ViewModel缩写Model:代表数据模型View:UI组件ViewModel:View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据 Vue2.x响应式数据原理 Vue在初始化数据时,会使用Object.defineProperty重新定义data中的所有属性,当页面使用对应属性时,首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行跟踪操作(发布订阅) Vue3.x响应式数据原理 Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数据的变化,并且多达13种拦截方法并且作为新标准将受到浏览器厂商重点持续的性能优化Proxy只会代理对象的第一层
  • vue面试题简化版
    1.​​​​​​Vue 双向绑定原理 mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 2.Vue 中 key 值的作用? 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟DOM。 3.Vue 组件间通信有哪些方式? Vue 组件间通信六种方式 props/$emit$emit/$onvuex$attrs/$listenersprovide/inject$parent/$children 与 ref 4.watch、methods 和 computed 的区别? watch 为了监听某个响应数据的变化。computed 是自动监听依赖值的变化,从而动态返回内容,主要目的是简化模板内的复杂运算。所以区别来源于用法,只是需要动态值,那就用 computed ;需要知道值的改变后执行业务逻辑,才用 watch。methods是一个方法,它可以接受参数,而computed 不能,computed
  • VUE使用详细教程
    1 基础知识 1 Vue的组件化思想 2 父子组件访问(对象方式) 3 插槽slot 4 作用域 2 模块化开发 P72 Webpack Loader https://www.webpackjs.com/loaders/ 可在这个官网查看需要使用的loader 将ES6转ES5 安装并使用Vue plugin 90-96 没看 Vue-cli 箭头函数 git常用操作 Vue-router 2基础知识介绍 H5的hash 在地址栏会出现# 号 H5的history 这种方式地址栏比较清晰 进入正文讲解vue-router 动态路由 路由的懒加载 路由嵌套 跳转页面时如何进行参数传递 $router与$route区别 导航守卫(动态修改标题) keep-alive遇见vue-router 实现TabBar 建立封装组件的思维,不断将内部内容抽象化 文件夹别名 Promise Promise.all的使用 Vuex Vuex目录结构管理 网络请求的封装 axios.all([]) 实现同步请求,完成之后再进行处理 axios实例 对网络请求进行封装 axios拦截器 请求拦截 响应拦截 项目开发 Github使用创建仓库 和项目 高级父子组件 之间通信示例 $event表示子组件传过来的信息,argument 包含了event传过来的信息和组件使用时传过来的index, index1
  • vue-router 详解
    文章目录 1、认识vue-router2、安装和使用vue-router3、路由的默认路径4、HTML5的History模式5、router-link属性介绍6、路由代码跳转7、动态路由8、路由懒加载9、嵌套路由实现10、传递参数的方式11、导航守卫的使用12、TabBar实现思路 1、认识vue-router 目前前端流行的三大框架,都有自己的路由实现: Angular的ngRouterReact的ReactRouterVue的vue-router vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/ vue-router是基于路由和组件的 路由用户设定访问路径的,将路径和组件映射起来。在vue-router的单页面应用中,页面的路径的改变就是组件的切换 2、安装和使用vue-router 第一步:安装vue-router npm install vue-router --save 第二步:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能) 导入路由对象,并且调用Vue.use(VueRouter)创建路由实例,并且传入路由映射配置在Vue实例中挂载创建的路由实例 使用vue-router的步骤:
  • 「2021」高频前端面试题汇总之Vue篇
    系列文章: 【1】「2021」高频前端面试题汇总之HTML篇 【2】「2021」高频前端面试题汇总之CSS篇 【3】「2021」高频前端面试题汇总之浏览器原理篇 【4】「2021」高频前端面试题汇总之计算机网络篇 【5】「2021」高频前端面试题汇总之Vue篇 【6】「2021」高频前端面试题汇总之React篇 【7】「2021」高频前端面试题汇总之JavaScript篇(上) 【8】「2021」高频前端面试题汇总之JavaScript篇(下) 【9】「2021」高频前端面试题汇总之性能优化篇 目录 系列文章: 一、Vue 基础1. Vue的基本原理2. 双向数据绑定的原理3. 使用 Object.defineProperty() 来进行数据劫持有什么缺点?4. MVVM和MVC的区别5. Computed和Watch的区别6. Computed 和 Methods 的区别7. slot是什么?有什么作用?原理是什么?8. 过滤器的作用,如何实现一个过滤器9. 如何保存页面的当前的状态10. 常见的事件修饰符及其作用11. v-if、v-show、v-html 的原理13. v-if和v-show的区别14. v-model 是如何实现的,语法糖实际是什么?15. v-model 可以被用在自定义组件上吗?如果可以,如何使用?16. data为什么是一个函数而不是对象17
  • 笔记中的笔记,聊聊尤大在vue3.0 beta直播里说了什么
    在vue3.0 beta直播过后一天,掘金就有了别人家的笔记,确实笔记做的很好,但是我想在这份笔记上,加上我看直播时的一些感受,去做自己的笔记 (我还是推崇多做自己的笔记,而不是单单只看别人的笔记,写笔记会让自己对知识点更加深刻,即使会花比较多的时间,但一些知识做笔记是很有必要的) 因为直播过后那两天有事,所以今天才把这份笔记整理出来 事实上一个月前我才重新看了去年和前年的vue conf并整理了笔记,这一次的直播也提到了之前提到的一些东西,所以可以先看我之前的笔记,或者去看之前的vue conf再来看这次的直播笔记 直播现在我看已经有录播了,不喜欢看文章的同学可以跳转至https://www.bilibili.com/video/BV1Tg4y1z7FH 那么就开始吧 全新文档RFC RFC全称request for comment,也就是请求评论 我们可以在github仓库上去查看vue3.0的设计细节,rfc传送门 当前beta的主要关注点是稳定性和第三方工具,库的支持 亮点 performance:性能的优化,这个在之前的两次vue conf上其实就说到了很多Tree-shaking support:vue的API都支持Tree-shaking,这个在之前的笔记中提到过,在Vue3.0中,采取了ES module imports按需引入的方式,通过这种方式
  • 2019前端Vue面试题(Vue篇)(上)
    2019前端面试题(Vue篇)(上) 近几年Vue的发展尤为迅速,在中小型的项目上应用广泛,而且也是我们在经历面试时的高频问题,所以我们要怎么去很好的回答这些Vue的面试题呢? 话不多说,直接看! 说一下Vue最大的特点是什么 或者Vue的核心是什么? 答:Vue的主要特点我觉得是组件化,第二个就是数据驱动, 组件化呢就是可以将页面和页面之间的需要复用的元素都看做成组件,这样我们在写页面的过程就相当于写组件,然后页面就是这些组件“拼接”起来的组件库。 数据驱动就是只需要我们关注数据层,只要它的数据变化,就会引起它的视图层变化,它会自动更新,至于如何操作dom,完全就交由vue自己去完成了,我们只需要关注数据的变化即可。 说一下Vue的基本常用指令有哪些吧 1.v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model) 2.v-for 格式: v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat),需 要注意从vue2开始取消了$index 3.v-show 显示内容 (同angular中的ng-show) 4.v-hide 隐藏内容(同angular中的ng-hide) 5.v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false) 6.v-else-if
  • Vue面试题(持续更新~)
    目录 1.Vue 框架的优点是什么?2.什么是 MVVM3.Vue 中组件之间传值的方法有哪些4.Vue 中常见的生命周期钩子函数有哪些?5.为什么 Vue 组件中 data 必须是一个函数?6.Vue 中 v-if 和 v-show 有什么区别?7.Vue 中 computed 和 watch 有什么区别?8.$nextTick 是什么?9.v-for 中 key 的作用是什么?10.Vue 的双向数据绑定原理是什么?11. 如何动态更新对象或数组的值?12.常用的事件修饰符有哪些?13.Vue 如何获取 DOM 元素?14. v-on 如何绑定多个事件?15. Vue 初始化页面闪动问题如何解决?16.Vue 如何清除浏览器缓存?17. Vue-router 路由有哪些模式?18.Vuex 是什么?有哪几种属性?19.你能讲一讲MVVM吗?20.你知道Vue3.x响应式数据原理吗?21.你的接口请求一般放在哪个生命周期中?22.说一下v-model的原理23.Vue事件绑定原理说一下24.Vue模版编译原理知道吗,能简单说一下吗?25.Vue2.x和Vue3.x渲染器的diff算法分别说一下26.再说一下虚拟Dom以及key属性的作用27.keep-alive了解吗28.Vue中组件生命周期调用顺序说一下29.SSR了解吗?30.你都做过哪些Vue的性能优化?31
  • 前端术语总结
    以下这些内容都是在各个网站、公众号、博客搜集过来的,原文链接太多了就不一一粘贴了,复制谷歌一下应该都可以搜到原文的。图片也是保留了原来作者的水印,可以搜索到原文的。文章目录前言一、***3.1.NSR3.2 ESR1.1 ***优点1.2 ***缺点1.*** && CSR2.Serverless ***3.附加二、物料库1.一开始开发时用的Element UI:2.阿里的飞冰截图:3.京东的通天塔:(可惜进不去了,还想看看是啥样的)4.美团的乐高:三、渐进式四、函数式1.函数的合成2.函数柯里化五、响应式1. 响应式界面的四个层次2. 响应式界面的基本规则六、[BFF](http://www.ayqy.net/blog/backend-for-frontend-bff/)七、微前端1、概念优势二.实现方案三、缺点四、总结八、大前端3.1 H5+原生混合开发3.2 js开发+原生渲染3.3 React Native3.4 Weex3.5 快应用自绘UI+原生Flutter1.概念2.出现原因3.跨平台方案简介4.大前端的趋势九、云端一体化概念十、直出1.概念2. 过程3. 优势十一、运行时,编译时1.运行时2.编译时前言前端术语总结:***、物料库、渐进式、函数式、响应式、BFF、微前端、大前端、云端一体化、直出、运行时、编译时等。一、***1.*** && CSRServer
  • vue整理笔记
    什么是vue生命周期? Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。 vue生命周期的作用是什么? 它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 vue生命周期总共有几个阶段? 它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。 第一次页面加载会触发哪几个钩子? 会触发 下面这几个beforeCreate, created, beforeMount, mounted 。 DOM 渲染在 哪个周期中就已经完成? DOM 渲染在 mounted 中就已经完成了。 vue获取数据在哪个周期函数 一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 时候才能操作. created和mounted的区别 答:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。 mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。 vue初始化页面闪动问题 答:使用vue开发时,在vue初始化之前,由于div是不归vue管的
  • Vue高频面试题(一)
    1、说说你对 SPA 单页面的理解,它的优缺点分别是什么? SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。 优点: 用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染; 基于上面一点,SPA 相对对服务器压力小; 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理; 缺点: 初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载; 前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理; SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。 2、v-show 与 v-if 有什么区别? 1、v-show的元素开始修改会被渲染并留在DOM中。。 2.v-if是惰性的,如果在初始渲染的条件为假,则什么都不做,直到条件第一次为真时,才会开始渲染。 3.v-if有更高的切换消耗;v
  • Vue 2.x 面试题(2)
    1. 讲一讲 MVVM MVVM 是 Model-View-ViewModel 缩写,也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型,View 代表 UI 组件,ViewModel 是 View 和 Model 层的桥梁,数据会绑定到 viewModel 层并自动将数据渲染到页面中,视图变化的时候会通知 viewModel 层更新数据。 2. 简单说一下 Vue2.x 响应式数据原理 Vue 在初始化数据时,会使用 Object.defineProperty 重新定义 data 中的所有属性,当页面使用对应属性时,首先会进行依赖收集(收集当前组件的 watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。 3. Vue3.x 响应式数据原理 Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化,并且有多达 13 种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。 ❝ Proxy 只会代理对象的第一层,那么 Vue3 又是怎样处理这个问题的呢?❞ 判断当前 Reflect.get 的返回值是否为 Object。如果是,则再通过 reactive 方法做代理, 这样就实现了深度观测。 ❝ 监测数组的时候可能触发多次 get/set
  • 文本超过指定行数折叠
    本文发布于我的个人网站:https://wintc.top/article/58,转载请注明。 多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看,于是就写了一个Vue的组件,本文简单介绍一下实现思路。 组件可以通过npm安装使用,需要的同学可以尝试一下: 组件地址:https://github.com/Lushenggang/vue-overflow-ellipsis 在线体验:https://wintc.top/laboratory/#/ellipsis 一、需求描述 长度不定的一段文字,最多显示n行(比如3行),不超过n行正常显示;超过n行则在最后一行尾部显示“展开”或“查看全部”之类的按钮,点击按钮则展开显示全部内容,或者跳转到其它页面展示所有内容。 预期效果如下: 二、实现原理 纯CSS很难完美实现这个功能,所以还得借助JS来实现,实现思路大体相似,都是判断内容是否超过指定行数,超过则截取字符串的前x个字符,然后然后和“...查看全部”拼接在一起,这里的x即截取长度,需要动态计算。 想通过上述方案实现,有几个问题需要解决: 怎样判断文字是否超过指定行数如何计算字符串截取长度动态响应,包括响应页面布局变动、字符串变化、指定行数变化等 下面具体研究一下这些问题。 1. 怎样判断一段文字是否超过指定行数?
  • 十、vue-router学习笔记——认识路由、vue-router基本使用、vue-router嵌套路由、vue-router参数传递、vue-router导航守卫、keep-alive
    一、认识路由 1.1 什么是路由? 说起路由你想起了什么? 路由是一个网络工程里面的术语。 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. — 维基百科 额, 啥玩意? 没听懂 在生活中, 我们有没有听说过路由的概念呢? 当然了, 路由器嘛. 路由器是做什么的? 你有想过吗? 路由器提供了两种机制: 路由和转送. 路由是决定数据包从来源到目的地的路径.转送将输入端的数据转移到合适的输出端. 路由中有一个非常重要的概念叫路由表. 路由表本质上就是一个映射表, 决定了数据包的指向. 1.2 后端路由阶段 早期的网站开发整个HTML页面是由服务器来渲染的. 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示. 但是, 一个网站, 这么多页面服务器如何处理呢? 一个页面有自己对应的网址, 也就是URL.URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.这就完成了一个IO操作. 上面的这种操作, 就是后端路由. 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端.这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示
  • 「面试题」20+Vue面试题整理
    0.那你能讲一讲MVVM吗? MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。 Model层代表数据模型View代表UI组件ViewModel是View和Model层的桥梁 数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。 1.简单说一下Vue2.x响应式数据原理 Vue在初始化数据时,会使用Object.defineProperty重新定义data中的所有属性,当页面使用对应属性时,首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。 2.那你知道Vue3.x响应式数据原理吗? (还好我有看,这个难不倒我) Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化,并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。 Proxy只会代理对象的第一层,那么Vue3又是怎样处理这个问题的呢? (很简单啊) 判断当前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理, 这样就实现了深度观测。 监测数组的时候可能触发多次get/set,那么如何防止触发多次呢?
  • vue2.0经典高频面试题@小四 - 王云飞
    1、vue是一套渐进式框架的理解 在我看来,渐进式代表的含义是:主张最少。 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。 比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西: 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免) 所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。 比如React,它也有一定程度的主张,它的主张主要是函数式编程的理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为它是软性侵入。 Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。 渐进式的含义,我的理解是:没有多做职责之外的事。 2、Vue常用的指令 3
  • 面试——关于vue
    1、生命周期 vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。 vue生命周期可以分为八个阶段,分别是: beforeCreate(创建前) 在实例初始化之后,数据观测者( data observer)和 event/ watcher事件配置之前调用。 created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来 beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。 mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。 beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。 updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新
  • Vue技术栈个人总结整理
    Vue知识点整理 基本使用 插值, 表达式 /** * 1. 插值表达式: Vue中使用双大括号语法"{{ }}" * 2. 在{{ }}之间可以写变量和一些简单的js运算,但是不支持语句和流控制 * 3. */ <div>{{message}}</div> <div>{{count / 10}}</div> <script> export default{ data() { return { message: "Hello World!", count: 100 } } } </script> 指令,动态属性 由于指令内容过多,这里就不一一列举… v-html: 存在XSS风险,会覆盖子组件 /** * v-html可以渲染一个html文本字符串,但是在使用v-html之后会覆盖掉该节点内部的子元素节点 * v-html存在XSS的风险 */ <p v-html="rawHtml"> <span>有 XSS 的风险</span> <span>【注意】使用v-html之后,将会覆盖掉子元素</span> </p> // ... data() { return { rawHtml: "指令: v-html <b>加粗</b> <i>斜体</i>" } } computed computed计算属性: 当使用method方法时,只要将方法使用到了模板上,当每一次发生了变化