-
v-model 基本原理 ？(回顾)
v-model主要提供了两个功能： 1. view层输入值影响data的属性值， 2.data属性值发生改变会更新view层的数值变化。 以下以input控制绑定v-model举例说明。 <div id="app"> <p>name</p> <input type="text" v-model="n…- 774
- 0
-
vue路由守卫（回顾）
路由守卫 路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫（navigation-guards）。官方定义：导航守卫（navigation-guards）。 文档地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 一、…- 604
- 0
-
前端JS、CSS版本控制
前言 最近面试，问道js,css版本控制问题，一时间忘记，没答上来，下来查阅资料，整理一下。 问题 用户 首次 通过浏览器打开网页时都会对 JS、CSS 文件 进行缓存，以便在下次打开时可以直接从缓存中取出，而不用重复地向服务器 再次请求；当用户再次通过浏览器浏览某个网页，浏览器在加载网页中包含的各个资源（JS、css、图片）时，先会判断缓存中是否已经包含了此资源（当然这与Header中定义的Ca…- 595
- 0
-
vue中基本事件的处理 ？
1. vue中如何使用事件 使用v-on绑定对应事件，并且调用对应methods的方法。例如： <div id="app"> count count>10?"大于10":"不大于10" <button type="button" @click="addbtnfn()&q…- 745
- 0
-
vue 中使用 v-bind 与 v-on 来实现 v-model 双向绑定 ？
Vue — 使用v-bind与v-on实现v-model v-model其实是一个语法糖，他的背后本质包含两个操作： 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件 实现步骤如下： ① 通过v-bind实现，若修改app.message，则使得网页显示的input中的value也发生改变。 <body> <div id="app&q…- 777
- 0
-
vue中 v-on 和 v-bind 的区别 ?
v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href <!-- 完整语法 --> <a v-bind:href="url">123</a> <!-- 缩写 --> <a :href="url">123</a> v-on 指令用于绑定HTML事件 ：v-on:c…- 734
- 0
-
vue模板语法{插值表达式}的用法
插值表达式是什么？ 对比： jQuery中：text( )函数 原生Js中：innerHTML Vue中： message <div id="app"> message </div> 这段代码的意思可以用原生js的思路理解为，一个父元素id：app，现在设置他的innerTEXT，设置内容为变量message export defa…- 709
- 0
-
vue中el是什么？
vue官方API文档 对el描述：https://cn.vuejs.org/v2/api/#el el 的作用大家都知道，用于指明 Vue 实例的挂载目标。我们重点关注上面两个红色叹号部分，总结一下就是：如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版 <!DOCTYPE html>…- 1k
- 0
-
mvc 和 mvvm 的区别和应用场景？
1. MVC MVC 是 Model View Controller 的缩写 Model：模型层，是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。 View：视图层，用户界面渲染逻辑，通常视图是依据模型数据创建的。 Controller：控制器，数据模型和视图之间通信的桥梁，通常控制器负责从事图读取数据，控制用户输入，并向模型发送数据。 MVC的思想：Control…- 1.3k
- 0
-
Vue 里的 computed 和 watch 的区别 ?
一. 相同点： computed和watch都是观察页面的数据变化的。 二. 不同点： 计算属性computed（一对多，一对一） 计算属性将会混入到Vue的实例当中，所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 1、监控自定义的变量，这个变量不可以和data、props里面的变量重复； 2、computed属性的属性值是函数默认走get方法（必须有返回值…- 786
- 0
-
vue实现路由懒加载几种方式
一、为什么需要路由懒加载 vue在项目打包之后，会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件，这里主要存放的是整个项目的业务逻辑代码。随着项目不断的开发迭代，业务逻辑越来越多，app.js文件也会越来越大。在线上就会容易出现进入首页时所需时间过长或者出现白屏的问题。 使用路由懒加载可以分割代码，提高初始页的加载效率。 二、路由懒加载的方式 1、使用ES6的impor…- 806
- 0
-
vue中 不更新视图的处理办法？
方案一：利用Vue.set(object,key,val) 例：Vue.set(vm.obj,'key','value') 方案二：利用this.$set(this.obj,key,val) 例：this.$set(this.obj,'key','value') 方案三：利用Object.assign({}，this.…- 922
- 0
-
Vue项目优化首页加载速度
一、路由懒加载 { path: '/index', component: () => import('@/views/index'), //懒加载-访问该页面才加载 } 这一步之后，打包后会发现很大的chunk-vendors.xxxxxxx.js不见了，其实是分成了不同的js文件 二、使用CDN引入 <script src="http…- 833
- 0
-
vue是如何获取元素节点 ？
Js中：用document.getElement之类的语句来操作dom; vue：使用vue提供的api，用 ref 来获取节点； 首先先用ref在元素上面做一个标记，然后用this.$refs.标记名来获取元素 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l…- 766
- 0
-
delete和Vue.delete的区别
delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变,length长度不会改变。 Vue.delete 直接删除了数组 改变了数组的键值。 length长度改变了 代码片段: <script> var a=[1,2,3,4] var obj=[1,2,3,4] delete a[1] console.log(a) vue.delete(o…- 820
- 0
-
Vue 组件间通信六种方式
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如prop…- 705
- 0
-
vue核心面试题：组件中的data为什么是一个函数
一、总结 1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。 2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。 3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这…- 719
- 0
-
vuex的mutation和action的区别和使用
mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数： this.$store.commit(“mutation函数名…- 805
- 0
-
vuex最简单、最详细的入门文档
我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 : <!--父组件中引入子组件--> <template> <div> <a href=…- 697
- 0
-
小程序里面的双向绑定和vue中的双向绑定有什么区别？
小程序中的数据双向绑定 . 首先通过 bindinput 绑定文本框的输入事件 . 在 data 中声明一个变量 content ，将其动态绑定成文本框的 value 值 . 在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值 . 通过 this.setData 将文本框最新的 value 值 赋值给…- 946
- 0
-
Vue3.0 起跑 搭建项目后应用 系列二
Vue3.0部分知识点 项目目录结构 |-node_modules -- 所有的项目依赖包都放在这个目录下 |-public -- 公共文件夹 ---|favicon.ico -- 网站的显示图标 ---|index.html -- 入口的html文件 |-src -- 源文件目录，编写的代码基本都在这个目录下 ---|assets -- 放置静态文件的目录，比如logo.pn就放在这里 ---|…- 1k
- 0
-
Vue3.0 起步 快速搭建项目 系列一
常常说要开始学习，却总是止于嘴。 一起开始学习吧 . . . 1 安装脚手架 npm install -g @vue/cli # OR yarn global add @vue/cli 2 检查版本 Vue CLI v4.5.7 vue -V 3 搭建项目 vue create vue3.0 ? Please pick a preset: (Use arrow keys) //请选择预选项 &…- 983
- 0
-
Vue SEO的四种方案
众所周知，Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案，通过查找资料，大概有以下4种方法。 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染：Vue官网介绍 ，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。 使用SSR权衡之处： 开发条件所限，浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外…- 995
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×