vue.js学习笔记之v-bind,v-on

v-bind 指令用于响应地更新 HTML 特性 形式如：v-bind:href    缩写为    :href;

v-on 指令用于监听DOM事件 形式如：v-on:click  缩写为 @click;

 1 <body>
 2   <div id="test">
 3     <img v-bind:src="src">
 4     <a v-bind:href="url">百度一下</a>
 5     <a :href="url">百度一下</a>
 6     <a href="{{url}}">百度一下</a>
 7     <a v-on:click="update()" href="#">更改图片</a>
 8     <a @click="update()" href="#">更改图片</a>
 9   </div>
10   <script type="text/javascript">
11     new Vue({
12       el: '#test',
13       data: {
14         url: "https://www.baidu.com",
15         src: "img/spring.jpg"16 17 18       },
19       methods: {
20         update: function(){
21           this.src = "img/summer.jpg";
22         }
23       }
24     })
25   </script>
26 </body>

note: vue.js 1.0版本后才有的这两个指令

posted @ 2016-02-25 15:08  MissBean  阅读(47073)  评论(0)  编辑  收藏  举报