vue基础知识整理

Posted 2021-01-05 endymion

实例-vue是由实例组成的

根实例
组件也是实例

以$开头的单词都是代表着vue的实例属性实例方法

vue实例中的生命周期钩子

8个生命周期函数
这几个函数不用放到methods里面

计算属性

尽量使用计算属性而不是watch！

可以配合着计算属性使用setter和getter

绑定样式

• 对于非行内样式
  方法一：
  :class=“{becomeRed: isActivated}”
  其中isActivated放到data里面，如果是true，就有becomeRed这个class，否则就没有。

方法二：

:class=“[becomeRed]”

data:{ becomeRed: “”}

becomeRed里面放类名

• 对于行内样式

:style=“styleObj”
//或
:style=“[styleObj,
{fontSize: ‘20px‘}]”

data:{
    styleObj:{
        color:”black”
    }
}

v-if和v-show

后者只是隐藏而已，dom元素还在；前者直接杀掉dom元素。

使用后者性能更高。
如果要使用v-if，而且這個要隱藏的組件以後還會顯示，我們可以在這個組件標籤裡面加上一個v-once，以此來增加性能，不讓這個組件死掉。

v-if和v-else

两个东西要连着写！

数组

如果想改变数组，界面跟着变。不能使用方括号来改。
有三种方式：

1. 使用数组遍历函数
2. 改变数组的引用
3. set方法：

Vue.set(vm.userInfo,1,5)
//或
vm.$set(vm.userInfo,2,10)

template占位符

起一个包裹的作用

向对象中注入新的属性

1. 改变对象的引用
2. set方法：

Vue.set(vm.userInfo,”address”,”beijing”)
//或
vm.$set(vm.userInfo,”address”,”beijing”)

使用自定义组件时

is属性

在table、ul、select下面使用自定义标签时，使用is属性解决模板标签的bug

data

不应该是个对象，而是个函数，返回content，这样的话，返回一个引用，每个子组件都可以拥有独立的数据，互不干扰。

获取dom

对原生标签

ref=‘hello’

this.$refs.hello

对自定义标签

使用ref返回的是引用。

父子组件的数据传递

父传子

通过属性的形式传递数据

<counter :count = "0"></counter>//传数字


    <counter count = "1"></counter>//传字符串

单向数据流：
父组件可以向子组件传递数据，但是子组件不能修改父组件传过来的东西。因为有可能其他组件还在使用父组件传递过来的数据，会影响其他组件。

如果要修改，得copy一份副本，修改这个副本

子传父

激发事件emit

参数校验

props后面不写数组了，改写成一个对象，like this：

props: {
    content: {
        type: String,
        validator: function(value) {
            return (value.length > 5)
        }
    },
    index: Number,
    num: [String,Number],
    fuck: {
        type: String,
        required: false,
        default: ‘default value‘
    }
}

props特性

父组件向子组件传属性，子组件在props里面刚好声明了，即父传子接。
父组件和子组件有一种对应特性：

1. 这个传递属性不会在dom上显示；
2. 子组件接受了props后，子组件就可以使用差值表达式将其显示出来。

非props特性

父组件向子组件传属性，但是子组件在props里面却没有声明该属性。
即父传子不接。

1. 子组件没办法获取该属性的内容，因为没有获取；
2. 非props特性会显示在dom元素里面的。

如何给自定义组件绑定原生事件？

• 方法一：

1. 给子组件绑定一个原生事件，触发子组件函数；
2. 在子组件函数里面监听，然后$emit一个自定义事件给自定义组件即可

• 方法二：
  直接在自定义事件上面加native修饰符，这样写：
  @click.native = “handleClick”

如何解决复杂的组件间传值？

1. vuex
2. 发布订阅模式（总线机制/Bus/观察者模式）

总线机制

  <div id="app">
    <child content="旭凤"></child>
    <child content="锦觅"></child>
  </div>

  <script type="text/javascript">

    Vue.prototype.bus = new Vue();

    Vue.component(‘child‘,{
      data: function() {
        return {selfContent: this.content}
      },
      props: [‘content‘],
      template: "<div @click=‘handleChildClick‘>{{selfContent}}</div>",
      methods: {
        handleChildClick: function() {
          this.bus.$emit(‘change‘, this.selfContent);
        }
      },
      mounted: function() {
        var that = this;
        this.bus.$on(‘change‘, function(msg) {
          that.selfContent = msg;
        })
      }
    });

    var app = new Vue({
      el: ‘#app‘
    });
  </script>

插槽

<slot>默认内容</slot>

具名插槽

给插槽起一个名字，插到指定的位置

作用域插槽

当子组件做循环或某一部分它的dom结构应该由外部传进来的时候，使用作用域插槽。

<div id="app">
    <sweet>
      <template slot-scope=‘props‘>
        <h1>{{props.item}}</h1>
      </template>
    </sweet>
  </div>

  <script type="text/javascript">

    Vue.component(‘sweet‘,{
      data: function() {
        return {
          list: [‘錦覓‘, ‘旭鳳‘, ‘潤玉‘]
        }
      },
      template:
      `<div>
        <ul>
          <slot
            v-for=‘item in list‘
            :item=‘item‘
          ></slot>
        </ul>
      </div>`
    })
    var app = new Vue({
      el: ‘#app‘
    });
  </script>

動態組件

<component :is=“type”></component>
這個type是根實例data裡面的一個屬性，用於替換component變成你自定義過的自定義組件。

可以用於替代v-if的效果！

---

動畫

过渡动态效果

渐入

渐出

  <div id="app">
    <transition name=‘fade‘>
      <div v-show=‘seen‘>香蜜沉沉烬如霜</div>
    </transition>
    <button type="button" @click=‘handleBtnClick‘>change</button>
  </div>

<style>
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }

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

Animate.css

• keyframes自定义的标签动画
• 导入animate库

<transition
         name="fade"
         enter-active-class="animated swing"
         leave-active-class="animated shake"
      >
        <div v-show=‘seen‘>香蜜沉沉烬如霜</div>
      </transition>

如何让刷新之后自动显示动画？

在transition标签里面加上这么两个属性：

appear

appear-active-class=“animated swing”

如何让keyframes动画和transiton动画融合在一起？

都放到enter和leave的那两个active class里面去。

两者时间不统一，如何设定动画时间？

在transition标签里面加上这么几条属性即可：

:duration=“{enter: 5000, leave: 10000}”

//或
:duration="1000"

//或
type="transition"

js动画

使用js动画钩子。

<transition
         name="fade"
         @before-enter="handleBeforeEnter"
         @enter="handleEnter"
         @after-enter="handleAfterEnter"
      >
        <div v-show=‘seen‘>香蜜沉沉烬如霜</div>
      </transition>

methods: {
          handleBtnClick: function() {
            this.seen = !this.seen
          },
          handleBeforeEnter: function(el) {
            el.style.color = ‘pink‘;
          },
          handleEnter: function(el, done) {
            setTimeout(()=>{
              el.style.color = ‘blue‘
            },2000);
            setTimeout(()=>{
              done()
            },4000);
          },
          handleAfterEnter: function(el) {
            el.style.color = ‘red‘
          }
        }

使用velocity.js来创作js动画

  methods: {
          handleBtnClick: function() {
            this.seen = !this.seen
          },
          handleBeforeEnter: function(el) {
            el.style.opacity = 0;
          },
          handleEnter: function(el, done) {
            Velocity(el,{
              opacity: 1
            },{
              duration: 1000,
              complete: done
            })
          },
          handleAfterEnter: function(el) {
            console.log(‘4s是垃圾！‘)
          },

          handleBeforeLeave: function(el) {
            el.style.opacity = 1;
          },
          handleLeave: function(el, done) {
            Velocity(el,{
              opacity: 0
            },{
              duration: 1000,
              complete: done
            })
          },
          handleAfterLeave: function(el) {
            console.log(‘我走了！‘)
          }
        }

多元素过渡效果

• 對原生組件

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


  <transition
         name="fade"
         mode="out-in"
      >
        <div v-if=‘seen‘ key=‘flower‘>錦覓</div>
        <div v-else key=‘bird‘>旭鳳</div>
      </transition>

• 對自定義組件

<child v-if=“show”></child>
<child-one v-else></child-one>

• 對動態組件
  直接用component標籤替換這兩child，就可以直接使用。效果一樣哦。

列表過渡

使用transition-group標籤代替transition標籤，來包裹列表，其他部分使用起來和前面一樣。

原理

相當於在每一個表項div外面包裹了一個transition標籤，對它使用一些如v-enter的class。

動畫封裝

不用css動畫了，用js動畫。