Vue实例-2

接着上一篇我们继续学习有关vue的实例

5.v-if及v-else-if指令

v-if 是一个指令，所以必须将它添加到一个元素上，通俗说就是它必须要有父元素
如果想切换多个元素可以这样写

<!--如果想切换多个元素,此时可以把一个 <template> 元素当做不可见的包裹元素，
并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。-->
<template v-if='ok'>
  <h1>我们不一样</h1>
  <p>哈哈哈哈</p>
</template>

下面是一个v-if的小栗子

<div id="app">
  <button v-on:click="error = !error">Error</button>
  <button v-on:click="success = !success">Success</button>
  <p v-if="error">网络连接错误</p>
  <p v-if="success">网络连接成功</p>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
           error:false,
           success:false
          },
            methods:{}
    })
</script>

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else>
  Not A/B/C
</div>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后

6.V-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<div id="app">
   <ol>
    <li v-for="todo in todos">
    {{ todo.text }}
    </li>
   </ol>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data :{
           todos :[{text:'vue'},
               {text:'vue.js'},
               {text:'vue学习'}]
             }        //    1. vue 
    })                //    2.vue.js 
</script>             //    3.vue学习 

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

<div id="app">
   <ul id="example">
    <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
    </li>
   </ul>
 </div>
<script src="vue.js"></script>
<script>
   var example = new Vue({
       el:'#example',
       data:{
        parentMessage:'哈哈哈',
        items:[ {message:'你好美'},
            {message:'你最美'}]
        }
    })        // .哈哈哈 - 0 - 你好美
              // .哈哈哈 - 1 - 你最美
 </script>

7.初始组件的应用

组件这个东西个人觉得不好学……但是它很好用，我们先来说说组件是干嘛的
组件 (Component) 是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

要注册一个全局组件，可以使用 Vue.component(tagName, options)
组件在注册之后，便可以作为自定义元素 <my-component></my-component>

注册局部组件，仅在其作用域中可用的组件：
var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

我们先来看一个简单的组件应用栗子

<div id="app1">
   <greeting></greeting>
</div>
<script src="vue.js"></script>
<script>
    Vue.component("greeting",{
    template:`  //` `这是用到了es6里面的知识让其进行换行
    <p> {{ name }}:初始组件
       <button v-on:click="changeName">改名</button>
    </p>`,
    data:function(){
        return{
              name:"大佬"
        }
    },
    methods:{
        changeName:function(){
            this.name = "Herry"
                }
        }
    })
    new Vue({
        el:'#app1',
    })
</script>