echartsは余白を取り除くことができますか?実戦テクニック、Vueはもともとこのように書くことができます
31674 ワード
❝
2羽の黄❞
毎日出勤して繰り返しのコードを書いて、1つのcv仔が、8、9時まで忙しくて、仕事の効率が低くて、自分が何の向上もないと感じます.どのように更に速く手元の仕事を完成することができて、自分の开発の効率を高めて、前の1篇の《绝対干物~!これらのVueの小さい技巧をマスターして、早く退勤して女神とデートすることができます》で、小さい编はいくつか
PS:みんなが読みやすいように、編集者は各節の前に分割線をつけました.
❝
1.内部リスニングライフサイクル関数
今日の制品マネージャーはまた私に1つの需要を振って、1つの図表を开発しなければならなくて、需要を手に入れて、ちらっと见て、それから私は 二分検索ソートアルゴリズム
周凡楊
java にぶんたんさく ツールバーの アルゴリズム#アルゴリズム# 半分に折る
JAvaでのBigDecimal
bijian1013
java BigDecimal
Shell echoコマンドの詳細
daizj
echo shell
Oracle DBAの簡単な操作
周凡楊
oracle dba sql
図面の再描画
朱輝輝33
ゲーム
スレッドの初期体験
西蜀石蘭
スレッド
linuxクラスタ相互ログイン免除構成
林鶴天
linux
mysql : Lock wait timeout exceeded; try restarting transaction
aigo
mysql
アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号
2羽の黄❞
毎日出勤して繰り返しのコードを書いて、1つのcv仔が、8、9時まで忙しくて、仕事の効率が低くて、自分が何の向上もないと感じます.どのように更に速く手元の仕事を完成することができて、自分の开発の効率を高めて、前の1篇の《绝対干物~!これらのVueの小さい技巧をマスターして、早く退勤して女神とデートすることができます》で、小さい编はいくつか
Vueの开発の技巧を整理して、今日小さい编はまたいくつかの新しいVueの使用の技巧を整理しました.あなたたちは先に残業して、私は先に退勤して女神と一緒に買い物に行きました.PS:みんなが読みやすいように、編集者は各節の前に分割線をつけました.
❝
hookEventは、コンポーネントのライフサイクルをこのように監視することができた.1.内部リスニングライフサイクル関数
今日の制品マネージャーはまた私に1つの需要を振って、1つの図表を开発しなければならなくて、需要を手に入れて、ちらっと见て、それから私は
echarts公式サイトに行ってサンプルコードをコピーして、コピーして変更して変更して差が少なくて、コードを変更して长いこのようにします
div>
template>
export default {
<br> mounted() {
this.chart = echarts.init(this.$el)// ， ...// ，resize window.addEventListener('resize', this.$_handleResizeChart)<br> },<br> updated() {
// <br> },<br> created() {
// <br> },<br> beforeDestroy() {
// ， window.removeEventListener('resize', this.$_handleResizeChart)<br> },methods: {
<br> $_handleResizeChart() {
this.chart.resize()<br> },// <br> }<br>}script><br></code></pre>
<p> ， ， 。 code review ， ， 。</p>
<pre class="has"><code> ： ， `resize` `resize` ， ， <br><br> ： ， ?<br><br> ： `hook` ？<br><br> ：`Vue3.0` ， ， `Vue`?<br></code></pre>
<p> , </p>
<pre class="has"><code>export default {
<br> mounted() {
<br> this.chart = echarts.init(this.$el)<br> // ， ...<br> <br> // ，resize <br> window.addEventListener('resize', this.$_handleResizeChart)<br> // hook ， <br> this.$once('hook:beforeDestroy', () => {
<br> window.removeEventListener('resize', this.$_handleResizeChart)<br> })<br> },<br> updated() {},<br> created() {},<br> methods: {
<br> $_handleResizeChart() {
<br> // this.chart.resize()<br> }<br> }<br>}<br></code></pre>
<p> ， ， ， <code>Vue</code> 。</p>
<p> <code>Vue</code> ， <code>$on</code>,<code>$once</code> ， <code>updated</code> <code>this.$on('hook:updated', () => {})</code></p>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span>2. </span><span style="font-weight:bold;"></span></h4>
<p> ， ， ？</p>
<p> ， ， ， <code>change</code> ， ， <code>updated</code> 。 ， <code>Vue</code> 。</p>
<pre class="has"><code><template><br> <br> <br> <custom-select @hook:updated="$_handleSelectUpdated" /><br>template><br><script>import CustomSelect from '../components/custom-select'export default {
components: {
<br> CustomSelect<br> },methods: {
<br> $_handleSelectUpdated() {
console.log('custom-select updated ')<br> }<br> }<br>}script><br><br></code></pre>
<hr>
<blockquote>
❝
<h3><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> <code>Vuex</code>? <code>Vue.observable</code> </span><span style="font-weight:bold;"></span></h3> ❞
</blockquote>
<p> ， ， ， ， <code>Vuex</code>， ， <code>Vuex</code> ：“ ， Vuex 。 —— ， Vuex”。 <code>Vue2.6</code> API <code>Vue.observable</code> <code>Vuex</code></p>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> <code>store</code></span><span style="font-weight:bold;"></span></h4>
<pre class="has"><code>import Vue from 'vue'<br><br>// Vue.observable <br>export const store = Vue.observable({
<br> userInfo: {},<br> roleIds: []<br>})<br><br>// mutations, <br>export const mutations = {
<br> setUserInfo(userInfo) {
<br> store.userInfo = userInfo<br> },<br> setRoleIds(roleIds) {
<br> store.roleIds = roleIds<br> }<br>}<br><br></code></pre>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> </span><span style="font-weight:bold;"></span></h4>
<pre class="has"><code><div><br> {
{ userInfo.name }}div>template><script>import { store, mutations } from '../store'export default {
computed: {
<br> userInfo() {
return store.userInfo<br> }<br> },<br> created() {
<br> mutations.setUserInfo({
name: ' '<br> })<br> }<br>}script></code></pre>
<hr>
<blockquote>
❝
<h3><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> ， <code>Vue.extend</code></span><span style="font-weight:bold;"></span></h3> ❞
</blockquote>
<p><code>Vue.extend</code> Api, ， <code>Loading</code>,<code>Notify</code>,<code>Message</code> ， <code>Vue.extend</code>。</p>
<p> <code>element-ui</code> <code>loading</code> ， </p>
<pre class="has"><code>// loading<br>const loading = this.$loading()<br>// loading<br>loading.close()<br></code></pre>
<p> ， </p>
<pre class="has"><code>const loading = this.$loading()<br>const loading1 = this.$loading()<br>setTimeout(() => {
<br> loading.close()<br>}, 1000 * 3)<br></code></pre>
<p> ， loading, ， <code>loading</code>， <code>loading1</code> 。 ？ <code>Vue.extend</code> + <code>loading</code></p>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> <code>loading</code> </span><span style="font-weight:bold;"></span></h4>
<pre class="has"><code><template><br> <transition name="custom-loading-fade"><br> <br> <div v-show="visible" class="custom-loading-mask"><br> <br> <div class="custom-loading-spinner"><br> <i class="custom-spinner-icon">i><br> <br> <p class="custom-loading-text">{
{ text }}p><br> div><br> div><br> transition><br>template><br><script>export default {
props: {
// loading<br> visible: {
type: Boolean,default: false<br> },// loading <br> text: {
type: String,default: ''<br> }<br> }<br>}script><br></code></pre>
<p> <code>loading</code> ， ， </p>
<pre class="has"><code><template><br> <div class="component-code"><br> <br> <custom-loading :visible="visible" text=" " /><br> div><br>template><br><script>export default {
<br> data() {
return {
visible: false<br> }<br> }<br>}script><br></code></pre>
<p> </p>
<ol>
<li> js </li>
<li><code>loading</code> </li>
</ol>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> <code>Vue.extend</code> </span><span style="font-weight:bold;"></span></h4>
<h5><span style="font-weight:bold;"></span>1. <code>loading</code> ， <code>props</code> <code>data</code><span style="font-weight:bold;"></span></h5>
<pre class="has"><code>export default {
<br> data() {
<br> return {
<br> text: '',<br> visible: false<br> }<br> }<br>}<br></code></pre>
<h5><span style="font-weight:bold;"></span>2. <code>Vue.extend</code> <span style="font-weight:bold;"></span></h5>
<pre class="has"><code>// loading/index.js<br>import Vue from 'vue'<br>import LoadingComponent from './loading.vue'<br><br>// Vue.extend <br>const LoadingConstructor = Vue.extend(LoadingComponent)<br><br>let loading = undefined<br><br>LoadingConstructor.prototype.close = function() {
<br> // loading ， <br> if (loading) {
<br> loading = undefined<br> }<br> // <br> this.visible = false<br> // 300 ， loading <br> setTimeout(() => {
<br> // dom <br> if (this.$el && this.$el.parentNode) {
<br> this.$el.parentNode.removeChild(this.$el)<br> }<br> // $destroy <br> this.$destroy()<br> }, 300)<br>}<br><br>const Loading = (options = {}) => {
<br> // ， <br> if (loading) {
<br> return loading<br> }<br> // <br> const parent = document.body<br> // <br> const opts = {
<br> text: '',<br> ...options<br> }<br> // new Vue()<br> const instance = new LoadingConstructor({
<br> el: document.createElement('div'),<br> data: opts<br> })<br> // loading parent <br> parent.appendChild(instance.$el)<br> // loading<br> Vue.nextTick(() => {
<br> instance.visible = true<br> })<br> // loading<br> loading = instance<br> return instance<br>}<br><br>export default Loading<br></code></pre>
<h5><span style="font-weight:bold;"></span>3. loading<span style="font-weight:bold;"></span></h5>
<pre class="has"><code>import Loading from './loading/index.js'<br>export default {
<br> created() {
<br> const loading = Loading({ text: ' 。。。' })<br> // <br> setTimeout(() => {
<br> loading.close()<br> }, 3000)<br> }<br>}<br></code></pre>
<p> ，loading ， <code>element-ui</code> <code>Vue.prototype</code> ， <code>this.$loading</code> ， </p>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> <code>Vue.prototype</code> </span><span style="font-weight:bold;"></span></h4>
<pre class="has"><code>Vue.prototype.$loading = Loading<br>// export Loading <br>export default Loading<br><br>// <br>this.$loading()<br></code></pre>
<hr>
<blockquote>
❝
<h3><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> ， </span><span style="font-weight:bold;"></span></h3> ❞
</blockquote>
<p> ？ ，“ ， ， ！”。 ， 。</p>
<p> <code>loading</code> ， ， </p>
<ol>
<li> <code>loading</code> ， </li>
<li> <code>loading</code></li>
</ol>
<p> ， ， </p>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> <code>v-loading</code> </span><span style="font-weight:bold;"></span></h4>
<pre class="has"><code>import Vue from 'vue'<br>import LoadingComponent from './loading'<br>// Vue.extend <br>const LoadingContructor = Vue.extend(LoadingComponent)<br><br>// loading <br>Vue.directive('loading', {
<br> /**<br> * ， ， <br> * @param {*} el <br> * @param {*} binding ， {name:' ', value: ' ',arg: ' v-bind:text text'}<br> */<br> bind(el, binding) {
<br> const instance = new LoadingContructor({
<br> el: document.createElement('div'),<br> data: {}<br> })<br> el.appendChild(instance.$el)<br> el.instance = instance<br> Vue.nextTick(() => {
<br> el.instance.visible = binding.value<br> })<br> },<br> /**<br> * VNode <br> * @param {*} el<br> * @param {*} binding<br> */<br> update(el, binding) {
<br> // loading <br> if (binding.oldValue !== binding.value) {
<br> el.instance.visible = binding.value<br> }<br> },<br> /**<br> * ， <br> * @param {*} el<br> */<br> unbind(el) {
<br> const mask = el.instance.$el<br> if (mask.parentNode) {
<br> mask.parentNode.removeChild(mask)<br> }<br> el.instance.$destroy()<br> el.instance = undefined<br> }<br>})<br></code></pre>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> </span><span style="font-weight:bold;"></span></h4>
<pre class="has"><code><template><br> <div v-loading="visible">div><br>template><br><script>export default {
<br> data() {
return {
visible: false<br> }<br> },<br> created() {
this.visible = true<br> fetch().then(() => {
this.visible = false<br> })<br> }<br>}script><br><br></code></pre>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> </span><span style="font-weight:bold;"></span></h4>
<ol>
<li> <code>loading</code> </li>
<li> <code>v-permission</code></li>
<li> , </li>
<li>input </li>
<li> 。。。</li>
</ol>
<hr>
<blockquote>
❝
<h3><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> <code>watch</code> <code>watch</code> , </span><span style="font-weight:bold;"></span></h3> ❞
</blockquote>
<p> Vue ， <code>watch</code> ， 。</p>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> </span><span style="font-weight:bold;"></span></h4>
<p> ， ， , <code>change</code> ， <code>watch</code> </p>
<pre class="has"><code><template><br> <br> <div><br> <div><br> <span> span><br> <input v-model="searchValue" /><br> div><br> <br> div><br>template><br><script>export default {
<br> data() {
return {
searchValue: ''<br> }<br> },watch: {
// ， <br> searchValue(newValue, oldValue) {
// if (newValue !== oldValue) {
this.$_loadData()<br> }<br> }<br> },methods: {
<br> $_loadData() {
// ， <br> }<br> }<br>}script><br></code></pre>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> </span><span style="font-weight:bold;"></span></h4>
<p> ， ， ， <code>created</code> <code>mounted</code> <code>$_loadData</code> 。 ， ， <code>watch</code> ， </p>
<pre class="has"><code>// watch<br>export default {
<br> watch: {
<br> // ， <br> searchValue: {
<br> // handler , newValue "" ， oldValue undefined<br> handler(newValue, oldValue) {
<br> if (newValue !== oldValue) {
<br> this.$_loadData()<br> }<br> },<br> // <br> immediate: true<br> }<br> }<br>}<br></code></pre>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> ( )</span><span style="font-weight:bold;"></span></h4>
<p> ， ， 。 <code>watch</code> ， ， ， <code>watch</code> <code>deep</code></p>
<pre class="has"><code>export default {
<br> data() {
<br> return {
<br> formData: {
<br> name: '',<br> sex: '',<br> age: 0,<br> deptId: ''<br> }<br> }<br> },<br> watch: {
<br> // ， <br> formData: {
<br> // ， ， newValue oldValue <br> handler(newValue, oldValue) {
<br> // <br> },<br> // deep true, watch <br> deep: true<br> }<br> }<br>}<br></code></pre>
<hr>
<blockquote>
❝
<h3><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> ， ？</span><span style="font-weight:bold;"></span></h3> ❞
</blockquote>
<p> ？ ， 。 <code>React</code> ， 。 ， ， ， <code>this</code>( )。</p>
<p> bug ， ， ， ， ， ， ， 。</p>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> </span><span style="font-weight:bold;"></span></h4>
<pre class="has"><code>export default {
<br> // functional <br> functional: true,<br> // <br> props: {
<br> avatar: {
<br> type: String<br> }<br> },<br> /**<br> * <br> * @param {*} h<br> * @param {*} context this, props, slots context <br> */<br> render(h, context) {
<br> const { props } = context<br> if (props.avatar) {
<br> return <img src={props.avatar}>img><br> }<br> return <img src="default-avatar.png">img><br> }<br>}<br></code></pre>
<p> ， ， ， ， 。 render ， <code>Vue</code> <code>JSX</code> ， <code>JSX</code>, 。</p>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> </span><span style="font-weight:bold;"></span></h4>
<ol>
<li> ， ， ， </li>
<li> ， </li>
</ol>
<h5><span style="font-weight:bold;"></span> <span style="font-weight:bold;"></span></h5>
<ol>
<li> functional</li>
<li> ， <code>this</code>,<code>this</code> <code>render</code> </li>
<li> ， ，watch </li>
<li> $emit ， <code>context.listeners.click</code> </li>
<li> ， <code>ref</code> ， <code>HTMLElement</code></li>
<li> <code>props</code> ， <code>props</code> <code>prop</code>, <code>$attrs</code> ， ( <code>inheritAttrs</code> )</li>
</ol>
<h4><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"></span> <code>JSX</code>， ？</span><span style="font-weight:bold;"></span></h4>
<p> <code>Vue2.5</code> ， <code>JSX</code> ， ， </p>
<pre class="has"><code><br><template functional><br> <img :src="avatar ? avatar : 'default-avatar.png'" /><br>template><br></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1397334410621145088"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">
周凡楊
java にぶんたんさく ツールバーの アルゴリズム#アルゴリズム# 半分に折る
bijian1013
java BigDecimal
daizj
echo shell
周凡楊
oracle dba sql
朱輝輝33
ゲーム
西蜀石蘭
スレッド
林鶴天
linux
aigo
mysql
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号