初识Vue框架

1.Vue概念整体思想

          1 Vue.js是一套用于构建用户页面的渐进式框架,有自己显著地特点。它的设计采用可以自底向上逐层应用。它的核心库只关注图层，不仅使得开发者更容易上手，而且便于与第三方库和已有项目进行整合。另一方面，与现代化工具链以及各种支持类库进行相结合时，Vue能够为复杂的页面提供驱动。

2.Vue一些指令的使用

           1.v-model指令
                   1.1 概念：实现表单标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。双向的数据绑定即是当数据发生变化的时候，视图会发生变化，而当视图发生变化的时候，数据也会跟着同步变化。
                   1.2 适用范围：input、select、textarea、components。
                   1.3 代码小练习：

<div id="app">
        <!--   唯一一个双向数据绑定指令 -->
        <input type="text"   v-model='msg'>
        <h1>{{msg}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'华容道'
            },
            methods: {}
        });
    </script>

           2.v-on指令
                   2.1 概念：用来绑定一个事件用于调用实例中定义的方法。
                   2.2 代码小练习

<div id="app">
		<!--  方法简写 -->
        <!--   绑定方法传递 实际参数 -->
        <button @click='handler1("hello")'> 第一种方式 方便传递参数 </button>
        
        <div @click='fatherHandler' class="box">
            <!-- 不传递参数 默认会传递事件对象 -->
            <button @click='handler2'> 第二种方式 </button>
        </div>

        <!--   如果参数与事件对象都需要传递 那么事件对象只能写成  $event   而且只能是最后一个参数  -->
        <button @click='handler3("你好", "xxx",$event)'> 第三种方式 </button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "隔壁老周吃烧烤"
            },
            methods: {
                handler1(data) { // 形参
                    console.log(this === vm); //  true
                    console.log(this.msg); // 获取data里面的数据
                },
                handler2(e) {
                    console.log(e);     
                    event.stopPropagation();
                },
                fatherHandler() {
                    alert('fatherHandler')
                },
                handler3(data1, data2, event) {
                    console.log(data1,data2,event);
                }
            }

           3.v-class指令
                   3.1 概念：动态地给元素添加相对应的类名，得到相应的样式。
                   3.2 代码小练习

 <div id="app">
        <div class="red fontSize" @click='changeClass'> {{msg}} </div>
        <hr>
        <!-- v-bind:class="{key:val,key2:val2  }"     key 表示我们的样式类名   val 布尔变量 如果为真 则表示添加对应的样式  为false 则不添加 -->
        <div :class="{fontSize:isActive1, bgc:isActive2  }" @click='changeClass'> {{msg}} </div>
        <!--  数组的语法 -->
        <div :class="[fontsize,textColor]" @click='changeClass'> {{msg}} </div>
        <div :class="[fontsize,textColor,{bgc:isActive2}]" @click='changeClass'>  数组与对象混合使用：  {{msg}} </div>
        <hr>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '  动态 绑定class 样式 ',
                isActive1: true,
                isActive2: true,
                fontsize: 'fontSize',
                textColor:'textColor'
            },
            methods: {
                changeClass() {
                    this.isActive1 = !this.isActive1
                    this.isActive2 = !this.isActive2
                }
            }
        });

           4.v-for指令
                   4.1 概念：将元素进行循环，循环的对象可以是数组，数组里面的内容可以是对象，也可以是普通元素。
                   4.2 代码小练习

 <div id="app">
        <ul>
            <li v-for='item1 in arr'> {{item1}}</li>
        </ul>
        <!--  v-for  是数据 (数组,对象 数字 )  都可以进行遍历-->
        <!-- v-for='item in  data 里面数组的名字 '  item  则表示 数组里面的每一项  -->
        <ul>
            <li v-for='item in list'>
                {{item.title}}
            </li>
        </ul>
        <!--  遍历 带索引 -->
        <ul>
            <li v-for='(item,index) in list'>
                {{item.title}} --------------索引:{{index}}
            </li>
        </ul>
        <!-- 遍历 带索引  带唯一不重复的key   一般用id 作为key -->
        <ul>
            <li v-for='(item,index) in list' :key='item.id'>
                {{item.title}} --------------索引:{{index}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <ul>
            <li  v-for='(val,key,index) in   obj'>
            值： {{val}}  ----- key:{{key}} --------  索引：{{index}}   
            </li>
        </ul>
        <ul>
            <li v-for='item in num'> {{item}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num:10,
                arr: ['张三', '李四'],
                list: [
                    {
                        id: 1,
                        title: 'apple',

                    }, {
                        id: 2,
                        title: 'orange',

                    }, {
                        id: 3,
                        title: 'lemon',
                    }
                ],

                obj: {
                    uname: 'zhangsan',
                    age: 13,
                    gender: 'female'
                }
            },
            methods: {}
        });
    </script>

3.通过上述这些指令实现的小demo

 <style>
        ul{
            display: flex;
        }
        ul li{
            list-style-type: none;
            width: 200px;
            height: 80px;
            text-align: center;
            line-height: 80px;
        }
        .active{
            background-color: orange;
        }
        img{
            display: none;
        }
        .current{
            display: block;
        }
    </style>

  <div id="app">
        <ul>
            <li v-for="(item,index) in list" :keys="item.id" :class='currentIndex == index ? "active" : "" ' @click="handler1(index)">
                <span>{{item.title}}</span>
            </li>    
        </ul>
        <div v-for="(item,index) in list" :keys="item.id" >
            <img :src="item.path" alt="" :class='currentIndex == index ? "current" : "" '>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                currentIndex : 0,
                list : [
                    {
                        id : 0,
                        title : "apple",
                        path : "./img/apple.png"
                    },
                    {
                        id : 1,
                        title : "orange",
                        path : "./img/orange.png"
                    },
                    {
                        id : 2,
                        title : "lemon",
                        path : "./img/lemon.png"
                    }
                ]
            },
            methods : {
                handler1(i) {
                    this.currentIndex = i;
                }
            }
        })
    </script>