vue内置指令详解

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a><!-- 缩写 --><a :href="url" rel="external nofollow" rel="external nofollow" >...</a><div :title='title'>标题</div>var app = new Vue({  el: '#app',  data: {     url: 'www.baidu.com',　　　　title: 'bind'  },}）

<!-- 完整语法 --><a v-on:click="doSomething">...</a><!-- 缩写 --><a @click="doSomething()">...</a>　　　　//是一个方法名<p ng-if='show'>一段文本</p><button @click="show=false">点击隐藏文本</button>　　//直接是一个内联的语句<button v-on:click="count++">Add 1</button>var app = new Vue({  el: '#app',　　data:{　　　　show: true，　　　　counter： 0　　},  methods: {    doSomething: function(){      console.log(this.title);    },  }}）

  <div @click="stopClick1('stop1',$event)">      <div @click="stopClick2('stop2',$event)">        <div @click="stopClick3('stop3',$event)">阻止冒泡</div>      </div>    </div>　　</div>methods:{    stopClick3: function(message, event){      console.log(message);      event.stopPropagation();  //阻止冒泡    },    stopClick2: function(message, event){      console.log(message);    },    stopClick1: function(message, event){      console.log(message);    }}

<div @click.stop="stopClick3('stop3')">阻止冒泡</div>　　//不用通过$event事件再来写了

＜ ！一阻止单击事件冒泡一〉<a @click.stop=”handle "></a>〈！一修饰符可以串联一〉<a @click.stop.prevent=” handle ” ></a>〈！一添加事件侦听器时使用事件捕获模式一〉<div @click . capture=”handle ”> ... </div>〈！一只当事件在该元素本身（而不是子元素） 触发时触发回调一〉<div @click.self=” handle ”> ... </div>＜ ！一只触发一次，组件同样适用一〉<div @click.once=” handle ”> ... </div>

＜ ！一只有在keyCode 是13 时调用vm.submit()一〉<input @keyup.13 ＝“ submit ”〉

<div id= "app ">    <ul>      <li v-for="book in books">{ { book.name } }</li>    </ul>  </div>var app =new Vue({  el: '#app',  data: {    books: [      {name: '<vue.js实战>'},      {name: '<javascript语言精粹>'},      {name: '<javascript高级程序设计>'}    ]  }});

  <div id="app">    <ul>      <li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>    </ul>  </div>

  <div id= "app">    <ul>      <li v-for="(value , key , index) in user ">        { { index } } - { { key } } : { { value } }      </li>    </ul>  </div>var app = new Vue({  el: '#app',  data: {    name: 'Aresn',    grender: '男',    age:23  }});

 <div id="app">    <span v-for="n in 10">{{n}}</span>  </div>

app.books.push({  name: '《css世界》'});

app.books = app.books.filter(function (item) {  return item . name.match(/JavaScript/);});

  <div id="app">    <ul>      <template v-for="book in filterBooks">        <li>书名：{{book.name}}</li>        <li>作者：{{book.author}}</li>      </template>    </ul>  </div>var app= new Vue({  el: '#app',  computed: {    filterBooks: function(){      return this.books.filter(function (book) {        return book.name.match(/JavaScript/);      })    },  }});