vue_day01

MVVM思想:

MVVM是前端视图层的分层开发思想,主要把每个页面分成了M,V,VM,其中VM是MVVM思想的核心,因为VM是V和M之间的调度者.

新建 DOC 文档75.png

当我们在页面中引入vue.js之后,在浏览器内存中就多了一个Vue的构造函数,

el:表示我们new的这个Vue实例,要控制页面上的哪个区域

data:存放的是el中要用到的数据

msg:可以很方便的把数据渲染到页面上,而不用再去像jQuery那样操作DOM元素,而且在被控制的html标签中可以直接使用{{ msg }}方式获取值.

新建 DOC 文档247.png

对于上述例子,用户可以看到的html标签属于MVVM中的V,而new出来的Vue属于VM,data属于MVVM中的M,专门用于保存每个页面的数据

指令:

v-cloak:当网络慢时,vue.js未加载成功,页面没有完成渲染,这时插值表达式会显示到页面上,此时可以通过v-cloak来隐藏p标签内的插值表达式

新建 DOC 文档405.png 新建 DOC 文档406.png

,当加载完成后,会自动移除掉p标签上面的v-cloak属性,这时渲染好的内容就可以解决插值表达式闪烁问题.

v-text:可以产生和插值表达式同样的效果.

v-text和插值表达式的区别:

 1、v-text不会产生闪烁情况；

 2、v-text会覆盖元素中原来的内容，插值表达式只会替换自己的占位符，不会把元素整个内容清空。

v-html：可以和v-text一样的效果，都会覆盖原来的内容,但是v-html可以解析文本中的html标签，另外两个只会把内容当做纯文本显示。

v-bind：是Vue中，用于绑定属性的指令。

新建 DOC 文档680.png

v-bind标记的属性后面，会把双引号里面的当成js代码去执行，会把它认为是个js表达式，可以进行字符串拼接操作。v-bind:value可以简写-->:value

v-on：是Vue中，用于绑定事件的指令。

和v-bind指令一样，会把双引号里面的当成js变量,去Vue这个实例对象的methods中找,完成调用.

新建 DOC 文档842.png

v-on:click可以简写-->@click

在VM实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过this.数据属性名或者this.方法名来进行访问,这里的this表示我们new出来的VM实例对象.

VM实例,会监听自己身上data中所有数据的改变,只要数据一发生改变,他会立即把改变同步到页面中去(MVVM中的V).所以只需要关注数据的改变就可以,不用管页面是如何渲染的

新建 DOC 文档1053.png

由于setInterval这个内层函数没有从lang这个外部函数中继承this,在内层函数中,this代表window,进而程序无法得到预期的效果,关键原因在于this没有传递.

解决方法:

 使用箭头函数,内层函数setInterval可以从外层函数中获取this,和外层函数中的this保持一致,并都指向vm实例对象.

新建 DOC 文档1222.png

JS事件中的冒泡机制:

定义一个html, 里面有三个简单的dom 元素：div1,div2, span，div2包含span，div1 包含div2；而它们都在body 下：

新建 DOC 文档1315.png

无论是body，body 的子元素div1，还是 div的子元素div2，还有 span, 当这些元素被点击click时，都会产生click事件，并且body都会捕获到，然后调用相应的事件处理函数。就像水中的气泡从底往上冒一样，事件也会往上传递。

新建 DOC 文档1442.png

解决方案1:

 对每一层的事件作出限定,不能传递,将事件停留在本节点,不再对外进行传播.

解决方案2:

 元素收到事件后,会进行判断,如果是自己这一层的事件,进行处理,如果不是就直接忽略掉,不阻止冒泡，方案2重点在于过滤需要处理的事件，事件处理后还会继续传递；

事件修饰符:

stop:阻止冒泡机制(也就是处理冒泡机制的第一种方案)

prevent:阻止默认行为(a标签或者submit按钮的默认提交行为)

capture:添加事件侦听器时使用事件捕获模式(也就是JS中的捕获机制,和冒泡机制正好相反,从document开始从外到内进行事件处理)

self:只有点击当前元素的时候,才会触发时间处理函数(也就是处理冒泡机制的第二种方案)

once:只触发一次.

新建 DOC 文档1784.png

事件修饰符可以串联,但是第二次点击就不会再阻止默认行为了

v-model指令:

新建 DOC 文档1828.png

v-bind只能实现数据的单向绑定,从M绑定到V,无法实现数据的双向绑定.

v-model可以实现数据表单元素和model中数据的双向数据绑定.注意,v-model只能运用在表单元素中

在Vue中使用样式:

使用class为元素设置样式:

第一种方式:

 直接传递一个数组,注意 这里的class需要使用v-bind做数据绑定,而且数组里面内容使用单引号,否则会在data中查找有无这个变量,找不到就报错.

新建 DOC 文档2042.png

第二种方式:

 使用三元表达式

新建 DOC 文档2064.png

第三种方式:

 简写成对象的格式,在数组中使用对象来代替三元表达式,提高代码可读性

新建 DOC 文档2112.png

直接使用对象:

 在为class使用v-bind绑定对象的时候,对象的属性是style样式中的类名,对象的属性可带引号,也可不带,属性的值 是一个标识符,也可以直接把该对象放入Vue的data数据中,在h1标签元素中直接使用属性名即可.

新建 DOC 文档2228.png

使用style为元素设置样式:

直接使用对象(如果属性中间带有-,例如 font-weight,那么属性名必须带单引号)

新建 DOC 文档2292.png

通过数组引用多个data上的样式对象

新建 DOC 文档2313.png

v-for指令:

使用v-for循环遍历普通数组,item为每一项内容,i为每一项的index

新建 DOC 文档2364.png

使用v-for循环遍历对象,类似python中遍历字典,注意:(通过这样遍历,格式为 value,key,index)

新建 DOC 文档2426.png

使用v-for迭代数字,类似python中的生成器(Generator),count从1开始.

新建 DOC 文档2476.png

在2.20+的版本里,当组件中使用v-for时,key是必须的.

当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用"简单复用"策略,如果数据项的顺序发生改变,那么Vue不会移动DOM元素来匹配数据项的顺序(例如:原列表勾选第4条数据,当顺序发生改变后,还是会勾选第4条数据).

解决方案:

使用key,以便他能跟踪到每个节点的身份,从而对重新排序后的元素进行选择,确保勾选节点的一致性.

注意:

 v-for循环的时候,key属性只能使用 字符串或数字

 key在使用的时候,必须使用v-bind 属性绑定的形式,指定key的值

新建 DOC 文档2760.png

v-if和v-show指令:

v-if 的特点:每次都会重新删除或创建元素,有较高的切换性能消耗

v-show 的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none的样式,有较高的初始渲染性能消耗.

如果这个元素的flag是false的话,v-if不会渲染,而v-show还是会渲染的,所以相比 v-show 有较高的初始渲染性能消耗

新建 DOC 文档2949.png