学习vue ---Cap3

今天我们学习的是vue里面的指令，指令 是带有 v- 前缀的特殊 属性（attribute）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

第一个 --- v-if="seen"(这里的seen也可以自命名)

  <div id="app" v-if="seen">
      如果 seen 的值是true那么这段话就可以显示，如果seen的值是false那么这段话就不可见
   </div>

var data = {
    seen: false,
}
var vm = new Vue({
    el: '#app',
    data:data    
})

所以v-if直接用来判断的其实只有true和false两个值。同时，v-if实现消失的方法是直接将v-if所在的节点及所有子节点全部注释来达到消失的方法。

第二个 --- v-bind：attribute(属性）

v-bind已经是我们的老朋友了，在上一个随笔中已经有过简单的介绍，这里就再次加深一下印象。

<div id="app" v-if="seen">
      <a v-bind:href="url">点我前往Edwards的主页</a>
   </div>

var data = {
    seen: true,
    url: "https://www.cnblogs.com/Edwords-blog/"
}
var vm = new Vue({
    el: '#app',
    data:data    
})

注意哈一开始的时候我以为v-bind已经强大到使div变成一个可以跳转的超链接，其实是不可以的，只能用在a标签上

第三个 --- 修饰符。 修饰符 (modifier) 是以半角句号" . "指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如：.stop ---请看代码

.stop的作用就是让它所在的dom节点里的只发生一次作用并不会波及到父节点或者子节点，接下来的代码就可以很直观的来显示了。

<div id="app" v-if="seen">
      <div @click="click1">
         <div @click.stop="click2">点击我触发事件</div>
      </div>
   </div>

在这里如果click2所在的div 里的点击事件没用添加 .stop 的话，那么有下面的JavaScript的代码可知，控制台会输出两个值，并且先输出click2，然后输出click1。再加上.stop这个修饰符，就只会输出 click2 这一个结果。

var data = {
    seen: true,
}
var vm = new Vue({
    el: '#app',
    data:data,
    methods: {
        click1: function() {
            console.log("click1");
        },
        click2: function(){
            console.log("click2");
        }
    }    
})

补充说明：

在 上面使用到的@clink这类的用法其实是 v-on 的缩写。

他的缩写过程是这样的：

<div v-on:click="click1">
    <div v-on:click="click2">....</div>
</div>
<!-- 下面就是简写 -->
<div @click="click1">
    <div @click="click2">....</div>
</div>

这下应该没有那么懵逼了把，我也是，嘻嘻嘻嘻嘻

其实v-bind 也可以缩写，它的缩写过程是这样的：

<div v-bind:href="www.baidu.com">....</div>
<!-- 可以缩写成这样 -->
<div :href="www.baidu.com">....</div>