Vue学习之基本指令基础

 

框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性大不能随便更换;

库：提供某一个小功能，对项目的侵入性较小，很容易切换库

 

节点（后端）中的MVC与前端的MVVM之间的区别

MVC时候短的分层开发概念View + Controller + Model

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

基本指令

- {{}}插值表达式

- v-cloak解决插值表达式的闪烁问题

- v-text·默认v-text是没有闪烁

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

- v-html把内容当作html放入，也会覆盖原标签内容

- v-bind提供的用于绑定属性的指令

·v-bind可以简写为：样绑定的属性

·v-bind中可以写合法的js表达式

- v-on事件绑定机制

事件修饰符的介绍

- 停止（@ click.stop）阻止冒泡事件

- 防止阻止默认行为（比如标签的默认跳转，加阻止即阻止了跳转）

- 捕获实现捕获事件触发的机制（与冒泡事件相反）从外向里触发

- self实现只有点击当前元素时，才会出发时间处理函数（捕获，冒泡都不执行）

- 曾经只触发一次事件处理函数（.prevent.one只触发一次事件处理函数）

.stop和.self区别

·停止阻止所有的事件冒泡

。自只阻止当前元素的冒泡事件

V模式指令

使用v-model指令可以实现表单元素和model中的数据双向绑定（v-bind只能实现数据的单向绑定，从M自动绑定到v，无法事项数据的双向绑定）

V模型只能运行早表单元素中（输入：广播，文本，地址，电子邮件，选择，复选框，文本域）

在Vue公司中使用样式

- 直接传递数组，注意：这里的类需要使用v-bind做数据绑定：class =“['thin'，'red']”

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

class =“[flag？activ：'']”

数据：{

标志：FLASE;

}

- 在数组中使用对象代替三元表达式

“[ '活性'：旗]”

- 直接使用对象

：class =“{red：true.thin：true，italic：false}”

使用内联样式

- 直接在元素上通过：style的形式书写样式对象

; style =“{color：'red'，'font-weight'：200}”

- 将样式对象，定义到数据，并直接引用到：style中

- 在style中通过数组，引用多个data上的样式

：style =“[styleObj1，styleObj2]”

V型的的使用

- v-for ='列表中的项目'

- 列表中的v-for =（item，i）（i表示索引）

- 用户“在遍历对象身上的健值对的时候除了有val，键第三个位置还有一个索引”中的遍历对象v-for =“（val，key）

使用v-for的时注意事项：

·在组件中使用v-for使，键现在是必须的

·v-for循环的时候，key属性只能使用number获取字符串

·key在使用的时候，必须使用v-bind属性绑定的形式指定key的直

·v-for =“list in list”：key =“item.id”

VUE指令V-如果和V-秀

区别：V-如果特点：每次都会重新删除或创建元素;

v-show特点：每次不会重新重新进行DOM的删除和创建操作，知识切换了元素的显示：无样式

V-如果有较高的切换性能消耗（节点删除或创建）

V-显示有较高的初始渲染消耗（不显示但在初始的时候也渲染）

如果永远不被用户看到用V-如果

如果元素频繁的进行显示，隐藏切换用V-秀;