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
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 组件 返回上一页按钮 )
-
必须使用 native 修饰符 修饰点击事件，否则不会触发 goPreviousView 函数
-
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
