vue. js笔记 day-1

vue. js笔记
(onenode导出，图看不到，凑合看吧)
2021年1月26日
10:26

MVC和MVVM
mvc：model，view，controller

 mvvm：是前端视图层的分层开发思想，主要把每个页面分成了M，V和VM。其中，VM是MVVM思想的核心，它是v和m之间的调度者。mvvm提供了数据的双向绑定（vm），使得开发更加方便。

vue的基本代码：先下载vue的包
el:定义了当前vue所对应的区域
data:定义了当前vue实例中所有可用的数据
methods:定义了当前vue实例所有可用的方法

1，导入vue的包
2，创建一个vue的实例

v-cloak:
可以解决插值表达式闪烁的问题
使用实例：
…

…

{{ msg }}

v-text:
作用和插值表达式大致相同
但默认没有闪烁的问题，v-text 会覆盖元素中原本的内容，但是差值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。

v-html:

也会覆盖元素中原本的内容，但是会把其当成成HTML进行渲染。
v-bind:
是vue中，提供的用于绑定属性的指令。会将冒号后的东西当做js表达式解析。(可以写合法的js语句)
v-bind:tittle可简写为:tittle

v-on:
用来绑定事件。
v-on:tittle可缩写为@tittle

v-on:click="alert"

在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this. 属性名/方法名 来进行访问，此处的this就表示我们new出来的vm实例对象。
vm实例会监听自己data的改变，只要数据一发生变化，就会自动把最新的数据显示到页面上去，不用手动重新渲染。
事件修饰符：（可以串联实现多个修饰）
. stop 阻止冒泡（阻止所有层的冒泡行为）
. prevent 阻止默认事件
. capture 添加事件监听器时使用事件捕获模式
. self 只当事件在该元素本身（比如不是子元素）触发时触发回调（只阻止自己身上的冒泡行为，不管其他的冒泡行为）
. once 事件只触发一次

v-model和双向数据绑定
v-bind只能实现数据的单向绑定，从m绑定到v，无法实现双向数据绑定。
v-model可以实现表单元素和model中数据的双向s数据绑定。但只能运用在表单元素中（input(radio,text,address,email…) select check box textures…）

vue中使用样式class

使用class样式
-1-数组

哈哈哈哈哈哈

直接传递一个数组，这里的class需要使用v-bind做数据绑定

-2-数组中使用三元表达式

哈哈哈哈哈哈

-3-数组中使用对象

哈哈哈哈哈哈

在数组中将三元表达式换为一个对象，增强代码可读性

-4-直接使用对象

哈哈哈哈哈哈

在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号也可不带，因此可不写引号，属性的值是一个标识符

使用内联样式
-1-直接在元素上通过 :style 的形式，书写样式对象

哈哈哈哈哈哈

（属性名中有短横线的话，单引号不能省略）

-2-将样式对象定义到data中，并直接引用到 :style中
在data上定义样式：
data:{
h1StyleObj:{ color:‘red’,‘font-size’:‘40px’,‘font-weight’:‘200’}
}
在元素中，通过属性绑定的形式，将样式应用到元素中：
<h1 :style=[“h1StyleObj”]>哈哈哈哈哈哈

-3- :style中通过数组引用多个data上的样式对象
在data上定义样式：
data:{
h1StyleObj:{ color:‘red’,‘font-size’:‘40px’,‘font-weight’:‘200’} ,
h1StyleObj2:{ ‘font-style’:‘italic’}
}
在元素中，通过属性绑定的形式，将样式应用到元素中：

哈哈哈哈哈哈

v-for
-1-迭代数组
1.

{{ item }}

2. <p v-for="user in list">id:{{user.id}}.... name:{{user.name}}</p>

data:{
list:{
{id:1,name:‘zs1’},
{id:2,name:‘zs2’}
}
}

-2-迭代对象中的属性
在遍历对象身上的键值对的时候，除了有val和 key外，在第三个位置还有一个索引i

值是｛｛val｝｝..... 键是｛｛key｝｝......索引是｛｛i｝｝

data:{ user:{ id:1, name:'zs1', gender:'male' } }

-3-迭代数字

在in后面可以放普通数组，对象数组，对象，也可以放数字

这是第{{count}}次循环

此处的count值从1开始

v-for循环中key属性的使用
key属性只能使用number或string
key必须使用v-bind属性绑定的形式，指定key的值。
在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for 的同时，指定唯一的字符串或数字类型 :key 值

{{ item }}

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

如果元素涉及到频繁的切换，最好不用v-if，推荐使用v-show。如果元素可能永远也不会被显示出来，不建议使用v-show，则推荐使用v-if。