Vueday02

Vueday02
1.tab切换

<!-- 2、视图层 -->
    <div id="app">
        <ul>
            <!-- 根据索引找数据 -->
            <li v-for="(item,index) in list " :key="item.id" @click="change(index)">
                {{item.title}}
                <!-- 未点击的隐藏起来 -->
                <div v-show="activeIndex==index">
                    {{item.content}}
                </div>
            </li>
        </ul>

    </div>
    //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                activeIndex: 0,
                list: [
                    {
                        id: 1,
                        title: '选项一',
                        content: '内容一'
                    },
                    {
                        id: 2,
                        title: '选项二',
                        content: '内容二'
                    },
                    {
                        id: 3,
                        title: '选项三',
                        content: '内容三'
                    }
                ]

            },
            // 方法
            methods: {
                change(index) {
                    // 打印点击的索引
                    console.log(index);
                    this.activeIndex = index
                }
            }
        })

2.过滤器

 <!-- 2、视图层 -->
    <div id="app">
        <!-- 插值表达式 -->
        {{msg}}
        {{msg |setMsg(666)}}

    </div>
    <div id="idd">
        {{msg}}
    </div>
    <script>
        /*
        全局
        第一个参数：过滤器的名字
        第二个参数：回调函数（data,formate)
        */
        // Vue.filter('setMsg ', function (data, format) {
        //     console.log(data);
        //     console.log(formate);
        // })
        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                msg: '你真个小可爱 ',

            },
            // 方法
            methods: {},
            // 过滤器
            filters: {
                setMsg(data, word) {
                    console.log(data);//你真个小可爱
                    console.log(word);//666
                    return data.replace('可爱', '**')
                }
            }
        })
        const vmodel = new Vue({
            el: '#idd',
            data: {
                msg: '你是个大好人'
            },
            methods: {
            }
        })

    </script>

3.键盘修饰符

<!-- 2、视图层 -->
    <div id="app">
        <!-- 插值表达式 -->
        <input type="text" @keyup="keyup">
        <br>
        <!-- < a  65> -->
        <input type="text" @keyup.65="keyup">
        <br>
        <!-- m -->
        <input type="text" @keyup.m="keyup">
        <br>
        <!-- tab -->
        <input type="text" @keyup.tab="keyup">
        <input type="text" @keyup.tab="keyup">

    </div>
    <script>
        // 自定义按键别名
        Vue.config.keyCodes.m = 77
        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {


            },
            // 方法
            methods: {
                keyup(event) {
                    console.log(event);
                    console.log('点到我了！！');
                }
            }
        })

    </script>

4.自定义指令

<div id='app'>

        <!-- 2、视图层 -->
        <div v-color="color">快放元旦了</div>
        <div v-color="'green'">快放元旦了</div>

        <input type="text" v-color>
        <input type="text" v-color>

        <!-- 打印的最后一次，才有a!! -->
        <!-- 双向会改变 -->
        <input type="text" v-color v-model="value">

    </div>

    <script>
        /* 
      第一个参数：指令的名字，定义的时候不加v-,使用的时候加上v-
      第二个参数：对象（三个函数）
      */
        Vue.directive('color', {
            // bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
            // 虚拟DOM

            bind(a, b) {
                // 当前dom元素
                // console.log(a);
                // 当前object
                // console.log(b);
                // a.style.color = b.value
            },
            // 	inserted 这个元素已经渲染到界面上之后执行
            inserted(a, b) {
                // a.focus()
            },
            // 	update 当元素有更新的时候执行
            updata(a) {
                // console.log(a);
            }
        })
        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                msg: 'hello Vue',
                color: 'red'

            },
            // 方法
            methods: {},
            // 私有定义
            directives: {
                // color(el, binding) {
                //     console.log(el);
                //     console.log(binding);
                //     el.style.color = binding.value
                // },
                // 把color当对象
                color: {
                    bind(a,b) {
                        console.log(a);
                        a.style.color = b.value

                    },
                    inserted() {

                    },
                    updata() {

                    }
                }
            }
        })

    </script>

本地存储

<div id='app'>

        <!-- 2、视图层 -->
        <div v-color="color">快放元旦了</div>
        <div v-color="'green'">快放元旦了</div>

        <input type="text" v-color>
        <input type="text" v-color>

        <!-- 打印的最后一次，才有a!! -->
        <!-- 双向会改变 -->
        <input type="text" v-color v-model="value">

    </div>

    <script>
        /* 
      第一个参数：指令的名字，定义的时候不加v-,使用的时候加上v-
      第二个参数：对象（三个函数）
      */
        Vue.directive('color', {
            // bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
            // 虚拟DOM

            bind(a, b) {
                // 当前dom元素
                // console.log(a);
                // 当前object
                // console.log(b);
                // a.style.color = b.value
            },
            // 	inserted 这个元素已经渲染到界面上之后执行
            inserted(a, b) {
                // a.focus()
            },
            // 	update 当元素有更新的时候执行
            updata(a) {
                // console.log(a);
            }
        })
        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                msg: 'hello Vue',
                color: 'red'

            },
            // 方法
            methods: {},
            // 私有定义
            directives: {
                // color(el, binding) {
                //     console.log(el);
                //     console.log(binding);
                //     el.style.color = binding.value
                // },
                // 把color当对象
                color: {
                    bind(a,b) {
                        console.log(a);
                        a.style.color = b.value

                    },
                    inserted() {

                    },
                    updata() {

                    }
                }
            }
        })

    </script>