这篇文章介绍的内容是一些简单的Vue.js的指令总结，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
html页面：
{{message}}
登录后复制
页面中的数据就是data中的数据
模版指令：控制模块的内容
v-text (控制元素的文本内容)
eg： --> a 是data中的a
登录后复制
v-html(控制元素的内容，包括内部结构 ）
立即学习“前端免费学习笔记（深入）”；
eg:
登录后复制
控制模块隐藏
v-if
eg: -->isShow的值是布尔值，true：显示， false，隐藏
登录后复制
v-show
eg: -->isShow的值是布尔值，true：显示， false，隐藏
登录后复制
渲染循环列表 v-for
eg:
登录后复制
–>item是items里的每一个对象，items是data里的数组
事件绑定v-on
eg: click 可以是hover，focus等事件eg: 简写形式
登录后复制
属性绑定
v-bind eg：src属性赋值 imgSrc（简写）eg: isRed:true:加上类red，false：不加类redeg: 绑定多个类名eg:
登录后复制
实例：
js：var app = new Vue({ el:"#app", data:{ 这里填写数据，以键值对的形式 a:"heollo", demo:1, items:[{label:"vue1"},{label:"vue2"}] }, methods:{这里可以写自己定义的函数， doSomething:function(){ console.log(this.a); --> this指代的是vue的对象， a 是data里的a } }, watch:{ 监听，监听demo的变化， 参数是变化前后的值变化 'demo':function(val, oldVal){ console.log(val, oldVal); } } });
登录后复制
相关推荐:
Vue.js自定义指令的用法与实例
Vue.js入门-内置指令v-html
Vue.js知识总结——指令
vue.js使用注意事项
以上就是一些简单的Vue.js的指令总结的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2769624.html
