码迷,mamicode.com
首页 > 其他好文 > 详细

vue——基础

时间:2017-06-26 22:45:49      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:空格   name   就会   fan   []   ntp   事件触发   listen   dir   

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

        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>

路由

vue——基础

标签:空格   name   就会   fan   []   ntp   事件触发   listen   dir   

原文地址:http://www.cnblogs.com/MrsQiu/p/7082569.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!