Vue_note

对MVVM的理解

MVVM是Model、View、ViewModel三者的缩写;

  • Model:代表数据模型,数据和业务逻辑都在Model层中定义;
  • View:代表UI视图,负责数据展示;
  • ViewModel:就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
    ViewModel就是View与Model的连接器,View与Model通过ViewModel实现双向绑定。

vue实现双向绑定的原理

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

Vue与Angular以及React的三者之间的区别

与AngularJS的区别:
相同点:都支持指令(内置指令和自定义指令);都支持过滤器(内置过滤器和自定义过滤器);都支持双向绑定;都不支持地段浏览器。
不同点:AngularJS的学习成本高;而Vue.js本身提供的API都比较简单、只管;在性能上,AngularJS以来对数据做账检查,所以Watcher越多越慢;Vue.js使用基于依赖追踪的观察并且使用异步队列更新,所有的数据都是独立触发的。
与React的区别:
相同点:React采用特殊的JSX语法,Vue.js在组建开发中也推崇写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用;中心思想相同:一切都是组件,组件实例之间可以嵌套;都提供合理的钩子函数,可以让开发者定制化地去处理需求;都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载;在组件开发中都支持mixins的特性。
不同点:React采用的Virtual DOM会对渲染出来的结果做脏检查;Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作Virtual DOM。

vue等单页面应用及其优缺点

单页面应用(SPA)
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。

多页面应用(MPA)
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新。

单页面的优点:
用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小。
前后端分离。
页面效果会比较炫酷(比如切换页面内容时的专场动画)。
单页面缺点:
不利于seo。
导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)。
初次加载时耗时多。
页面复杂度提高很多。

怎么定义vue-router的动态路由?获取传值?

定义:在router目录下的index.js文件中,对path属性增加/:id
获取:使用router对象的params.id

vue如何获取并操作dom对象

在标签上添加ref=‘myBox’,然后在代码中this.$refs.myBox

<template>
    <div ref="myBox">
        <h1>首页标题</h1>
    </div>
</template>
<script>
    export default {
        name: "Home",
        mounted(){
            this.$refs.myBox.style.color = 'red'
        }
    }
</script>
<style scoped>
    div{
        background: pink;
    }
</style>

vue-loader是什么?使用它的途径有哪些?

vue-loader作用:
解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理
用途:
js可以写es6,style样式可以写scss或less、template可以加jade等

vue组件间传递方法

props:子组件的模板内并不能直接使用父组件的数据,所以子组件需要用props选项来获取父组件的数据

1- 动态语法:用v-bind将动态props绑定到父组件的数据,父组件的数据发生改变,子组件也会随之改变

<div id="app">
    <didi-component  :msg="value"></didi-component>//传入获取的数据,引号里面为获取到的数据
</div>
<script>
    window.onload=function(){
        Vue.component('didi-component',{
            template:"<div>这是组件:{{msg}}</div>",
            props:['msg']            //声明自己要从父组件获取的数据
        });//全局注册组件
        new Vue({
          el:'#app',
          data: {
            value:'父组件向子组件的传递数据'
          }
})
2-绑定修饰符:props默认为单向绑定,是为了防止子组件无意间修改父组件的状态。
.sync:双向绑定
.once:单次绑定
<div id="app">
    <input type="text" v-model="info.name"/>
    <child :msg.once="info"></child>        //单次绑定
</div>
<script>
    window.onload=function(){
        new Vue({
          el:'#app',
          data:function(){
              return {
                  info:{
                      name:"顺风车"            //父组件
                  }
              }
          },
          components:{
               child:{
                   props:['msg'],
                   template:"<div>{{msg.name}}欢迎!</div>"    //子组件
               }
          }
 
})
}

vue如何定义过滤器?

new Vue({
    filters:{
      myCurrency:function(myInput){
        return 处理后的数据
      }
    }
  })

v-if和v-show的区别

v-if
它是惰性的,只有值为真的时候才会被选渲染。
如果从值 从 true 改变 为 false 则元素就会被销毁。
如果又从 false 改变 true 则元素会被重建。

v-show
它不管初始条件是什么,元素总是会被渲染。
它的值的变化,只是对 css display 属性的切换。

那么如何选择使用 v-if和v-show呢?
频繁切换的元素使用v-show。
条件很少改变,则使用 v-if 较好。

vue中常用的指令:

插入文本:v-text
相当于元素的innerText属性,必须是双标签

插入HMTL:v-html
相当于元素的innerHTML属性

循环:v-for
v-for的使用,除了item属性,还有一些其他辅助属性。假设你现在循环的对象名字为students:

如果students是数组,还有index属性,如v-for=“(item,index) in students”;
如果students是对象,还有value,key属性,如v-for=“(value,key,index) in students”;

条件渲染
第一种:if … else if …else型
是否插入元素

第二种:v-show
是否隐藏元素

属性绑定:v-bind
v-bind:属性名=“常量 || 变量名”,简写形式——:属性名=“常量 || 变量名”

双向绑定:v-model
所谓的双向绑定,就是你在视图层里面改变了值,vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。

vue常用事件修饰符:

.stop 防止事件冒泡
冒泡事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从内至外 子节点-》父节点的点击事件

.prevent取消默认事件
.prevent等同于JavaScript的event.preventDefault(),用于取消默认事件。比如我们页面的<a href="#">标签,当用户点击时,通常在浏览器的网址列出#:

.capture 捕获事件
捕获事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从外至内 父节点-》子节点的点击事件

v-on可以绑定多个方法吗

<input
     type="text"
     v-on="{
     input:onInput,
     focus:onFocus,
     blur:onBlur,
     }"
   >

Vue的生命周期函数都有哪些?什么时候调用?

(1)beforeCreat
第一个生命周期函数,表示实例在完全创建出来之前会执行它,在执行它时,data和methods中的数据都还未初始化。

(2)created
第二个生命周期函数,此时data和methods已经初始化完成,created()完成之后,vue开始编译模板,最终在内存中生成一个编译好的最终模板字符串,然后把模板字符串渲染为内存中的dom

(3)beforeMount
第三个生命周期函数,表示模板在内存中已经编译好了,但是并没有渲染到页面中。页面显示的还仅仅是模板字符串

(4)Mounted
第四个生命周期函数,此时内存中的模板已经真实的挂载到了页面中,用户可以看到渲染好的页面了

运行中的两个事件

(5)beforeUpdated()
执行它时,data中的数据已经被更新了,但是页面中的data还未被替换过来

(6)updated()
执行它时,页面和data中的数据已经同步了

对keep-alive 的了解

是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

与 相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive 。

keep-alive生命周期钩子函数:activated、deactivated

使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。

被包含在 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated

activated:在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。

deactivated:在组件被停用时调用。

注意:只有组件被 keep-alive 包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。

什么时候获取数据?

当引入keep-alive 的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

route和router的区别?

route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。 而router是“路由实例”对象包括了路由的跳转方法,钩子函数等。

vue.js的核心特征是什么?

数据驱动、组件系统

数据驱动:ViewModel,保证数据和视图的一致性。

组件系统:应用类UI可以看作全部是由组件树构成的。
5.vue等单页面应用及其优缺点?
优点:
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。

数据驱动
组件化
轻量
简洁
高效
模块友好
页面切换快
缺点:
不支持低版本的浏览器,最低只支持到IE9;
不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);
首屏加载耗时相对长一些;
不可以使用浏览器的导航按钮需要自行实现前进、后退。

$nextTick的使用

Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值