vue的起步必备知识

vue的初步学习

一、vue概念

​ vue是目前前端开发中最流行的mvvm框架

​ 官话：vue是一套用于构建用户界面的渐进式的自底层向上增量开发的mvvm框架

渐进式：就是可以在原有的项目上一两个功能使用vue，或者整个项目全部都使用，vue也不会做职责以外的事情。

自底层向上增量开发：（先把基础的页面写好，然后再一 一的添加各个功能使用vue从简单到复杂的一个过程）有点像渐进增强

下载

下载包

npm下载 ：npn install --save vue

CDN的方式

vue优点

1. 轻量级
2. 高效级
3. 上手快
4. 文档全面

为什么vue这么火

1. vue给我们前端开发者带来了非常非常便利的数据绑定问题
2. vue可以让我们来开发大型单页面应用
3. 组件化：（就是把页面拆分成很多个小模块，在使用的时候把这些小模块进行拼装）形成一个大的页面（提高了复用性）

二、理解MVC MVVM MVP等思想

为什么学习MVC

​ mvc是一个比较主流的设计思想，mvc的思想下，没有DOM操作，把数据独立出来，方便管理。

​ 我们也把业务逻辑，数据、界面展示独立出来了方便我们后续开发于测试

dom操作：

<div id="demo"></div>
    <script>
        var arr = ["我","超级","无敌","帅"]
        var str = "";
        for(var i=0;i<arr.length;i++){
            str += `
                <p>${arr[i]}</p>
            `;
        }
        document.querySelector("#demo").innerHTML = str;
    </script>

mvvm

M:Model 模型 数据 V:View 视图 用户可以看见的界面 VM:ViewModel 视图模型 就是视图和模型之间的桥梁

VM：负责监听M和V的修改 可以让我们更加关心业务不用对DOM操作进行关心

MVP

M:Model 数据 V:View 视图 P:Presernter 表示器 负责M与V之间的间接交互

三、vue的使用

数据插入扩展知识点

​ 在vue中核心就是可以让我们使用简单的模板语法，声明式的对数据进行渲染

​ vue是声明式渲染–>我们只需要告诉程序我们想要什么效果，至于数据的插入全部交给程序来解决

​ 命令式渲染—>命令我们的程序如何一步一步执行

​ 数据驱动—>就是通过vm层来控制数据的变化，让数据随着内容的变化而变化

基础使用

	<!-- 1.下载包 -->
    <!-- 2.引用 -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <!-- 3.创建视图 -->
    <!-- 在vue中视图也可以叫做视图容器 其实就是一个DOM元素 -->
    <div id="demo">
        <!-- vue管理的数据都写在这个demo容器里面 -->
        <!-- 模板语法{{}}->插数据的时候使用 -->
        {{name}}
        {{dos}}
        <p>{{msg}}</p> -->
        <!-- 或者 -->
        <p>{{name + dos + msg}}</p>
        <!-- 数值运算 -->
        <p>{{num1 + num2 - num2 * num2 / num2}}</p>
        <!-- 布尔值 -->
        <p>{{bool}}</p>
        <!-- 三元运算符 -->
        <p>{{bool ? "是真的" : "是假的"}}</p>
        <!-- 数组 -->
        <p>{{arr}}</p>
        <p>{{arr[2]}}</p>
        <!-- 对象 -->
        <p>{{obj}}</p>
        <p>{{obj.name1 + obj.dos1 + obj.msg1}}</p>
    </div>
    <script>
        // 4.创建一个VM---vue实例
        new Vue({//单词大小写需要注意
            el:"#demo",   //关联视图（单词不能变）
            data:{//M层 模型--->数据
                name:"我",
                dos:"是",
                msg:"天下第一帅",
                num1:1,
                num2:2,
                bool:true,
                arr:["xx","aa","b"],
                obj:{
                    name1:"我",
                    dos1:"是",
                    msg1:"天下第二帅"
                }
            }

        })
    </script>

模板语法注意：

1. 不要在模板语法中写太复杂的运算（三元算是最极限了）
2. 在模板语法中如果一个内容被双引号包裹，就会被当成字符串原样输出

四、vue — 指令

1. 知道什么是指令

2. 理解指令的用途

3. 指令的书写规范

4. 使用指令完成页面的交互效果

5. 什么是指令：–就是HTML特殊属性

   HTML的属性是什么？

   就是在HTML中的标签中，以属性=“属性值”的写法完成的，他的作用是用来扩展HTML标签的功能

   指令就是带有v-前缀的特殊属性

指令：

1. v-model

   作用：用于在表单元素中，关联模型数据，从而实现双向数据绑定

   语法：写在需要绑定的表单元素的开标签中 v-model = “绑定的变量”

   注意：当前这个指令必须绑定到表单元素上

   双向数据绑定：把模型数据绑定到视图中，如果绑定的数据在视图中发生了改变，模型也随之发生改变，模型改变了视图也随之改变

双向数据绑定的原理：（面试题）

vue双向数据绑定是通过数据劫持于发布者-订阅模式的方式来进行实现的

数据劫持：就是我们访问或者是设置对象的属性的时候，会触发的object.defineProperty()函数来进行劫持（拦截）。返回（get）设置（set）的两个对象的方法来操作我们对于数据的反应

发布者订阅者模式：就是对象间的一种 一对多 的依赖关系，当这个一个对象的状态改变的时候，所有依赖于这个对象的所有内容

2. v-show

   作用：控制一个元素的显示和隐藏（元素被动态的设置了display:none）

   语法：v-show=“布尔值” true 显示 false 就是隐藏 （默认为false）

3. v-on

   作用：就是给vue来绑定事件的

   语法：1. v-on：事件名=“函数” 2. @事件名=“函数（）”

   注意：vue中的函数写在实例中，必须写在methods配置项中

4. v-for

   作用：遍历data中的数据

   语法：v-for="(item ，index) in 你要遍历的数据"

   item: 你每次遍历出来得到的数据

   index: 得到数据的下标

5. v-bind

   作用：给网页中的html元素绑定属性

   语法：1. v-bind:属性名=“值” 2. :属性名=“值” 3. v-bind:属性名=“表达式” 4. v-bind="{属性名1：属性值1,属性名2：属性值2}" (多个内容只能用 v-bind:属性名=“值”)

6. v-if (判断)

   作用：判断是否加载页面元素

   语法：v-if=“表达式” true 加载元素 false 不加载元素

   对元素进行显示和隐藏的时候其实是对当前这个dom元素进行新增和删除

v-if 和 v-show 的区别

​ v-if：在切换的时候对计算器的资源的消耗比较高（安全性高）

​ v-show：在页面初始化的时候对计算机的资源消耗比较高（对需要频繁显示和隐藏的元素，并且安全性不要的情况下来进行使用）

当 v-if 和 v-for 一起使用时，谁的优先级更高 （面试题）

v-for 比 v-if 的优先级更高，意味着v-if将分别重复运行于每个v-for循环

所以，不推荐 v-for 和 v-if 同时使用消耗过大

7. v-else

   前提：必须和 v-if 来进行使用，不能单独使用

   作用：配合着 v-if 来对元素进行显示隐藏

8. v-else-if

   当有一项成功的时候进行渲染

9. v-text

   向网页中插入纯文本

10. v-html

    向网页中插入html

11. v-once

    一次性 插入值，当数据改变的时候，插值不会改变

五、vue监听/侦听（watch）

​ 作用：可以监听模型数据的改变，当绑定到监听上的模型数据改变了，那么监听就可以触发，来完成具体的功能。

​ 注意：监听watch在初始化的时候不会执行，只有当数据发生改变的时候才会运行

​ 语法：要和el，data，methods 同级的位置来进行编写

​ watch:{

​ 你要监听的数据（newval(新数据)，oldval(旧数据)）{

​ 你要处理的逻辑

​ }

​ }

<div id="demo">
        <input type="text" v-model="text">
        <h1>{{text}}</h1>
    </div>
    <script>
        new  Vue({
            el:"#demo",
            data:{
                text:"养只猫",
                newHtml:"<p>我想养胖橘</P>"
            },
            watch:{
                text(newval,oldval){
                    console.log(`新数据${newval}，旧数据${oldval}`)
                }
            }
        })
    </script>

6、事件对象

$event： 事件对象 记录事件相关的信息

语法：	<input type="text" @keydown="fn($event)">

修饰符：用来处理事件当中的一些细节性的dom操作（记）

1. 按键修饰符：.up .down .ctrl .enter .space
2. 事件修饰符：
   1. .stop 阻止事件冒泡
   2. .capture 事件捕获
   3. .self 只会触发自己范围内的事件，不包含子元素
   4. .once 只会触发一次
   5. .prevent 阻止事件默认行为

扩展：

虚拟DOM和Diff算法

虚拟DOM：就是是虚拟节点–>他是通过js的对象来模拟DOM节点，一切的DOM操作都是在这个js对象中完成 （js对象在进行模拟操作，速度非常的快） 就会重新的进行真实DOM渲染

虚拟DOM和真实DOM区别：

1. 虚拟DOM不会对于页面进行重绘操作
2. 虚拟DOM效率比真实DOM高的多
3. 虚拟DOM进行频繁操作的时候，都会只对要修改，而不会对整个DOM进行渲染，减少DOM操作，局部渲染

Diff算法

逐步解析新的节点，找到他在旧节点的位置，如果找到了就移动对应内容，如果没有找到就说明是新的节点，那么就进行新增操作，创建除了一个节点进行插入，在遍历完后如果节点中还有没有处理完的内容，就说明，这个节点在新的内容中被删除了，那么删除即可。