vue——基础

        this.list[1] = {
            name: ‘setchange‘,
            price: 222
        }
        //列表的改变不会触发视图更新，需要使用Vue.set的方法可以触发视图更新
        Vue.set(this.list, 1, {
            name: ‘setchange‘,
            price: 222
        })

        //1 使用v-bind绑定的class和普通class共存
        <span class="old" :class="bgred">v-bind</span>

        //2 对象的方式绑定
        <span  :class="{bgred:true,color:true}">v-bind</span>

        //3 数组的方式绑定
        <span  :class="[‘bgred‘,‘color‘]">v-bind</span>

        //4 混合使用
        <span  :class="[{‘bgred‘:hasError},‘color‘]">v-bind</span>
        hasError是数据

        <span  :style="linkCss">v-bind</span>
        this.linkCss = {color:‘red‘,‘font-size‘:‘20px‘}

    <a v-if="isPart">显示</a>
    <a v-else>no data</a>

        <father @my-event="onChildClick"></father>
        methods:{
            onChildClick(parmfromChild){
                事件触发时执行
            }
        }

        <button @click="emitMyEvent">触发</button>
        methods:{
            emitMyEvent(){
                this.$emit(‘my-event‘,要传给父组件的数据);
            }
        }

    <input type="text" v-model.lazy="title" /> {{title}}

    <input type="text" v-model.number="num"/>

    <input type="text" v-model.trim="str"/>

    computed:{
        newAttr(){
            return ‘$‘+this.price;
        }
    }

    <input type="text" v-model="myVal"/>
    watch{
        myVal:function(newValue,oldValue){
            console.log(newValue,oldValue);
        }
    }

    //1  引入
    import child from ‘./子组件路径‘;
    //2 放入父组件的components对象中,注册子组件
    components:{
        child
    }
    //3 在父组件的 template中调用
    <child></child>

        <button type="button" name="button" @click="change(1)">1号子组件</button>
        <button type="button" name="button" @click="change(2)">2号子组件</button>
        <div :is="childComponent"></div>


        import ChildComponent1 from ‘@/base/child1‘
        import ChildComponent2 from ‘@/base/child2‘

        data() {
            return {
                childComponent: ‘‘
            }
        },
        components: {
            ChildComponent1,
            ChildComponent2
        },
        methods: {
            change(index) {
                if (index == 1) {
                    this.childComponent = ‘child-component1‘
                } else {
                    this.childComponent = ‘child-component2‘
                }
            }
        }

        父组件中
        <message-child @my-event="listenChild" :info="info">
            <p>我是父组件传递的模板，会显示到子组件的slot位置</p>
        </message-child>

        子组件中，放置slot就会显示
        <div class="">
            子组件内容
            {{info}}
            <button @click="passToFather">发送数据给父组件</button>
            <slot></slot>
        </div>

    当没有内容的时候，会显示no slot，有内容显示传输的内容
    <slot>no slot</slot>

        父组件中
        <message-child @my-event="listenChild" :info="info">
            <p>我是父组件传递的模板，会显示到子组件的slot位置</p>
            <!-- 具名slot -->
            <div slot="header">
                我是header
            </div>

            <div slot="footer">
                我是footer
            </div>
        </message-child>

        子组件中，放置slot就会显示
        <div class="">
            <slot name="header">没有头部</slot>
            子组件内容
            {{info}}
            <button @click="passToFather">发送数据给父组件</button>
            <slot></slot>
            <slot name="footer">没有底部</slot>
        </div>

        mode="out-in" 先出去再进来.

        template
        <transition name="fade" mode="out-in">
            <div class="box" v-show="isShow">
                我是测试动画
            </div>
        </transition>

        css样式
        .fade-enter-active,.fade-leave-active{
            transition: 0.5s;
        }
        .fade-enter,.fade-leave-active{
            opacity: 0;
        }

        定义全局变量 main.js 中定义全局指令
        Vue.directive(‘css‘,{
            //插入之后执行  el:当前元素  bind:绑定的值，打印自己看
            inserted(el,bind){
                console.log(‘inserted‘);
                console.log(bind);
                var obj = bind.value;
                var arr = [];
                for(let key in obj){
                    arr.push(key+‘:‘+obj[key]);
                }
                var style = arr.join(‘;‘);
                el.style.cssText = arr;
            }
        })

        <div class="" v-css="{‘color‘:‘red‘}">
             内容
        </div>