vue——基础

改变数组的某一个元素，触发视图更新

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

标签属性

1 v-bind绑定的标签属性为动态绑定，数据更新则视图更新，简写 v-bind:src="imgSrc" <==> :src="imgSrc"

2 用v-bind 绑定class

        //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是数据

3 用 v-bind 绑定 style

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

条件渲染 v-if (元素添加/移除) v-show （显示/隐藏）

v-else,即可以配合v-if 也可以配合 v-show使用

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

Vue事件绑定-表单事件绑定

绑定方式 v-on:click="方法()" <==> @click="方法()"

事件修改器

  • @click.stop="事件()" 阻止冒泡
  • @keydown.enter="事件()" 键盘键入 enter的时候才触发事件
  • @keydown.13 = “事件()” 键盘键入的键的编码是13的时候触发事件

自定义事件

在父组件中定义自定义事件
        <father @my-event="onChildClick"></father>
        methods:{
            onChildClick(parmfromChild){
                事件触发时执行
            }
        }

事件如何被触发呢？在子组件中通过 eimt触发

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

表单中的事件

1 lazy： 延迟更新
    <input type="text" v-model.lazy="title" /> {{title}}
2 number 输入值转成数组
    <input type="text" v-model.number="num"/>
3 trim 去掉前后空格
    <input type="text" v-model.trim="str"/>
4 制作checkbox 见 base/form base/component/select.vue

计算属性 根据其他属性的变化进行同步变化

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

数据监听 watch

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

组件间的通信

1 在父组件中使用子组件

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

2 使用is 引入组件，实现动态绑定组件。base/componentPage.vue

        <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'
                }
            }
        }

3 父子组件的通信

4 给子组件动态绑定数据

5 插槽功能

父组件向子组件传递信息，传递的是模板

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

        子组件中，放置slot就会显示
        <div class="">
            子组件内容
            {{info}}
            <button @click="passToFather">发送数据给父组件</button>
            <slot></slot>
        </div>
2 插槽默认值
    当没有内容的时候，会显示no slot，有内容显示传输的内容
    <slot>no slot</slot>
3 具名slot，可以根据name值，定向显示模板内容
        父组件中
        <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>

总结

组件交出数据三种方式
  1. 通过v-bind 将数据从父组件传入到子组件
  2. this.$emit 将子组件的数据发回父组件
  3. slot 插槽功能

动画

  • 动画
  • 自定义指令
  • mixins
  • 插件

动画

css 实现动画
        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;
        }
接受的过度状态
  • v-if
  • v-show

  • :is 动态组件

        动态组件
    <div class="">
        <transition name="fade" mode="out-in">
            <div :is="currentView"></div>

        </transition>
        <button type="button" @click="toggleCom()" name="button">切换</button>
    </div>

    toggleCom() {
        if (this.currentView == 'Trans1') {
            this.currentView = Trans2;
        } else {
            this.currentView = Trans1;
        }
    }

自定义指令

使用 Vue.directive]

        定义全局变量 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>

路由

posted @ 2017-06-26 21:29  仇枫empress  阅读(418)  评论(0)    收藏  举报