vue.js笔记

1.MVVM（Model-View-ViewModel）模式包括3个核心部分。

（1）Model（模型）：由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到数据。

（2）View（视图）：即用户界面。

（3）ViewModel（视图模型）：用于链接匹配模型和视图的专用模型。

2.内部命令：操作系统提供的基本命令，例如进入一个目录、显示一个目录中的文件列表等。

常见的内部命令如下：

（1）dir:显示一个目录中的文件列表

（2）cd:进入一个目录

（3）md:创建一个目录

3.CDN

（1）CDN的全称是Content Delivery Netword，即内容分发网络。

（2）CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，

使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

（3）CDN的关键技术主要有内容存储和分发技术。

4.模板字符串：

return '你好，欢迎来自${this.city}的${this.name} !'

（1）这里构造欢迎语的字符串，使用的是ES6新增的一种语法结构，称为“字符串模板”，它以“`”符号开头和结尾，代替了普通字符串开头和结尾的单引号或双引号。在这种字符串模板中，可以方便地插入变量；

（2）使用模板字符串的另一个优点是：可以跨行，直接产生多行文本；而普通字符串不能跨行，如果要定义多行字符串，那么必须将多个单行字符串拼接才能获得。

5.生命周期函数（钩子函数）

（1）beforeCreate() ：创建vue实例之前

（2）created() ： 创建实例成功（一般在这里实现数据的异步请求）,此时尚未开始DOM编译

（3）beforeMount() ：渲染DOM之前（加载组件第一次渲染）

（4）mounted()： 渲染DOM完成（加载组件第一次渲染），它相当于JavaScript中的window.onload()方法。

（5）beforeUpdate()：每次页面中有需要更新时，在更新钱=前就会调用beforeUpdate()钩子函数，重新渲染之前（数据更新等操作控制DOM重新渲染）

（6）updated()  ：每次页面中有元素需要更新时，在更新完之后就会调用update()钩子函数，重现渲染完成

（7）beforeDestroy()：销毁之前

（8）destroyed()：销毁完成

6.数组的增删改查

（1）push()：     尾部添加

（2）pop()：      尾部删除

（3）unshift()：   头部添加

（4）shift()：     头部删除

（5）splice()：    删除、添加、替换

（6）sort()：      排序

（7）reverse()：逆序

7.v-if与v-show的区别

（1）v-if操作的是DOM元素，而v-show操作的是元素的CSS属性（display属性）

（2）v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件侦听器被销毁和重建。

（3）v-if是“惰性”的，即如果在进行初始渲染时条件为假，则不会渲染，直到条件第一次变为真时，才开始渲染相应的DOM结构。

（4）v-show相对简单，不管初始条件是什么，元素总是会被渲染，并且还会基于CSS的display属性进行切换。

（5）通常，v-if的切换开销更大，而v-show的初始渲染开销更大。因此，如果切换非常频繁，建议优先使用v-show；而如果在运行时条件很少改变，则使用v-if效果更好。

8.v-for中key属性的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用让每个item有一个唯一的识别身份，可以下标值index或者id,主要是为了vue精准的追踪到每一个元素，高效的更新虚拟DOM。

9.将v-for与v-if一同使用时的注意事项

（1）除非必要，否则不要将 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

            })

        }

    }

（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>

10.在父子组件之间传递数据

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

（2）属性：Vue.js还允许使用更明确的方式定义属性，即通过一个对象而不是一个数组来定义一个组件的各种属性。

（3）插槽：作用——向组件传递另一个组件的开闭标记之间的内容。插槽不但可以传入文本，也可以传入HTML结构。

11.单页应用

（1）一、什么是单页应用？

从字面上来理解：

单页面应用（SPA--------single page application），一个web项目只有一个页面（即一个HTML文件）；一个项目的所有页面的所有内容被分成了很多的小块（即组件），

可以重复利用的，可以任意调整的组件，每个组件就是一个独立的部分（包括html，css和javascript代码）。

从使用的过程来理解：

单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax等来进行，页面并没有刷新，页面只在最开始前刷新一次。

（2）单页应用的优点

--分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，减轻服务器压力，服务器只用出数据就可以，而且不会把前后端的逻辑混杂在一起；

--API共享，后端API通用化，服务如果是多端的（浏览器端、Android、iOS、微信等），单页应用的模式便于你在多个端共用 API，可以显著减少服务端的工作量；

--用户体验好、快，内容的改变不需要重新加载，提升了用户体验；

--前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整。