前端组件 | 易学教程

vue面试题（一）

阅读更多关于 vue面试题（一）

1.v-show与v-if的区别 v-show：操作的是元素的display属性 v-if：操作的是元素的创建和插入 v-if有更高的开销，而v-show有更高的初始化渲染开销，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好使用场景： v-show：前台数据的展示 v-if：管理系统权限列表地展示 2.methods、computed、watch三者区别三者之间地共同点：methods、watch和computed都是以函数为基础的 computed与watch都是以Vue的依赖为基础，当所依赖的数据发生变化的时候会触发相关的函数去实现数据的变动 methods里面是用来定义函数的，需要手动才能执行，不像computed与watch“自动执行”函数三者之间的不同点： computed： 1.computed是一个计算属性，computed所依赖的属性发生变化时，计算属性才会重新计算，并进行缓存。当其他数据发生改变的时候，computed属性不会重新计算。从而提升性能 watch： 1.watch类似与事件监听+事件机制 2.watch的方法默认是不会执行的，只有所依赖的属性发生变化才会执行的 3.watch默认第一次是不会执行的，通过声明immediate选项为true，可以立即执行一次 handler 4

VUE vue面试题

阅读更多关于 VUE vue面试题

看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是否有真才实学还是刚好背中了这道面试题。（都是一些基础的vue面试题，大神不用浪费时间往下看）一、对于MVVM的理解？ MVVM 是 Model-View-ViewModel 的缩写。 Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM

vue面试题

阅读更多关于 vue面试题

要招一个会vue的开发者：作为面试官的你，你还会每次都只是问这些老土的问题吗？你对MVVM的理解是什么？你知道什么是双向绑定吗？你了解它的原理吗？说说vue的生命周期有哪些？组件通讯有哪些？你用过vuex吗？ ... 作为面试者的你，在网上搜索下“vue面试题及答案”，看完后你是不是觉得：自己掌握了武林秘籍？能忽悠住面试官了？我熟练掌握vue了？记一次印象深刻的面试面试过很多小伙伴（要招会vue的开发者），没工作经验的，5年工作经验的，甚至10多年工作经验的...让我印象最深，也觉得最为经典的一个面试：有一天，来了一位5年前端工作经验的小伙子，在很多项目中使用过vue的面试者，故事就从这里开始了：（开篇省略N多对话……）我：看你简历上说你在项目中有用到过vue对吗？小伙子：有啊，我们项目中就有用到过…… 我：你认为你对vue的理解到什么程度？（对自我的认知）小伙子：做过很多项目，基本上都了解了，很熟练我：不错，那我问下你 “vue为什么要求组件模板只能有一个根元素？” 小伙子：恩……没在意过我：没关系，那 “你了解vue的diff算法吗？” 小伙子：恩……没用到过我：没事，那我再问下你，“在.vue文件中style是必须的吗？那script是必须的吗？为什么？” 小伙子：恩……(此时小伙子有点着急了，说) 小伙子

vue-cli项目下引入vant组件

阅读更多关于 vue-cli项目下引入vant组件

前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。 vant地址： https://youzan.github.io/vant/#/zh-CN/intro 本章目标在vue-cli的项目中使用vant的相关组件项目构建如果您还没有搭建vue-cli项目，那么请参考 https://www.cnblogs.com/jjgw/p/11334797.html 这篇文章,我们搭建好的vue-cli项目结构如下： 1.接下来我们在控制台输入安装vant的命令　　 npm i vant -S ：这是简写形式。　　npm install vant --save :这是完整写法。 2.安装完成之后的结果 3.如果您不确定是否安装成功，那么我们可以去node_modules中查看 4.接下来我们还需要安装一个插件，方便我们之后优雅的使用vant,在控制台输入 npm i babel - plugin - import - D 或者 npm install babel - plugin - import -- save - dev 5.接下来我们去

vue基础

阅读更多关于 vue基础

指令，事件 //指令5 <input v-model="msg"></input> 双向数据数据 <div v-text="msg"></div>与{{msg}}功能一样，但前面那个的好处是网速慢的时候也不会看到小胡子，另一个网如果不好会看到小胡子 <div v-once>{{content}}</div> 只绑定一次，以后不会再受数据变化就更新了 <div v-html="msg"></div> 把HTML字符当HTML代码渲染，如msg:"<p>hello</p>"页面显示就是hello，但如果用小胡子显示数据的话就是<p>hello</p> <li v-for="(item,index) in list"></li>要循环谁就在谁身上添加该属性,item就是当前项，index是索引 //事件 v-on:click="函数名"可以简写成@click="函数名"。函数名要在methods里注册 1. vue会自动给函数传递事件源，即如果绑定事件的时候后面什么都不写，methods里面的方法可以直接拿到事件源e。 <button @click="fn">点我呀</button> methods:{ fn:function (e) {console.log(e)} } 2. 如果写了()想要拿到事件源则绑定函数时括号里需要写$event作为第一个参数 <button @click=

vue-3.2-组件的三种定义方式

阅读更多关于 vue-3.2-组件的三种定义方式

1. 什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来需要什么样的功能，就去调用对应的组件即可； 2. 模块化：是从代码的角度进行划分的；方便代码分层开发，保证每个模块的职能单一； 3. 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用！定义组件的三种方式：　　第一种： <body> <div id="app">  <mycom1></mycom1> </div> <script> // 1.1 使用 Vue.extend 来创建全局的 Vue 组件 var com1 = Vue.extend({ template:'<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构 }) // 1.2 使用 Vue.component('组件的名称'，创建出来的组件模板对象) // Vue.component('myCom1', com1) // 如果使用 Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，使用 - 链接； // 如果不适用驼峰

vue梳理（1）

阅读更多关于 vue梳理（1）

单选/复选 <div id="app">  喜欢谁？<input type="checkbox" v-model="a" value="北京">北京 <input type="checkbox" v-model="a" value="天津">天津 <input type="checkbox" v-model="a" value="上海">上海 {{a}} </div> <script> var vm=new Vue({el:"#app", data:{a:[]}}) </script> 单选框也这么写 - vuetools工具下载工具地址https://github.com/arcliang/Vue-Devtools- 通过git下载到本地打开谷歌浏览器-更多工具-扩展程序。直接将Chrome文件夹拖拽到扩展程序区域，浏览器会自动识别安装右上角会出现灰色vue图标，以后运行vue程序时他就会亮了使用控制台会出现vue项，点击其中的root会看到所有挂在根实例上的内容vue中的动态绑定 <img :src="item.img" alt="">这样动态绑定的右边是变量

使用webstorm搭建vue-cli项目

阅读更多关于使用webstorm搭建vue-cli项目

前言随着vue在前端不断的壮大，越来越多的前端工程师使用vue了，作为大型项目的开发，vue-cli是不二之选，所以这篇博客是为搭建vue-cli所写，想要搭建vue-cli项目就必须先有git,node.js,webpack, git地址： https://git-scm.com/ node.js地址： http://nodejs.cn/ 本章目标使用websotm搭建vue-cli项目,前提安装有git,node.js，webpack等等，否则无法实现项目搭建然后下面这一段可能会比较久是否选择vue-router，这里我们选择是，待会后面我们会用到是否使用eslint检查，这里我们选择否是否选择单元测试，这里我们也选择否是否选择e2e测试，这里我们选择是是否使用npm包管理器然后项目就搭建完成了，接下来我们需要选择安装包假如您的网速比较慢的话，我们可以在控制台中输入 cnpm install 当所有安装包下载完成之后我们就可以启动我们的项目了在地址拦输入http://localhost:8088，如何出现如下界面，那么恭喜你搭建成功了接下来，我们对vue-cli中的各个项目进行分析，方便我们以后的开发中能够更好的进行管理项目目录: |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 |

我理解的业务型组件

阅读更多关于我理解的业务型组件

这里对于说以下我之前对于业务型组件有一点误解,把他认为是微前端的一个子项目,具体指的是这个业务型组件不仅封装了界面还封装了具体业务,同时将model层也封装进来业务型组件指的是在移动端通用组件之上的薄薄一层,具体是指利用饿了吗 iview等组件结合具体行业使用场景所开发的一个固定的界面,该界面封装了用户行为,并输出用户的最终表达意志。它只是一层view，并不涉及到model层他的好处：　　着眼与整个行业来说,比如说培训行业比如说餐饮行业，每个行业都有不同的企业开发自己的产品,但是基于共同的行业属性,他们的业务逻辑自然在某些方面会发生重叠，这表现在web上通常就是界面布局和交互的高度一致,如果这些高度统一的界面统一编写成一套业务型组件,并提供换肤和字体大小切换机制。相信一定对于节省重复开发有一定的帮助如何界定业务型组件：　　因为业务型组件是与行业属性高度相关的,所以对于一个项目中哪些属于业务型组件应该由产品人员来确定,产品人员基于自身的项目经验和对于行业规则用户行为的深度透视,可以抽离出那些通用的部分。业务型组件开发原则：　　提供一套基础的默认的布局和样式风格　　换肤字体元素外观容器padding等均可定制化　　利用props定制用户行为规则-比如说某一个元素可以隐藏更深一步：　　前面说到是基于行业属性来定制的业务型组件

VUE插件总结

阅读更多关于 VUE插件总结

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight -

订阅前端组件