Vue.js笔记

最新推荐文章于 2024-05-12 23:32:13 发布

HSL521224

最新推荐文章于 2024-05-12 23:32:13 发布

阅读量487

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_69270668/article/details/128050831

版权

一.MVVM模式

1.MVVN是什么

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

2.MVVM模式的组成部分：
模型

模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

视图

就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。

视图模型

视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

绑定器

声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中，绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素。

二. CMD命令操作

CMD命令是一种命令提示符，CMD是command的缩写，即命令提示符（CMD），位于C:\Windows\System32的目录下，是在OS/2，Win为基础的操作系统（包括Windows 2000和XP中，Vista中，和Server 2003）下的“MS-DOS 方式”。中文版Windows XP 中的命令提示符进一步提高了与DOS下操作命令的兼容性，用户可以在命令提示符直接输入中文调用文件。
常用命令：

切换目录，进入指定文件夹：

切换磁盘：d:（进入 d 盘）
切换磁盘和目录：cd /d d:/test（进入 d 盘 test 文件夹）
进入文件夹：cd \test1\test2（进入 test2 文件夹）
返回根目录：cd \
回到上级目录：cd ..
新建文件夹：md test

显示目录内容：

显示目录中文件列表：dir
显示目录结构：tree d:\test（d 盘 test 目录）
显示当前目录位置：cd
显示指定磁盘的当前目录位置：cd d:

三. .CDN

CDN是指内容分发网络

目的：

解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。

控制时延无疑是现代信息科技的重要指标，CDN的意图就是尽可能的减少资源在转发、传输、链路抖动等情况下顺利保障信息的连贯性。

优势：

内容有吸引力
访问速度快
支持频繁的用户互动
可以在各处浏览无障碍

四. ES6-键值对

1.什么是键值对

键值对（'key = value'）

顾名思以，每一个键会对应一个值。

2.举个例子

身份证号和你本人是绑定的关系。每一个身份证号（键）都会对应一个小可爱（值）。

我们在登录微信或者游戏时，需要输入手机号验证身份。系统会向改手机号发送一条验证短信。

这里的手机号码（键），对应的接收用户就是值。

3.每个键对应响应的值，当按下响应的键时，就会输出响应的结果。

4.键：就是存的值的编号。

值：就是要存放的数据。

五. 模板字符串

用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

模板字符串是ES6中非常重要的一个新特性，这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用.

六. 生命周期钩子

生命周期钩子 = 生命周期函数 = 生命周期事件

1.创建期间的生命周期函数：

1.beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性

2.created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板

3.beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中

4.mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

2.运行期间的生命周期函数：

5.beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点

6.updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

3.销毁期间的生命周期函数：

7.beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

8.destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

七.数组侦听

【对数组进行侦听】

数组是应用类型,存在比较复杂的侦听规则。

从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。

为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。

1.Vue不能检测以下数组的变动:

a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue

b.当你修改数组的长度时,例如:vm.items.length = newlength

2.使用标准方法修改数组可以被侦听到

https://v2.cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

push() 尾部添加

pop()尾部删除

unshift()头部添加 s

shift()头部删除

splice()删除、添加、替换

sort()排序

reverse()逆序

(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)

八. 事件对象属性

事件对象中的常见属性：

浏览器支持的事件种类非常多，可以分为好几类，每一类里面又有很多事件。事件可以分为以类别:

用户界面事件:涉及到与BOM交互的通用浏览器事件。

load事件:在整个页面(包括所有外部资源如图片 JavaScript文件和CSS文件)加载完成后触发。

焦点事件:在元素获得或失去焦点时触发的事件。

鼠标事件:使用鼠标在页面上执行某些操作时触发的事件。

滚轮事件:使用鼠标滚轮时触发的事件。

输入事件:向文档中输入文本时触发的事件。

键盘事件:使用键盘在页面上执行某些操作时触发的事件，

输入法事件:使用某些输入法时触发的事件

九.事件修饰符

<body>
    <!-- 事件修饰符
        
        event.preventDefault()/阻止状认行为或者event.stopPropogation()/阻止事件冒泡.
        以上方法而要处理D0M事件细节，代码繁项.
        为了解决这个问题，Vue.js提供了事件修饰符.
        修饰符是以点开头的指令后缀来表示的， -->
    
    <!-- .stop阳止冒泡事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
    
    <!-- .se1f当事件日标是当前元素自身时，触发事件 -->
    <ul @click.self="ulClick"></ul>

    <!-- .capture将原本默认的冒泡方式改为捕捉方式 -->
    
    <!-- :prevent阻止事件默认行为 -->
    <!--@submit.prevent提交事件不再重载顶面-->
    <form v-on:submit.prevent="onSubmit"></form>

    <!--.stop.prevent修饰符可以串联，既阻止冒泡又阻止默认行为.-->
    <a v-on:click.stop.prevent="doThat"></a>

    <!--只有修饰符-->
    <form v-on:submit.prevent></form>
</body>

十. v-model修饰符

1. .lazy

对于文本输入框，默认情况下，v-model 推指令在每次 input 事件触发后，都会对文本输入框的值与数据进行同步。通过添加.lazy 修饰符，可以将上述行为改为在 change 事件触发之后进行同步，这样就只有在文本框失去焦点后才会改变对应的模型属性的值，因此称为“惰性”绑定

<body>
    <div id="app">
        <!-- 事件修饰符.lazy(懒惰) 不会即时的将输入框的内容存放data -->
        <input v-model.lazy="msg">
        <span>{{ msg }}</span>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'111'
            }
        })
    </script>
</body>

2. .number

如果希望用户输入的值能够自动转换为数值类型，那么可以给v-model指令添加.number修饰符

<body>
    <div id="app">
        <!-- 修饰符.number 把string字符串转为number数字 -->
        <input type="number" v-model.number="age">
        <span>{{ age }}</span>
    </div>

    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                age:''
            },
            watch:{
                age(){
                    console.log(typeof(this.age));
                }
            }
        })
    </script>
</body>

3. .trim

如果要自动过滤用户输入的首位空白字符，可以给v-model指令添加.tirm修饰符

<body>
    <div id="app">
        <!-- .trim 屏蔽空格 -->
        <input type="text" v-model.trim="msg">
        <span>一个{{ msg.length }}个字符</span>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:''
            }
        })
    </script>
</body>

十一. key属性的作用

<body>
    <div id="app">
        <ul>
            <button @click="list.splice(1,0,{id:4,name:'赵六'})">添加</button>
            <li v-for="item in list">
                <!-- <li v-for="item in list" :key="item.id"> -->
                <input type="checkbox">
                <span>{{ item.name }}</span>
            </li>
            
        </ul>
    </div>

    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'小明'},
                    {id:2,name:'小红'},
                    {id:3,name:'张三'}
                ]
            }
        })
    </script>
</body>

现象:当我勾了小红,然后在下标1的位置添加了赵六,结果发现勾给了赵六,小红自己没勾了。

原因:v-for会尝试最大限度的复用当前元素，导致状态绑定错乱。

解决:在v-for后加上一个key属性,key绑定这个数据的唯一值(一般是id,不能是字符串和数字类型)。

十二. v-if与v-show的区别

 <!-- v-show和v-if都可以用来控制标签的显示与隐藏
    <标签 v-show='布尔值'></标签>
    <标签 v-if='布尔值'></标签>
    当布尔值为true,他们就显示;当布尔值为false，他们就隐藏。 -->
    <div id="app">
        <div v-show="display">我是由v-show控制</div>
        <div v-if="display">我是由v-if控制</div>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                display:true
            }
        })
    </script>

v-if和v-show的区别

【v-show】

1.本质就是标签display设置为none,控制隐藏。只是基于css进行切换。

2.v-show有更高的初始渲染消耗。

3.v-show适合频繁切换的情况。

【v-if】

1.动态的向DOM树内添加或者删除DOM元素。

2.v-if有更高的切换消耗。

3.v-if适合运行条件很少改变的情况。

十三. v-for与v-if一同使用的注意事项

除非必要，否则不要将 v-if和 v-for 用在同一个元素上。

当它们处于同一节点时，v-for 的优先级比 v-if 高，v-for 每次迭代时都会执行一次 v-if,这会造成不必要的计算开销，影响性能，尤其是当只需要渲染很小一部分的时候，表现尤为明显。比较好的做法是直接在数据模型中对列表进行过滤，以减少视图中的判断。

<div id="app">
        <p v-for="item in filteredList" v-bind:key="item.id">
            {{item.name}}
        </p>
    </div>
 
    computed:{
        filteredList(){
            return this.list.filter(function(item) {
                // 返回id小于2的项斌添加到filteredList数组中
                return item.id < 2
            })
        }
    }

另一种场景是,如果希望有条件地跳过循环的执行，那么应该将 v-if置于外层元素上。例如，在一个电商网站的产品列表页面中,通常会先判断一下这个列表中的产品数量。如果列表是空的(例如没有搜索到用户查找的产品)，那就显示一句提示语，而不再显示列表，代码如下:

<div id="app">
   <div v-if="products.length == 0">没有找到您搜索的产品</div> 
   <div v-else> 
      <p v-for="item in products" :key="item.id"> 
        名称:{{item.name}} 价格:{{item.price}} 
      </p > 
   </div> 
</div>

Vue.js 的两个关键指令V if 指令和 v-for 指令，它们分别用于条件渲染和列表渲染。

v-if 指令需要与 v-show 指令今分开使用。

v-for 指令需要 key 属性的配合，此外还要留意数组元素更新时的限制情况

十四. 父子组件之间传递数据的方法

1.父组件->子组件

从父组件向子组件传递数据是最主要的方式，可通过组件的props(属性)和slot(插槽)来实现

[props.单向数据流]

概念：父组件的数据改变了会自动流动到自组件，但是子不允许修改由prpos流过来的数据

所谓的单向数据流不允许子修改，是不允许改栈，但是可以改堆

例如：父传了数组给子，在子里面可以通过调用push,pop,shift,unshift,splice等

而且改完后父也会跟着改，因为他们指向的是同一个堆。

但是在这里不允许改orops.上的栈上的数据，父可以改，而且改完后能流入到子。

2.子组件 -> 父组件

【$emit】

子里如何给父组件传递数据？

利用发通知的形式来间接传数据。

发通知的语法：this.$emit('自定义的事件名'，数据)

父里要订阅这个通知（相当于监听这个事件）

<子组件 @自定义的事件名="函数">

当子的$emit执行时，就会自动调用父里绑定的函数，函数的参数就是子传递过来的数据。

例:

子里的代码

<button@click="$emit('sb','hello')">点击后，要给父传递数据</button>

解释：当子组件里面点了这个按钮，就会触发一个叫sb的事件，那个父组件如果监听了sb就会调用。

父里的代码

<子组件@sb="函数"/>

当sb事件通知时，就会调用上面的函数，函数的参数就是永不过时。

十五. 单页应用（SPA）

什么是单页应用？

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页面应用的优缺点：
优点：

良好的交互体验

单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅

良好的前后端工作分离模式

后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端

减轻服务器压力

单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍

缺点：

首屏加载慢

解决方案：

1.vue-router懒加载

Vue-router懒加载就是按需加载组件，只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就加载，项目越大，对首屏加载的速度提升得越明显

2.使用CDN加速

在做项目时，我们会用到很多库，采用cdn加载可以加快加载速度。

3.异步加载组件

4.服务端渲染

服务端渲染还能对seo优化起到作用，有利于搜索引擎抓取更多有用的信息（如果页面纯前端渲染，搜索引擎抓取到的就只是空页面）

不利于SEO

seo 本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说，搜索引擎的基础爬虫的原理就是抓取url，然后获取html源代码并解析。如果一个单页应用，html在服务器端还没有渲染部分数据数据，在浏览器才渲染出数据，即搜索引擎请求到的html是模型页面而不是最终数据的渲染页面。这样就很不利于内容被搜索引擎搜索到

解决方案：

1.服务端渲染

服务器合成完整的 html 文件再输出到浏览器

2.页面预渲染

3.路由采用h5 history模式

不适合开发大型项目

大型项目中可能会涉及大量的DOM操作、复杂的动画效果，也就不适合使用Vue、react框架进行开发

HSL521224

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue.js笔记

1.MVVN是什么MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开2.MVVM模式的组成部分：模型视图视图模型绑定器CMD命令是一种命令提示符，CMD是command的缩写，即命令提示符（CMD），位于C:\Windows\System32的目录下，是在OS/2，Win为基础的操作系统（包括Windows 2000和XP中，Vista中，和Server 2003）下的“MS-DOS
复制链接

扫一扫