目录

简介

特点

MVVM

双向数据绑定原理

生命周期

vue实例初始化阶段

beforeCreate

created

vue实例挂载阶段

beforeMount

mounted

vue实例更新阶段

beforeUpdate

updated

vue实例销毁阶段

beforeDestroy

destroyed   

模板语法

1、{{}}文本渲染

2、v-html解析代码片段

3、v-bind属性渲染

4、v-on事件渲染

5、js表达式

6、v-if条件渲染

7、v-show条件渲染

面试题：v-if和v-for的区别

8、v-for列表渲染

9、style绑定

10、class绑定

11、代码模板

面试题：为什么在大型项目中data是一个函数而不是一个对象

简介

Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。用来做单页面应用--index.html,页面跳转用的vue插件路由来实现跳转。

特点

1、前端三大主流框架之一 vue react Angular

2、轻量级框架 体积更小

3、生态圈广泛，适合初学者

4、基于mvvm模式，可以实现双向数据绑定

MVVM

Model：数据模型---data

View：视图

VM ViewModel：连接视图和数据模型的纽带。

        数据模型发生变化，vm通知视图进行相应的修改；

        视图发生了变化，vm通知数据模型进行相对应的修改。

双向数据绑定原理

ViewModel中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。   

优化渲染：当前数据模型发生改变只改变对应的视图，只渲染对应的视图层

生命周期

生命周期的第一步首先是创建vue实例，并且进行初始化。

部署OVF模板时展示EULA的指导 简述ovf和ova模板_Vue

vue实例初始化阶段

beforeCreate

        在初始化的时候调用了beforeCreate，完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能访问数据模型中的data和methods中的方法。

created

        在初始化完毕之后，完成vue的数据注入以及数据监听操作，该构造的执行意味着vue实例创建完毕，可以进行data数据模型和和methods方法的访问。

vue实例挂载阶段

beforeMount

        在created之后，vue会判断实例中是否含有el属性，如果没有vm.$mount(el)，接着会判断是否含有template属性，如果有将其解析为一个render function,如果没有将el指定的外部html进行解析。这里只完成了模板的解析但是数据并没有绑定到模板中。

mounted

        创建vm.$el替换el,实际上完成的是数据绑定操作，在其间执行了render函数，将模板进行了解析，将数据进行了动态绑定。

vue实例更新阶段

beforeUpdate

        更新虚拟dom节点

updated

        完成了页面的重新渲染

vue实例销毁阶段

beforeDestroy

        销毁之前调用，此时可以访问vue实例

destroyed   

        完成了监听器，子组件，事件监听等移除，销毁vue实例对象。

模板语法

1、{{}}文本渲染

也可以使用v-once，执行一次性地插值，当数据发生改变，插值出的内容不会更新

{{msg}}
<div v-once>{{msg}}</div>

2、v-html解析代码片段

该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染。

<div v-html="url"></div>
data:{
        url:"<a href='https://www.baidu.com'>百度一下</a>",
}

3、v-bind属性渲染

<div v-bind:title="title">v-bind绑定变量</div>
<div :title="title">v-bind绑定变量简写形式</div>
data:{
        title:'我是鼠标悬浮才会显示的标题',
}

4、v-on事件渲染

<div>{{count}}</div>
<button v-on:click="toAdd">点我count++</button>
<button @click="toDel">点我count--</button>
methods: {
        toAdd(){
                this.count++;
        },
        toDel(){
                this.count--;
        }            
}

5、js表达式

<div>{{String(count)}}</div>
<div>{{Number(msg)}}</div>
<div>{{count+5}}</div>
<div>{{msg.split('')}}</div>
data:{
        msg:'我是数据模型属性',
        count:0,
}

6、v-if条件渲染

<div v-if="isLogin">请登录</div>
<div v-else-if="install">欢迎您</div>
<div v-else>测试</div>
data:{
        isLogin:false,
        install:true,
}

7、v-show条件渲染

<div v-show="isLogin">v-show条件渲染</div>
data:{
        isLogin:true,
}

面试题：v-if和v-show的区别

1）v-if支持v-else-if、v-else，v-show 不支持 v-else。

2）v-if对应的是元素/标签的添加或者删除。

满足条件添加元素/标签，不满足条件删除元素/标签

3）v-show对应的是元素的CSS样式中的display属性。

满足条件对应的是元素的显示 display:block，不满足条件对应的是元素的隐藏 display:none

4）v-show 不管初始条件是啥，元素总会被渲染。v-if 只有条件变为真时，才会开始渲染条件块。

5）v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

8、v-for列表渲染

不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。key 具有唯一标识当前组件不被复用。

<ul>
        <li v-for="(item,index) in Animal" :key="index">{{item}}--{{index+1}}</li>
</ul>
data:{
        Animal:['兔子','老虎','狮子'],          
}

9、style绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<div id="app">
        <!-- 对象 -->
        <div :style="styleObj">hello</div>
        <!-- 对象 -->
        <div :style="{color:currentColor}">world</div>
        <!-- 对象，只生效写在后面的属性 -->
        <div :style="styleObj,styleObj1">hello world</div>
        <!-- 数组，属性重复时，写在后面的属性覆盖前面的属性 -->
        <div :style="[styleObj,styleObj1]">hello world</div>
    </div>
data:{
        currentColor:'blue',
        styleObj:{
                color:'red',
                 'font-size':'30px',  // 属性命中有'-'要用引号引起来
        },
        styleObj1:{
                backgroundColor:'cyan',
                color:'yellow'
        }
}

部署OVF模板时展示EULA的指导 简述ovf和ova模板_数据_02

10、class绑定

<div id="app">
        <div class="red">hello</div>
        <!-- 动态绑定类名 -->
         <!-- 对象 -->
        <div :class="{red:false,size:true}">world</div>
         <!-- 数组 -->
        <div :class="[{red:false},{size:true},{bgc:true}]">hello world</div>
    </div>
<style>
        .red{
            color:red;
        }
        .size{
            font-size: 28px;
        }
        .bgc{
            background-color: blanchedalmond;
        }
</style>

部署OVF模板时展示EULA的指导 简述ovf和ova模板_部署OVF模板时展示EULA的指导_03

11、代码模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    // 创建DOM节点
    <div id="app"></div>
    <script>
        // 创建一个Vue实例对象
        new Vue({
            // Vue实例与DOM节点进行绑定
            el:'#app',
            // 存放Vue变量
            data:{

            },
            // 存放函数
            methods: {
               
            },
        })
    </script>
</body>
</html>

面试题：vue是单页面还是多页面，优缺点？

单页面

优点:

1、良好的交互体验

        因为是局部渲染，每个部分是单独的模块。避免了不必要的跳转和重复渲染

2、前后端分离，提高开发效率，架构清晰。

3、减轻服务器的压力。

        服务器只需要提供数据，不需要管前端逻辑和页面渲染，提高了性能。

缺点:

1、可能出现首屏加载时间过长的问题

        因首屏加载时间过长导致白屏，如何解决？
        1) 使用loading动画
          白屏时显示转圈的动画，数据请求完毕时隐藏动画，显示页面。
        2) 可以利用骨架屏效果
          将最终需要显示的页面简化，编写出简化版的布局，数据请求完毕时隐藏骨架，显示页面。
        3) 可以使用nuxt服务端渲染技术，减少浏览器压力

2、对SEO并不友好    

        搜索引擎的爬虫的原理就是抓取的url，然后获取html源代码并解析。而对于vue来说，爬虫获取到的html是模型页面而不是最终数据的渲染页面。可以使用nuxt框架解决seo问题。

面试题：为什么在大型项目中data是一个函数而不是一个对象

组件是一个可复用的实例,当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。

不使用return包裹的数据会在项目的全局可见，会造成变量污染；
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。