vue框架指令总结

1、{{ 数据}}指令的使用

<div id="app">
      <p>{{ message }}</p>
    </div>
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello'
      }
    })
    </script>

2、v-html指令

<div v-html="message"></div>

3、 v-bind 指令

<div v-bind:class="{'class1': use}"> </div>
<a v-bind:href="url">菜鸟教程</a>

 data:{
      use: false
       url: 'http://www.runoob.com'
  }

4、 v-if指令、v-else 指令、v-else-if
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素

 <p v-if="seen">现在你看到我了</p>

5、v-show 指令

<h1 v-show="ok">Hello!</h1>

6、v-model 指令来实现双向数据绑定

	 <p>{{ message }}</p>
    <input v-model="message">
    data: {
		 message: 'Runoob!'
	 }
	 v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

7、v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">
    <!-- 缩写 -->
<a @click="doSomething"></a>

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

8、v-for 指令
需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

a、  <li v-for="site in sites"> 
    	{{ site.name }}  
    </li>
b、<li v-for="(value, key) in object">	
    {{ key }} : {{ value }}	
    </li>
c、 <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
d、		<li v-for="n in 10">
   		  {{ n }}
    	</li>
    
js脚本、   data: {
       					 sites: [
         						 { name: 'Runoob' },
        					  { name: 'Google' },
        					  { name: 'Taobao' }
       					 ]
   			   }