VUE 基础使用

VUE 基础使用

• 动态属性绑定：v-bind: 

<div v-bind:title="msg">{{ msg }}</div>
<!-- 简化 -->
<div :title="msg">{{ msg }}</div>

• 事件绑定：v-on:

<button v-on:click="myClick">按钮</button>
<!-- 简化 -->
<button @click="myClick">按钮</button>
<!-- 修饰符 .enter/.13 -->
<input type="text" @keydown.enter="keydownEvent" />

• 双向绑定：v-model

<input type="text" v-model="myValue"/>
<!-- 修饰符 .lazy / .number / .trim -->
<input type="text" v-model.lazy="myValue"/>

• 内置指令：v-if / v-show / v-else / v-for

<!-- v-if: 控制DOM渲染 -->
<div v-if="boolean">v-if</div>
<!-- v-show: 控制display样式 -->
<div v-show="boolean">v-show</div>
<!-- v-else: 配合v-if/v-show使用 -->
<div v-if="boolean">v-if</div>
<div v-else>v-else</div>

• 修改响应式属性

import Vue from 'vue';
Vue.set(this.list, 1, 'value');

• 组件传值

<!-- 
组件名、属性名、事件名使用的时候，用‘-’转换驼峰命名
变量名需用驼峰命名
-->
<!-- 父组件: 从子组件中取值 -->
<template>
    <p>{{ selected }}</p>
    <my-select :list-to-select="list" @selected="getSelected"/>
    <my-com>
        <p>传入模板</p>
        <p slot="header">具名模板</p>
    </my-comp>
</template>

<script>
export default {
    data() {
        return {
            list: ['apple', 'orange', 'banana', 'pich'],
            selected: ''
        }
    },
    methods: {
        getSelected(msg) {
            this.selected = msg;
        }
    }
}
</script>

<!-- 子组件：$emit传值给父组件 -->
<!-- 传值 -->
<template>
  <div>
    <select v-model="value">
      <option v-for="(item, idx) in listToSelect" :key="idx" :value="item" >{{ item }}</option>
    </select>
  </div>
</template>
  <!-- 传模板 -->
<template>
  <div>
    <slot>默认值</slot><!-- 组件未传模板，显示默认值 -->
    <span>XXXXXXX</span>
    <slot name="header"></slot>
  </div>
</template>

<script>
export default {
    props: ["list-to-select"],
    data() {
        return {
            value: ''
        };
    },
    watch: {
        value() {
            this.$emit('selected', this.value);
        }
    },
}
</script>

• 计算属性：computed

// 计算属性会根据属性值的改变而动态变化
export default {
    data() {
        value: 123
    },
    computed: {
        myValue() {
            return this.value + 111;
        }
    }
}

• 属性监听：watch

// 监听属性变化，触发事件
export default {
    data() {
        value: 123
    },
    watch: {
        value(val, oldVal) {
            console.log(val, oldVal);
        }
    }
}

• 动态组件引入：is="component"

<template>
    <div :is="useAcomponent ? 'com-a' : 'com-b'"></div>
</template>
<script>
    export default {
        data() {
            return {
                useAComponent: true
            }
        }
    }
</script>

• CSS过渡：<transition>

过渡的四个状态，对于四个类名

 可通过v-show、v-if、v-else、v-bind:is触发

<template>
  <div>
    <button @click="show = !show">toggle</button>
    <transition name="fade" mode="out-in">
      <div v-show="show">this is a message</div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: all 1s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}
</style>

• JS过渡

<!-- @before-leave="beforeLeave"
@before-appear="beforeAppear"
@after-enter="afterEnter"
@after-leave="afterLeave"
@after-appear="afterAppear"
@enter-cancelled="enterCancelled"
@leave-cancelled="leaveCancelled"
@appear-cancelled="appearCancelled" -->
<transition 
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
  :css="false"
>
  <div class="box">this is a message</div>
</transition>

<script>
export default {
    methods: {
        toggle() {
          this.msg = !this.msg;
        },
        beforeEnter(el) {
            $(el).css({
                left: '-500px',
                opacity: 0
            })
        },
        enter(el, done) {
            $(el).animate({left: 0, opacity: 1}, {duration: 1500, complete: done})
        },
        leave(el, done) {
            $(el).animate({left: '500px', opacity: 0}, {duration: 1500, complete: done})
        }
    },
}
</script>

• 自定义指令

<!-- 局部指令 -->
<template>
  <div>
    <div v-my-bgc="'red'">12345</div>
  </div>
</template>
<script>
export default {
    directives: {
        myBgc(el, binding) {
            el.style.background = binding.value;
        }
    },
}
</script>

<!-- 全局指令 -->
<script>
// 指令文件
import Vue from 'vue';
const bgDirective = Vue.directive('bg-directive', {
    // 当绑定元素插入到DOM中
    inserted(el, binding) {
        el.style.background = binding.value;
    }
})
export { bgDirective }
// main.js
new Vue({
    directives: {
        bgDirective
    },
    render: h => h(App),
}).$mount('#app')
</script>

• 插件

// 安装
npm install -s vue-router

// 引入
import vueRouter from 'vue-router';

// 使用
Vue.use(vueRouter);