vue的基础用法（2）

v-if v-show

v-if 指令用于条件性地渲染一块内容，如果想切换多个元素呢？此时可以把一个template元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含 template 元素。

<h1 v-if="awesome">Vue is awesome!</h1>
    <!-- 也可以用 v-else 添加一个“else 块”： -->

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-show 另一个用于根据条件展示元素的指令。

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

区别
v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

v-for

我们可以用v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

自定义指令&钩子函数

自定义指令 其实就是写一个回调函数
钩子函数 就是回调函数
钩子函数的作用 : 让开发人员在特定的时候 执行自定义逻辑

    el 是使用了自定义指令的这个dom元素
    注意 : 自定义指令的名称里面不能有大写字母

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
<script>
Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})
</script>

计算属性

在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，比如

<div>
{{text.split(',').reverse().join(',')}}
</div>.

这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性

注意点:
1.计算属性里面使用到的值必须跟data里面数据一样
2.计算属性中在data里面拿到的数据发生变化 就会重新计算
3.在什么时候使用？当数据必须经过计算才能得到 并且依赖于data里面的数据 那么就可以使用计算属性
这样改写上面代码:

<div id="cal">
          {{ReversedText}}
 </div>
<script>
       var cal= new Vue({
            el: "#cal",
            data: {
                text:"123,456",
            },
            computed: {
                ReversedText: function ()
                {
                    //所有计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果
                    return this.text.split(',').reverse().join(',')
                }
            }
        })
</script>