vue学习笔记(一)

内部指令

1.v-if (v-else)

v-if 是用来判断是否加载 DOM 的,比如在判断登录状态时可以使用。

2.v-show

v-show 是用来调整 css 中的 display 属性的,而 DOM 已经加载

v-if 和 v-show 的区别

  • v-if:判断是否加载 DOM 元素,在需要时才加载,可以减轻服务器压力
  • v-show:调整 css 中的 display 属性,相比 v-if 可以使客户端操作更加流畅

3.v-for

v-for 是循环渲染一组 data 中的数组,以 item in items 的形式遍历

4.v-text&v-html

v-text 类似于 jq 的 text() 方法,v-html 类似于 jq 的 html() 方法,我们使用插值 {{}} 的时候,是有弊端的,如果网速慢或者 js 出错时,会暴露我们的 {{xxx}},v-text 就是为了避免这一问题

5.v-on

v-on 用来绑定事件,例如 v-on:click="add" 给 元素添加一个 add 方法,v-on:keyup=“reduce” 给元素添加一个键盘事件等,可以简写成 @click 和 @keyup

6.v-model

v-model 用于双向数据绑定

7.v-bind

v-bind 用于动态绑定属性,可以绑定 css 样式,src 值,自定义属性等,可以用 : 简写为 :class="className"

8.其他指令

v=pre 在模板中跳过 vue 的变异,直接输出原始值;

v-cloak 在 vue 渲染完指定的 dom 后才进行显示,必须和 css 样式 [v-cloak]{display:none} 一起使用;

v-once 在第一次 dom 渲染时加载,完成后视为静态内容,跳出以后的渲染过程等等

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章