vue入门篇之内部指令

vue内部指令：带有v-前缀的特殊属性，绑定表达式，类似js表达以及过滤器。特殊指令有的需要加“：”

作用：表达式的值 发生改变这个变换将反应在dom上。

 常用指令：

v-if/v-else:判断true/false 显示与隐藏  可以减轻服务器压力，在需要的时候加载

v-show：调整css的display属性客户端操作更加流畅

v-for：数组循环渲染（a in arr）;绑定a就可以循环出数组的内容

v-text：绑定数据  很好的解决了获取数据慢或者js出现问题时页面出现{{msg}}等字样

v-html：将js生成的html标签绑定在页面上（最好不要使用，容易被xss攻击）

v-on：监听事件（ 简写@）不但能检测click而且还可以检测按下键盘：eg：keyup.enter=“”

v-model：绑定数据源 其有三种修饰符①v-model.lazy:离开焦点是执行②v-model.number：只能绑定数字③v-model.trim：元素前面的空格删掉

v-bind：标签属性绑定缩写“ ：”

     v-bind的应用场景：（绑定的值必须在data中声明）

     1.可以直接绑定样式  v-bind：class=“类名”。

     2.绑定判断 v-bind：class=“{class：isok}”，当isok为true时显示，为false时不显示。

     3.绑定数字 v-bind：class=“[class，style]”.其中根本是绑定了多个类名。

     4.绑定三元表达式 v-bind：class=“isok？class：style”。

     5.绑定style    v-bind：style=“{color：color}”data中声明color：‘blue’。

       6.绑定对象    v-bind：style=“{objStyle}” 在data中使用eg：font-size应该改为驼峰是fontSize

v-pre：原样输出

v-cloak：渲染（页面）完成之后才显示

v-once：只在第一次加载时进行渲染，完成之后跳出渲染循环