Vue 笔记

不支持 IE11

image.png

https://blog.csdn.net/qq_31001889/article/details/84341682

Vuex

image.png vuex 11121651.gif

https://codesandbox.io/s/5w5168km2p
https://vuex.vuejs.org/

Vue UI

vant-ui

slot

<!-- App.vue -->
<template>
  <div id="app">
    <alert-box>
      Something bad happened.
    </alert-box>
  </div>
</template>

<!-- main.js -->
<script>
Vue.component("alert-box", {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot> // Something bad happened. will not display if slot do not inserted
    </div>
  `
});
</script>

vue-slot-example.gif

https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots
https://codesandbox.io/s/vyrlv2m1y3

返回上一页 ( 点击 header 组件 返回上一页按钮 )

1. 必须使用 native 修饰符 修饰点击事件，否则不会触发 goPreviousView 函数

2. to=""不能省略

<template>
  <mt-header title="無題" :style="{fontFamily: 'Microsoft YaHei Light'}" :class="{'is-fixed': fixed}">
    <router-link to="" @click.native="goPreviousView" slot="left">
      <!-- must to use the native qualifier to qualify the click event, or will not trigger function goPreviousView -->
      <mt-button icon="back" v-if="$route.path != '/'"></mt-button>
    </router-link>
  </mt-header>
</template>

<script>
/* eslint-disable */
  export default {
    name: 'c-header',
    props: ['fixed'],
    methods: {
      goPreviousView: function () {
        this.$router.go(-1) // equivalent to `this.$router.back()`
      }
    }
  }
</script>

<style scoped>
</style>

template 属性

import Vue from 'vue'

new Vue({
  el: '#app',
  template: '<div>你好，世界</div>'
})

image.png

https://codesandbox.io/s/l8jjopjpl
https://cn.vuejs.org/v2/api/#template

component

https://codesandbox.io/s/34rpq40mx5
https://www.youtube.com/watch?v=09n2945JW_0
https://cn.vuejs.org/v2/api/#component

render function ( createElement function )

runtime-only

image.png

// e.g.1 ( equal to 2 )
const HelloWorld = Vue.component(
  "hello-world",
  Vue.extend({
    render: function(createElement) {
      return createElement("p", "hello world");
    }
  })
);

// e.g.2 ( equal to 1 )
// const HelloWorld = Vue.component("hello-world", {
//   render: function(createElement) {
//     return createElement("p", "hello world");
//   }
// });

new Vue({
  render: function(createElement) {
    return createElement(HelloWorld);
  }
}).$mount("#app");

image.png image.png

https://codepen.io/MonguDykrai/pen/qLdgVy

https://vuejs.org/v2/api/index.html#Vue-component

ExampleComponent.vue

<!-- ExampleComponent.vue -->
<script>
export default {
  data() {
    return {
      isRed: true
    };
  },

  /*
   * Same as
   * <template>
   *   <div :class="{'is-red': isRed}">
   *     <p>Example Text</p>
   *   </div>
   * </template>
   */
  render(h) {
    return h(
      "div",
      {
        class: {
          "is-red": this.isRed
        }
      },
      [h("p", "Example Text")]
    );
  }
};
</script>

image.png

https://github.com/MonguDykrai/vue-runtime-only

https://alligator.io/vuejs/introduction-render-functions/

runtime-only version

<!-- app.vue -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', // ☆
  router,
  render: h => h(App) // ☆
})

https://github.com/MonguDykrai/vue-runtime-only

Vue.extend

const HelloWorld = Vue.extend({
  render: function(createElement) {
    return createElement("p", "hello world");
  }
});

new HelloWorld().$mount("#app");

image.png

https://codepen.io/MonguDykrai/pen/BvNMOo

vue cli < 3.0

https://www.cnblogs.com/tjyoung/p/6832234.html

createElement arguments

image.png image.png image.png

限制

image.png

https://codepen.io/MonguDykrai/pen/YdyaKb
https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

Make vue-runtime-only support jsx syntax

❀ Install
yarn add babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --dev

https://github.com/vuejs/babel-plugin-transform-vue-jsx

Vue instance props

不使用 render 函数

https://codesandbox.io/s/6157j655lk

使用 render 函数

https://codesandbox.io/s/m72nv1wyy8

this.$Message.error

image.png image.png

https://segmentfault.com/q/1010000012098343
https://www.iviewui.com/components/message

filters

filters: {
  // 格式化时间 2018-12-13T19:51:44.074341 --> 2018年9月25日09:23:45
  formatDate: function (value) {
    if (!value) return '';
    value = value.toString()
    return value.toLowerCase()
  }
}

https://codepen.io/MonguDykrai/pen/WLrNyE

this.$route.params 默认值 id 的问题

其实是路由里配好的，没有隐藏的机制

image.png image.png

this.$emit

https://codesandbox.io/s/3yypwnnknm

https://codepen.io/MonguDykrai/pen/RERpRN

https://blog.csdn.net/sllailcp/article/details/78595077

nextTick

https://codesandbox.io/s/9jj89lkrwo

vue 的 $data 不能通过 forEach 修改值，不会被observer 观察

❀ 根据需要对后台返回的数据做添加、修改

mounted: function () {
  this.getList()
},

data: {
  list: []
},

getList: function () {
  API.getList({data: someData})
  .then(res => {
    const { list } = res.data
    this.list = data.forEach(item => {
      return (item = Object.assign({optionSelected: '')) // 根据需要添加 key
    })
  })
}

a 标签绑定点击事件

<a
  class="a-link"
  href="javascript: void(0);"
  v-on:click="playVideo(item.id)"
  @mouseenter="addEnterColor(item.id)"
  @mouseleave="removeLeaveColor(item.id)"
>
  <img class="ico-play" :src="item.icoPlay" alt="图片加载失败">
  <img :src="item.image" class="poster" style="border-radius: 4px;">
  <h5 :ref="item.id" class="title">{{ item.title }}</h5>
</a>

image.png

beforeRouteLeave

https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

生命周期

image.png