这篇文章介绍的内容是一些简单的vue.js的指令总结，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
html页面：
<p id="app">{{message}}</p>
页面中的数据就是data中的数据
模版指令：控制模块的内容
v-text (控制元素的文本内容)
eg： <p v-text="a"></p> --> a 是data中的a
v-html(控制元素的内容，包括内部结构 ）
eg:<p v-html="a"></p>
控制模块隐藏
v-if
eg:<p v-if="isshow"></p> -->isshow的值是布尔值，true：显示， false，隐藏
v-show
eg:<p v-if="isshow"></p> -->isshow的值是布尔值，true：显示， false，隐藏
渲染循环列表 v-for
eg: <ul>　<li v-for="item in items">　<p v-text="item.label"></p> -->item是items里的每一个对象，items是data里的数组 　</li></ul>
事件绑定v-on
eg:<button v-on:click="dosomething"></button> click 可以是hover，focus等事件 eg: <button @click="dosomething"></button> 简写形式
属性绑定
v-bind eg：<img v-bind:src="imagesrc"> src属性赋值 imgsrc （简写）eg: <p :class="{red:isred}"></p> isred:true:加上类red，false：不加类red eg: <p :class="[classa, classb]"></p> 绑定多个类名 eg: <p :class="[classa,{classb: isb, classc: isc}]"></p>
实例：
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的指令总结的详细内容。