10.12 冯娜

学习日志

一、什么是Vue:是第三方开发的、渐进式的、基于MVVM设计模式的、纯前端的的JS框架。

渐进式:可以逐步在项目中引入Vue的各项功能,同时,可以与其他技术混用,但是不推荐(es5:只要不是使用框架,一律使用es5,不能出现es6:我们使用框架的时候就可以使用es6)

MVVM设计模式:

1、传统前端三大部分:HTML、css、javascript

问题:html和css的功能都太弱了,对于页面中发生的一切变化都需要javascript来编写,导致需要javascript编写大量重复的增删改查操作。

2、现代前端三大部分:mvvm:

(1)数据模型(Model):集中保存界面中所需要的所有变量和变量值。模型,指程序中创建的或从远程获取的数据,一般使用js中的一个对象data来保存,内容就会直接显示到view中

(2)界面(View):视图,指网页中的元素和样式,一般指的就是html和css,view时html网页中的一个需要动态加载内容的父元素,比如:“div#app”。html中的视图也被称为模板template,如果发生template错误,那么html中查找就可以。

(3)控制器(ViewMode):视图模型/控制,用于代替之前DOM/jQuery操作,封装了重复的增删改查操作,把模型中的数据和视图中的html元素“绑定”在一起。Vue类型提供的就是一种强大的ViewMode对象,可以自动同步数据和页面元素,专门负责自动将模型中的变量值自动同步到界面中所需要的位置,实现实时同步。

ViewMode核心原理:(响应系统/DOM树)

a、纯前端:不需要任何后端技术,就能够独立运行。

b、框架:包含核心功能的半成品代码,开发人员只需要根据业务的需求,添加定制自己个性化的一部分内容即可。(构造+原型)

二、对比原生DOM、jQuery、Vue框架

1、原生DOM:使用原生DOM,必须是一步一步的来,而且每一步都能少,步骤上非常繁杂,原生的DOM兼容性好。

问题:jQuery中有多少种查找方法?(查找id的元素,查找class的元素,查找name的元素)。

2、jQuery:其实是对DOM的每一步都进行了简化,但是并没有从根本上改变程序的流程。

3、Vue:

优点:已经包含核心功能,而且封装了很多重复的功能,编写时我们就不必要再编写重复的功能,比如:增删改查,算是在开发中彻底简化了开发的步骤。

缺点:不兼容旧浏览器,同时开发人员需要彻底的改变编程习惯和思维。

DOM数重绘问题:一两个看不出来,数量多了非常卡。

三、什么时候使用Vue?为什么使用Vue?

1、Vue适用于以数据操作为主的项目(web/app)。

2、我们使用vue框架可以提高项目的开发效率。

四、如何在项目中使用Vue

1、下载Vue.js,并通过script引入(学习阶段使用)

2、通过Vue-Cli脚手架工具(开发项目,使用的都是脚手架工具)。

五、下载安装。

六、编写vue程序步骤:

第一步:编写页面

第二步:在js中定义数据对象

第三步:在JS中创建vue对象,将界面和数据绑定起来

七、vue语法

1、绑定语法:

什么是绑定语法:是专门为html添加变量,html本身并不支持变量,但是html中的个别内容又需要根据程序中的变量自动变化,当html中的任何一个位置的内容,需要根据程序中的变量自动变化的时候,就需要使用绑定语法。

语法:{{变量/js表达式}}

双花括号语法:也叫做大胡子语法,官方的名字:Mustache.补缺,插值的意思,

大胡子语法,用于特定的Model数据绑定到视图中,当Model数据发生了改变,所有用到显示数的{{}},里面的数据都会自动更新。首次加载的时候,new Vue{}会自动找到{{}},用程序中的变量值,替换{{变量}},当程序中的变量被修改的时候,再次扫描虚拟DOM树,找打这里,用新值自动替换。

{{}}的用法:

1、Model变量名:

{{showMessage}}

data:{

showMessage:"Hello world"}

2、算数/比较/逻辑/三目运算(过滤器代替它)

3、方法的调用(计算属性代替)

4、对象属性的访问

5、数组下标访问

6、字符串的拼接

7、创建对象

8、

指令(13种)

什么是指令:Directive:就是为html添加新功能的自定义属性,因为html本身是静态的,不具有任何动态生成能力,所以当我们想要在html中使用程序的一些特征的时候,例如:“分支”,“循环”等,就需要指令。

(1)v-bind:在vue中,元素的属性不能使用{{}}进行绑定,必须使用“v-bind”或“:”来进行绑定。

注意:“:”是“v-bind”的缩写

普通绑定:

//any是任意标签

动态绑定:

(2)控制元素的显示/隐藏

a、控制一个元素的显示/隐藏

v-show:

提示:v-show会判断条件是否成立,若条件成立,则显示数据,否则隐藏该元素

原理:使用css中的display来控制元素的显示/隐藏

b、两个元素,二选一显示

v-if

v-else

c、多个元素,多选一显示

v-if

v-else-if

提示:若v-if的条件成立,就显示v-if的元素,之后的元素不再显示,若v-if的条件不成立,则按顺序判断每个v-else-if的条件,哪个成立就选哪个,其他元素不再显示。若所有的条件都不满足,就显示v-else。

原理:v-if,v-else-if,v-else不是用display:none进行隐藏/显示的,而是而是彻底的删除不显示的元素,v-if,v-else-if,v-else,元素必须是紧邻的兄弟元素,中间不能阻隔任何的其他元素。

(3)、反复生成多个相同结构的元素

v-for:会自动遍历数组/对象/字符串中的每个元素,每遍历一个元素,就会自动创建元素对象。

elem:变量名

i:下标

:key 是在内存中为每个html元素副本添加一个唯一标识。若每个html元素副本都有唯一的标识,则每次修改数组元素的时候,v-for只需找到受影响的哪一个html元素副本,修改即可。其余不受影响

面试题:v-for为什么一定要加key?(面试题库)

提高效率

注意:

1、v-for一定要写在重复生成的元素上,而不是写在父元素上。

2、若不关心下标,只关心元素,可以简写

3、of和in是可以相互替代的,用法完全一样,vue中v-for统一了js中for of和for in,即可以

遍历索引数组,又可以比哪里对象

4、of会自动取出数组/集合中的每个元素的值和下标,保存到右边的变量中,若of后世数字,那么of会从1开始迭代递增到目标数字

(4)v-on:

1、普通绑定:

2、动态绑定:

data:{

​ 变量名:事件名

}

注意:v-on可以缩写为:@

提示:无论是data中的变量,还是methods中的函数,只要进入new Vue()以后,都直接隶属于new Vue(),所以在new Vue()的直属方法中,使用this可以直接调用变量。

问题:若将button按钮换成a标签,href=“…”属性,默认会改变地址栏或跳转到其他页面。

解决问题:(阻止默认行为)。

1、js中,实参:event

function(e){

e.preventDefault();

}

2、vue中,

实参:$event

fn(e){

e.preventDefault();

}

提示:\(event是vue对象的内置变量,是将DOM事件对象e封装后得到的产物,是现成的内置变量,可以直接使用,只要想要vue的处理函数中使用事件对象,就必须在html绑定的调用方法中传入\)event。

3、使用事件修饰符

事件修饰符会自动实现原DOM事件对象操作的特殊属性,当需要修改事件的行为时,就要使用事件修饰符。

.prevent

使用.prevent代替内置变量$event下的e.preventDefault(),阻止默认行为。

.stop

使用.stop代替内置变量$event下的e.stopPropagation(),取消冒泡/蔓延。

多个修饰符可以同时修饰同一个事件,而且与顺序无关。

(5)、v-html绑定html片段

v-html专门用于加载一段html的代码片段,功能类似于js中的innerHTML()

data:{

变量名:"

Hello World

"

}

(6)、v-cloak:防止用户短暂看到{{}}的语法

v-cloak让元素进行默认隐藏,直至内容准备就绪的时候,才会自定的显示出来,可以防止用户短暂看到{{}}内的语法。

{{message}}

手动添加一个属性选择器,隐藏所有加v-cloak的元素。

[v-cloak]{display:none;}

原理:在程序开始的时候,需要由我们手动添加display:none,准备就绪后,vue会自动将v-cloak属性删除,这个时候,也就删除了display:none属性,元素也就能显示出来了。

(7)、v-text:是{{}}的等效指令,只不过v-text是写在属性中的,而{{}}是写在内容中的。

给需要隐藏的元素添加v-text,v-text的后面就是我们要显示的内容。

(8)、保护{{}}中的内容不被编译

v-pre:保护当前元素中的{{}}语法,不会被绑定渲染

{{info}}

data:{

​ info:"你猜我再不在"

}

(9)、唯一不变元素

v-once:当前元素的{{}}语法对应的数据只能绑定一次,以后即使模型数据发生改变,也不会再改变了

{{name}}

data:{

​ name:"剋剋"

}

原理:只在首次加载的时候,一次性的将数据模型数据显示在当前元素中,不会将元素注册到监听队列中。正常情况下,watch中,有一个队列,维护这每个数据变量和页面之间的对应关系。每次数据模型发生改变后,都会通知watch,watch会遍历受到该数据变量影响的元素,并逐个的修改他们。通过减少监视的元素个数,可以优化页面绑定的效率。

标签

评论