vue_day01 vue_day01

【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 有较高的初始渲染性能消耗