vue.js 的常用指令

v-if v-else v-show 指令

v-if:判断是否加载,可以减轻服务器的压力,在需要时加载。

v-show:调整css display属性,可以使客户端操作更加流畅。

 v-for指令

解决模板循环问题v-for指令是循环渲染一组data中的数组,v-for 指令需要以item in item 形式的特殊语法,items是原数据数组并且item,是数组元素迭代的别名你的需求是需要哪个标签循环

在上一篇文章《v-for指令:解决模板循环问题》有讲

v-text 和 v-html

当网速慢的时候会出现bug ,可以使用v-text直接输出html标签

 v-html,在项目中尽量少用,会引起黑客攻击

 v-on 指令

@的简写

 v-model 数据源绑定

经常使用在表单里面修饰符:

v-model.lazy  延迟出现v

-model.number  只有里面是数字才可以被绑定,一开始输入为计算

v-model.trim  把前后的空格删除

文本框、文本域、多选框、单选框的双向数据绑定

多选按钮绑定一个值多选绑定一个数组,记得代码里面要绑定一个value 

value值跟id值是一样的,

v-model="name1",

数据源绑定的是同一个数组data:{name1:[],}

 v-bind 指令标签属性绑定

简写 冒号:绑定的标签属性:绑定的时候都需要在data里面进行声明绑定class 中的属性和绑定class 中的判断 :

class绑定class中的数组    

:class 绑定class中的三元运算符:

class绑定Style      :style

绑定style

在data里面声明的代码:data:{yellow:'yellow',font:'30px',}

对象绑定Style  :style

绑定style对象

在data里面的代码:

  styleObject:{                    

    color:'orange',                    

    fontSize :'40px',                                    

        }

在vue里面不支持-的写法,比如front-size,要写成frontSize

 其他指令

这几个指令都是直接使用,直接在div或者其他标签里面加入v-pre就可以了

v-pre 原样输出

  v-cloak  渲染完成后,才显示

  v-once 只在第一次的时候渲染

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,680评论 0 6
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 11,275评论 0 42
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,799评论 4 129
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,973评论 19 139
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,473评论 0 29

友情链接更多精彩内容