VUE基本结构

vue基本结构

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

Vue指令

{{}} 插值表达式 v-text v-html {{}} v-text v-html 都可以向页面插入数据，v-text v-html 会将标签内的数据覆盖，{{}}使用更加方便 ，但是会出现闪烁问题 v-cloak 可以解决{{}}产生的闪烁问题

v-for 循环

循环普通数组 循环对象数组 循环对象 循环数字

与v-for 配合使用的key属性 ----维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性

V-if 和v-show

v-if 判断显示隐藏 让整个dom元素显示或者消失 特点： 每次都会重新删除或者创建元素 v-show 判断显示隐藏 控制元素的display:none/block 特点：不会重新删除或者创建元素，只是控制display:none/block v-if 会有比较高的切换性能消耗 v-show 会有比较高的初始渲染性能消耗 ，如果元素被频繁操作建议使用v-show

v-bind 用于属性的绑定 ，可以简写为 :绑定的属性 :href v-on 用于事件的绑定 v-on:click=””，可以简写为 @click 如果是方法调用，可以加括号也可以不加括号，当需要传参的时候得加括号

事件的修饰符

stop 阻止冒泡 比如 @click.stop=”” prevent 阻止默认事件 比如 @click.prevent=”” 同样可以连写 @click.prevent.stop=”” capture 触发捕获的事件机制 @click.capture=”” self 只有当事件在本身上触发时，才会触发事件 self只会阻止自己身上的冒泡行为，不能真正的阻止冒泡行为 once 只会触发一次 passive 告诉浏览器不想阻止某些默认行为

$event

如果需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

在vue中使用样式

1.通过class 写的样式 2.内联样式