Краткое описание боя vue-cli (> 10 000 слов)

когдаv-ifа такжеv-showОба значенияtrueКогда рендеринг заканчивается, все рендерится нормально когдаv-ifа такжеv-showявляются ложными: страница не отображается,v-ifне отображаетсяdomэлемент,v-showОтрендерено успешно, но было добавленоstyleдляdisplay：none.

4. Оvueкак работатьDOMэлемент.

Мы все знаем, что во фреймворке vue мы обычно оперируем данными, так какой метод мы используем, если хотим манипулировать элементами dom? Давайте представим это ниже!

Если есть следующие элементы, мы хотим получить текст этого элемента h2, нам нужно добавить к этому элементу атрибут ref и дать ему имя.

<h2 ref='foo'>我是ref的值</h2>

Далее вы можете использовать этот метод, чтобы получить его текст (обратите внимание, чтоthis.$refsнетthis.$ref):

console.log(this.$refs.foo.innerHTML')

так как изменитьh2Что с текстом в ?

this.$refs.foo.innerHTML='我是新值

Таким образом, с элементами DOM можно легко манипулировать, как и раньше, но Vue по-прежнему сосредоточен на манипулировании данными, поэтому рекомендуется как можно меньше использовать описанные выше методы.

5. Разведкаrouter-linkсерединаtagАтрибуты.

существуетvueВ теге router-link маршрута есть атрибутtag, я нашел это, когда я проверил информацию сегодня, я чувствую себя более интересным и рекомендую его всем.

тогда мы даем<router-link to='/about'>добавить на этикеткуtagсвойства и присваивать значения:

<router-link to='/fenceCenter' >中心点</router-link>
<router-link to='/vuetest'tag='li'>vue测试</router-link>

Итак, давайте посмотрим, как это отличается от того, что мы обычно визуализируем.

//直接跳转
this.$router.push('/map')

//条件允许时跳转
if(this.data){
    this.$router.push('/map')
}

this.$router.go('-1')

<template>
  <div>
    <h2 style="color:red">我是主页面</h2> 
    <content><content>      //我是添加的组件
  </div>
</template>

<script>
import content from './content'    //找到组件的位置，引入
  export default {
    name: "",
    data() {
        return {
        }
    },
   components:{
      content      //将组件写入模板内才可生效，当有多个组件，看用逗号分开
   },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped>
</style>

<template>

  <div @click="foo()">我是组件页面</div>
  
</template>
<script>
  export default {
    name: "",
    data() {
      return {
      }
    },
    mounted() {
    },
    methods: {
        foo(){
            alert("我是好人")
        }
    }
  }
</script>

<style scoped>
</style>

<template>

  <div>我是主页面<content-f> </content-f>   //这里要这样写</div>
  
</template>
<script>
import contentF from './contentF'         //找到组件的位置 引入
  export default {
    name: "",
    data() {
        return {
        }
    },
   components:{
      contentF     //将组件写入模板内才可生效，当有多个组件，看用逗号分开
   },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped>
</style>

<template>
   <div>
       <button @click="foo()">点击按钮</button>
       <div>{{value}}</div>
   </div>
</template>
<script>
   export default {
       name: "",
       data() {
           return {
               value:1,
           }
       },
       mounted() {},
       watch:{
           value:function(val,oldval){
               console.log(val,oldval)
           }
       },
       methods: {
           foo() {
               this.value=5
           }
       }
   }
</script>

<style scoped>
</style>

 <template>
    <div>
        <button @click="foo()">点击按钮</button>
        <div>{{value}}</div>
    </div>
</template>
<script>
    export default {
        name: "",
        data() {
            return {
                value:{
                    a:1,b:2
                }
            }
        },
        mounted() {},
        watch:{
            value:{
                handler(val,oldVal){
                    console.log("lalala",val,oldVal)
                } ,
                deep: true,
                immediate: true
            }
        },
        methods: {
            foo() {
                this.value.a=5;
                this.value.b=6;
            }
        }
    }
</script>

<style scoped>
</style>

<template>
 <div class="hello">
   <div v-for="item in cityList" :key="item.id">
       <div >{{item.title}}</div>
       <div>城市图片：<img :src="item.img"></div>
   </div>
 </div>
</template>

<script>
 export default {
   name: 'HelloWorld',
   data() {
     return {
       cityList: [{
           title: '北京',
           id: "001",
           img:"../assets/logo.png" //这行是不被识别的
         },
         {
           title: '上海',
           id: "002",
           img: "static/logo.png" //这个可以被正确显示
         }
       ]
     }
   }
 }
</script>

<template>
  <div class="hello">
    <img src="../assets/logo.png" alt="logo"> 
    <img src="static/logo.png" alt="logo"> 
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
       
      }
    }
  }
</script>

<template>
  <div class="hello">
    <div v-for="item in cityList" :key="item.id">
      <div >{{item.title}}</div>
      <div>城市图片：<img :src="item.img"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        cityList: [{
            title: '北京',
            id: "001",
            img:require("../assets/logo.png") //使用require()的方式引入即可
          },
          {
            title: '上海',
            id: "002",
            img: "static/logo.png"
          }
        ]
      }
    }
  }
</script>

Ссылаться на:самородки.IM/post/684490… OBKoro1

11. О проблеме пустых страниц после упаковки

После того, как vue-cli выполнит npm run build После упаковки

Следующие файлы будут созданы в каталоге distОднако, когда мы выполняем команду для упаковки и открытия index.html, отображается пустая страница и сообщается об ошибке, указывающей, что файл не может быть найден, как показано ниже:

Далее давайте откроемcofigпапкаindex.js,оказатьсяbuildЭтот объект будет

assetsPublicPath: '/'

Этот адрес пути изменен на

assetsPublicPath: './',

Повторно выполните команду, переупакуйте, а затем откройте index.htnl, на странице отобразится:

Роль свойства assetsPublicPath заключается в указании корневого каталога для компиляции и выпуска, «/» указывает на корневой каталог проекта, а «./» указывает на текущий каталог. Когда мы упаковываем, index и static помещаются в каталог dist, а static находится на том же уровне, что и index, поэтому нам не следует искать файлы в корневом каталоге.

Ссылаться на:самородки.IM/post/684490… OBKoro1

Двенадцать, о методе написания маршрутизации асинхронной ленивой загрузки

Маршрутизация скаффолдинга, поставляемого с vue-cli, записывается следующим образом:

import Vue from 'vue'
import Router from 'vue-router'
import bus from '../bus'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Route({
  routes: [
    {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
   
    },
   
  ]
});

Используется метод импорта, поэтому нам нужно использовать асинхронный метод, как его написать?

import Vue from 'vue'
import Router from 'vue-router'
import bus from '../bus'

Vue.use(Router)

var router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: (resolve) => require(['@/components/HelloWorld'], resolve),
    },
    {
      path: '/login',
      name: 'login',
      component: (resolve) => require(['@/login'], resolve),
      
    }
  ]
});
bus.router = router

export default router

Второй способ:

const Index = () => import( '@/views/index')
const routers = [
    {
        path: '/',
        name: 'index',
        component: Index
    }
]

Тринадцать, напишите пользовательскую инструкцию

Помимо написания компонентов на Vue, вы также можете использовать пользовательские инструкции для реализации некоторых специальных операций.Возьмем каштан 🌰, похожий на официальный «базовый», который получает фокус ввода для демонстрации.

У меня есть привычка классифицировать одни и те же вещи, поэтому я сначала создал папку для хранения своих инструкций, как показано ниже:

Подробный код выглядит следующим образом:Определите и экспортируйте мою пользовательскую директиву здесь, директива содержит операции, которые я хочу выполнить. (В настоящее время пример получения фокуса)

export const focus = (el) => {
    el.focus()
}

На используемой странице сначала импортируйте файл инструкции, затем настройте его в директиве и добавьте в тег, который необходимо использовать.Обратите внимание, что вам нужно добавить «v-» перед инструкцией, как показано ниже:

Моя директива называется focus и записывается как «v-focuss» внутри тега:

<template>
  <div>
  <input type="text" v-focus>
  </div>
</template>

<script>
 import { focus } from "../../directives/index"
  export default {
    name: "",
    data() {
        return {}
    },
    directives: {focus}, //自定义指令
    components: {},
    mounted() {},
    methods: {}
  }
</script>

<style scoped>

</style>

Блуждая сегодня по Nuggets, я увидел частичную работу Vue и поделился ею с вами:

самородки.IM/post/684490…

Для пользовательских инструкций Vue удобнее напрямую управлять DOM:

Первый взглядdirectives/indexстраница :

Далее взгляните на вызывающую страницу:

Наконец, давайте взглянем на страницу:

Обновите снова! Добавить пользовательские директивы с параметрами

Данные страницы также можно записать в виде переменной и использовать переменную для управления стилем:

Ниже приведен жизненный цикл пользовательской директивы (мы можем выполнять события, которые хотим обрабатывать, в жизненном цикле директивы): 1.bind: Вызывается только один раз. Вызывается, когда инструкция привязывается к элементу в первый раз. Эту функцию ловушки можно использовать для определения действия инициализации, которое выполняется один раз при привязке. 2.inserted: Вызывается, когда связанный элемент вставляется в родительский узел (родительский узел может быть вызван, если он существует, он не обязательно должен существовать вdocumentсередина). 3.update: вызывается при обновлении шаблона, привязанного к элементу, независимо от того, изменилось ли связанное значение. Ненужные обновления шаблона можно игнорировать, сравнивая значения привязки до и после обновления. 4.componentUpdated: вызывается, когда шаблон, в котором находится привязанный элемент, завершает цикл обновления. 5.unbind: Вызывается только один раз, когда инструкция отсоединяется от элемента

Хорошо! Готово, друзья, пробуйте!

14. О проблеме с невозможностью получения запроса на большое изображение после упаковки

Сегодня, после завершения проекта, я провожу тест упаковки.Локальная разработка хороша, но после упаковки я обнаружил, что страница входа и фоновое изображение не могут быть получены, но другие небольшие изображения логотипа могут отображаться нормально, поэтому я Я очень подавлен. Первая реакция, что я должен Это потому, что картинка слишком большая и не сжатая. Затем обнаруживается следующее местоположение:

Я хочу увеличить диапазон лимита, но что делать, если есть большие картинки? Это не элегантный способ. Поэтому я придумал следующее решение:no.OSCHINA.net/U/1778998/no…После того, как css вводит изображение и переупаковывает его, загрузчик стилей не может установить свой собственный publicPath, поэтому просто измените publicPath в загрузчике стилей и вручную добавьте параметр publicPath в путь css для ExtractTextPlugin в файле build/util. js-файл.

После добавления снова выполните сборку, и картинка может отображаться нормально.

15. Пропустить без компиляции и избежать {{}}

В нашем проекте должно быть много сценариев.Содержимое в теге не нужно компилировать, но наш код этого не знает.Vue предоставляет инструкцию, которая может напрямую пропустить компиляцию для нас, чтобы добавить в чистый статический тег.

<div  v-pre> 直接跳过不需要编译的标签，加快编译效率</div>

Также бывает ситуация, когда страница полезна для назначения {{}}, иногда наша страница заблокирована или не справляется с загрузкой и часто обновляется, может отображаться неназначенный {{}}, и его можно обновить только после получения значения. Это вызывает у пользователей очень недружественный опыт, и Vue также помог нам подумать об этом. Vue предоставляет команду, которая может дождаться окончания компиляции, прежде чем отображать содержимое метки для инструкции.

<div v-cloak> {{message}}直接结束编译，避免出现闪烁花括号，配合css样式书写</div>

//配合css 样式完成
<style scoped>
    [v-cloak]{display: none;}
</style>

16. Напишите собственный фильтр

У Vue есть собственный фильтр, который мы можем использовать, так как же нам написать собственный фильтр? Работай со мной ниже!

Сначала создайте папку фильтра для хранения ваших фильтров и напишите метод фильтра, который вы хотите выполнить, в файле.

Вызовы на странице (аналог пользовательских директив)

OBKoro1«Эти маленькие хитрости Vue, о которых вы, возможно, не знаете» очень практичны и рекомендуются всем!

Семнадцать, простая реализация vuex

Все мы знаем, что vuex используется для реализации функции передачи данных каждого компонента vue.Его можно вызывать глобально, не различая родительские и дочерние компоненты, так что наш проект имеет общее название.Попробуем:

Давайте сначала создадим хранилище для хранения нашего состояния инициализации и того, как его изменить:Далее давайте введем необходимые зависимости и соответствующие экспорты по умолчанию:

код показывает, как показано ниже:

import Vue from 'vue';
import Vuex from 'vuex';
import { state as userState, actions as userActions, mutations as userMutations } from './stores.js';

Vue.use(Vuex);

const state = Object.assign({}, userState);
const mutations = Object.assign({}, userMutations);
const actions = Object.assign({}, userActions);


export default new Vuex.Store({
    state,
    mutations,
    actions
});

Наконец, давайте напишем определенные начальные значения и методы, которые необходимо изменить:

код показывает, как показано ниже:

import {appRouter} from '../assets/data/menu';

// 初始值
export const state = {
    data: "0",
    menuList: appRouter,
    pageTitle:'初始值'

}

//如何改变 setData方法名
export const mutations = {
    setData(state, val) {
        state.data = val
    },
    changePage(state,val){
        state.pageTitle = val
    }

}
//实现改变
export const actions = {
    setData(contex, val) {
        contex.commit("setData", val)
    },
    changePage(contex,val){
        contex.commit("changePage", val)
    }
}

Чтобы использовать страницу, просто вызовите ее напрямую без других зависимостей:

// 获取全局变量
 console.log( this.$store.state.pageTitle)  // 初始值
 
 
 
// 更改全局变量
this.$store.commit('changePage', '门店管理')

18. Передавать параметры через маршрутизацию, получать параметры, записывать статус и т. д.

Как показано ниже:

Нам нужно щелкнуть детали столбца операции, чтобы перейти на следующую страницу, затем нам нужно получить значение идентификатора этой строки, запросить данные, а затем отобразить страницу, так как же мы передаем параметры через маршрутизацию?

учиться у

Первый: передать параметры через путь, запрос, и параметры будут отображаться в адресной строке

// 传参
<div>
    <router-link tag="a" :to="{path:'detail',query:{id:1}}" >详情</router-link>
</div>

// 接收参数
<script>
export default{
    mounted (){
       const id = this.$route.query.id;   //可以拿到从列表页传过来的id  
    }
}

</script>

Второй: передавать параметры через name, param, параметры не будут отображаться в адресной строке

// 传参
<div>
    <router-link tag="a" :to="{name:'detail',params:{id:1}}" >详情</router-link>
</div>

// 接收参数
<script>
export default{
    mounted (){
       const id = this.$route.params.id;   //可以拿到从列表页传过来的id  
    }
}

</script>

**⚠️Примечание. При вводе параметров используйтеthis.$route, вместоthis.$router.

Вышеупомянутые два похожи, давайте попробуем передать динамические параметры:

// 传参
<div>
    <router-link tag="a" :to="{name:'detail',params:{id:val}}" >详情</router-link>
</div>

// 接收参数
<script>
export default{
    data () {
        val:1212
    },
    mounted () {
       const val = this.$route.params.val;   //可以拿到从列表页传过来的val值  
    }
}

</script>

Продолжите обновление, давайте попробуем дальше, передайте несколько динамических параметров и разделите каждый ключ запятой:

// 传参
<div>
    <router-link tag="a" :to="{name:'detail',params:{id:id,name:name,age:age}}" >详情</router-link>
</div>

// 接收参数
<script>
export default{
    data () {
        id:1212,
        name:"张小一",
        age:10
    },
    mounted () {
       const id = this.$route.params.id;   //可以拿到从列表页传过来的id值 
       const name = this.$route.params.name;   //可以拿到从列表页传过来的name值  
       const age = this.$route.params.age;   //可以拿到从列表页传过来的age值  
    }
}

</script>

Затем обновите, давайте передадим массив, чтобы изменить способ работы

// 传参
<div>
    <router-link tag="a" :to="{name:'detail',params:{list:[1,2,3,4]}}">详情</router-link>
</div>

// 接收参数
<script>
export default{
    data () {
       arr:
    },
    mounted () {
       const list = this.$route.params.list;   //可以拿到从列表页传过来的list数组  
    }
}

</script>

! ! ! ⚠️Примечание. В целом не рекомендуется использовать маршрутизацию для передачи слишком большого количества параметров.

Девятнадцать, о решении таймера после прыжка с маршрута

Однажды я увидел статью большого парня о проблеме, что таймер на исходной странице все еще работает после перехода на страницу.Так получилось, что я также написал демо часов реального времени, поэтому я экспериментировал:

Страница выглядит следующим образом:

SetTimeout вызывается каждый раз после входа на страницу, и время обновляется каждую секунду.Чтобы проверить, вызывается ли таймер после переключения маршрутов, я добавил напечатанное значение после таймера для наблюдения, как показано ниже:

...
...
...
 this.inif.oSecond = seconds;
 this.inif.seconds = seconds * 6;
 this.inif.minute = minutes * 6 + seconds * (6 / 60);
 this.inif.hour = (hours - 12) * 30 + minutes * (360 / 12 / 60);
 
 //调用计时器
 this.timer = setTimeout(this.time, 1000)
 
 //打印参考值
 console.log(this.inif.seconds)

Вы можете увидеть печать на заднем плане:

Теперь переключаем маршруты на другие страницы и смотрим, остановился ли таймер:

Оказывается, он не останавливается, а таймер все еще работает. Это очень требовательно к производительности. Далее, давайте посмотрим, как Бог решил это:

Первое решение:

существуетbeforeDestroyУборка в течение жизни:

beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
}

Ввиду вышеуказанного метода Бог дал объяснение: наш код не зависит от кода очистки, и эта операция затрудняет нам программную очистку всего, что мы строим.

Второе решение:

пройти через$onceследить за таймером, вbeforeDestroyКрючки можно очистить

...
...
...

this.timer = setTimeout(this.time, 1000)

this.$once('hook:beforeDestroy', () => {
    clearInterval(this.timer);
})

Оба решения могут решить нашу проблему, второе относительно элегантно! ! ! заимствовано изchinaBergВеликий Бог

20. О после упаковкиdistпапкаjsбудет много.mapдокумент

После упаковки проекта код сжимается и шифруется.Если во время выполнения сообщается об ошибке, выходное сообщение об ошибке не может точно определить, где код сообщает об ошибке. создан.mapФайл с суффиксом может быть расположен не в том месте, как и код без шифрования.Вы можете установить, чтобы он не генерировал этот тип файла, потому что он нам не нужен в среде генерации..mapфайл, так что вы можете упаковать без создания этих файлов.

решение:

В файле config/index.js установите productionSourceMap: false, чтобы не создавать файл .map.

21. Следите за текущейvueизurlпуть, обновляйте страницу при изменении

Это требование связано с необходимостью повторного запроса текущего столбца после нажатия на детали в списке в проекте.id, перерисуйте текущую страницу следующим образом:

Во-первых, я буду использовать полную комбинацию информации, к которой мне нужно перейти, следующим образом:

 this.$router.push({
                    path: '/crowdmanage/crowddetails',
                    query: {
                        name: 'detail',
                        id: 17
                    }
                });

После нажатияurlОн меняется, но vue его не обнаруживает, т.е.urlПоменяли, страницу не перезапрашивали? ? ? ? ? ? в чем дело? ? ? ? ---(Первое ощущение в это время: что-то не так с моим методом прыжка? Почему vue не может его обнаружить? Или я хочу переключиться на собственный прыжок??...) Я пошел проконсультироваться с младшим братом команды, и младший брат дал следующее решение: --- """"

Поскольку компоненты моей страницы вложены в небольшие компоненты, мне нужно перейти к.vueНа странице добавлено:

 watch: {
            $route(to, from) {
                this.initData();
            }
        }

this.initData()вся информация о запросе, когда URL-адрес изменяется,watchВы можете прослушать его, а затем повторно запросить данные. Ла-ла-ла-ла-ла, решил. . . . . Спасибо, бро! ! !

Двадцать два, напишите динамические компоненты

В настоящее время ситуация такова: когда в компоненте есть три части контента, и каждый раз отображается только одна из этих трех частей контента.tab, не будут отображаться одновременно, как показано ниже:

На данный момент мы можем записать эти три компонента как динамические, обернув их вindexв файле.

Сначала создадим основнойindexфайл, используемый для переноса трех подфайлов и создания еще трех подфайлов.vueфайл, эти четыре файла можно разместить рядом.

index.vueСодержимое основного файла следующее (следующееtabsотUIкомпонентыiview):

<template>
    <div>
        <Tabs size="small" @on-click="tabChange" v-model="tabContent">
            <TabPane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name"></TabPane>
        </Tabs>
        <--用:is的方式绑定动态变量，变量改变，随之显示的组件切换-->
        	<component :is="tabView"></component>
    </div>
</template>

<script>
  //引入三个子组件
    import A from "./A"
    import B from "./B"
    import C from "./C"
    export default {
        data() {
            return {
                tabContent:"",
                tabView: "",
                tabList: [{
                        name: "a",
                        label: "标签a"
                    },
                    {
                        name: "b",
                        label: "标签b"
                    },
                    {
                        name: "c",
                        label: "标签c"
                    }
                ],
            }
        },
        // 注册组件
        components: {
            A, // 标签a
            B, // 标签b
            C, // 标签c
        },
        mounted() {
            this.tabChange(name)
        },
        methods: {
            //切换tab事件
            tabChange(name) {
                this.tabView="A";
                this.tabContent = name || "a";
                if (name === "a") {
                    this.tabView = A;
                } else if (name === "b") {
                    this.tabView = B
                }else if (name === "c") {
                    this.tabView = C
                }
            },
        },
        watch: {}
    }
</script>

<style scoped lang="less">

</style>

подкомпонентA.vueСодержимое файла следующее:

<template>
    <!-- 第一个tab页的内容  -->
    <div>
        我是标签a的内容
    </div>
</template>

<script>
    export default {
        data() {
            return {
              
            }
        },
        props: {},
        components: {},
        mounted() {},
        methods: {},
        watch: {}
    }
</script>

<style scoped lang="less">

</style>

Несколько других подфайлов также совпадают с файлом A, поэтому щелкните по другомуtabзапросить разные.vueдокумент.

двадцать три,keep-aliveКэширование динамического компонента и его параметров в основном используется для сохранения состояния компонента или предотвращения повторного рендеринга.

<keep-alive>При упаковке динамических компонентов неактивные экземпляры компонентов кэшируются, а не уничтожаются.

Props:

• include- Строка или регулярное выражение. Кэшируются только компоненты с совпадающими именами.
• exclude- Строка или регулярное выражение. Любые компоненты, имена которых совпадают, не будут кэшироваться.
• max- количество. Максимальное количество экземпляров компонентов, которые можно кэшировать.

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

Обратите внимание, что `` используется, когда переключается один из его непосредственных подкомпонентов. не будет работать, если в нем есть `v-for`. Если есть несколько условных дочерних элементов, как указано выше, `` требует, чтобы одновременно отображался только один дочерний элемент.

• includeа такжеexcludeСвойства позволяют компонентам условно кэшироваться. Оба могут быть представлены в виде строк, разделенных запятыми, регулярных выражений или массива:

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

• maxМаксимальное количество экземпляров компонентов, которые можно кэшировать. Как только это число достигнуто, самый старый экземпляр кэшированного компонента, к которому не было доступа, уничтожается до создания нового экземпляра.

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

Двадцать четыре родительско-дочерних компонента передают параметрыprops

Во-первых, давайте напишем пример передачи параметров компонента родитель-потомок🌰:Содержимое родительского компонента:

<template>
  <div>
    下面是引入的组件：
    <template-a :isItem="item"><template-a/>
  </div>
</template>
<script>
  import templateA from "./templateA"
  export default {
    data () {
      return {
        item:"000"
        
      }
    },
    components: {
      templateA
    },
    methods: {
      
    },
    mounted () {
      
    }
  }
</script>
<style>

</style>

Содержание подкорса:

<template>
  <div>
  我是templateA 组件,这是从父组件传过来的参数： {{isItem}}
  </div>
</template>
<script>

  export default {
    data () {
      return {
        
      }
    },
    props:{
      isItem:{
        type:String,
        default:""
      }
    },
    components: {
    
    },
    methods: {
      
    },
    mounted () {
      
    }
  }
</script>
<style>

</style>

ДатьpropsНастройка нескольких типов

Например, иногда, когда мы передаем параметры, мы не уверены, какой тип мы получаем.NumberвозможноString, то мы можем датьpropsДобавьте массив, когда тип по умолчанию выглядит следующим образом:

props:{
    data: {     
		type: [String, Number],
		default: ''
	},
}

Таким образом, при получении параметров, будь тоstringещеnumberОб ошибках не сообщается из-за ошибок типа, что повышает отказоустойчивость при передаче параметров.Подробная ссылка

• Пополнить:propsкоэффициент исполненияdataРано, так что вы можете получить это в данныхpropsзначение в .

Двадцать пять очень полезных вычисляемых свойствcomputed

В нашем ежедневном кодировании мы часто сталкиваемся со многими условиями, которые необходимо оценивать, вычислять данные или управлять разрешениями и т. д., а именно:

条件判断： AA&&BB&&cc  ；
计算数据： A+B-C-D 、   message.split('').reverse().join('')；
控制权限： A === B || B===C ；

Мы можем поместить вышеуказанное содержимое в этикетку или шаблон.{{}}Однако, если логики много или условия более сложные, а мы по-прежнему оперируем метками или шаблонами, наш код будет выглядеть сложным для понимания и избыточным.computed Для выполнения вычислений в шаблоне верните в шаблон переменную:

<template>
  <div id="example">
    <p>未计算前的值: "{{ message }}"</p>
    <p>计算完毕返回的值: "{{ reversedMessage }}"</p>
  </div>
</template>
<script>

  export default {
    data () {
      return {
         message: 'Hello',     
      }
    },
    computed: {
    // 计算属性的 getter 在这里面进行一系列的计算，最后return出一个结果给模版
      reversedMessage: function () {
      // `this` 指向 vm 实例
        return this.message.split('').reverse().join('*')
      }
   },
    components: {
      
    },
    methods: {
      
    },
    mounted () {
      
    }
  }
</script>
<style>

</style>

Эффект отображения страницы выглядит следующим образом:

Вычисляемые свойства кэшируются на основе их зависимостей. Они переоцениваются только при изменении соответствующих зависимостей. Это означает, что покаmessageПока без изменений, несколько посещенийreversedMessageВычисляемое свойство немедленно возвращает результат предыдущего вычисления без необходимости повторного выполнения функции.

Ссылаться на:vue-computed

26. Параметры между компонентамиbus

Что касается передачи параметров между компонентами и компонентами (не родительский-дочерний),vueРекомендуемое использованиеbusЧтобы выполнить передачу, вы можете выполнять различные передачи восходящей линии связи, нисходящей линии связи, параллельных и наклонных рядов.Далее мы будем использовать шину для проверки.

Прежде всего, вам нужно сначала создать его, который можно разместить в общедоступном инструменте.js, и, наконец, объединены в глобальнуюmian.jsв или непосредственно вmianВы можете создавать и импортировать в соответствии с вашей ситуацией:

import Vue from "vue";

export default new Vue()

На этом этапе вы можете использовать его напрямую.Давайте попробуем передать параметр:

Страница:

<template>
  <div id="example">
    <Button @click="searIconClick" slot="append" icon="ios-search"></Button>
  </div>
</template>
<script>

  export default {
    data () {
      return {
         message: 'Hello',     
      }
    },
    methods: {
      // 当点击按钮后，将message使用$emit传给B页面
      searIconClick(){
        this.bus.$emit("searInfo", this.message);  
      }
    },
  }
</script>

Страница Б:

<template>
  <div id="example">
       {{value}}
  </div>
</template>
<script>

  export default {
    data () {
      return {
         value: '',     
      }
    },

    components: {
      
    },
    methods: {

    },
    mounted () {
       this.bus.$on('searInfo', (message) => {
                this.value = message;
            });
    }
  }
</script>
<style>

</style>

Aстраница отправленаназвание событияа такжеBстраница принятаназвание событияОн должен быть непротиворечивым, и он должен быть уникальным во всем проекте, иначе на него будут влиять другие параметры прохода, или влиять на другие параметры прохода, я уже делал такую ​​ошибку, и пусть барышня ищет проблему для давно 😂 !

27. Расчетный атрибут вычисляется, используется для обработки данных расчета

В нашем проекте иногда необходимо произвести некоторые расчеты.Пока данные меняются, расчет обновляется в реальном времени.Если данные не меняются, то результаты расчета кэшируются.Адрес отображения эффекта:

Двадцать восемь, якорная ссылка прыгает во вью

существуетvueЯкорные ссылки в и нормальныеhtmlразные оvueАнкорные ссылки могут относиться кvueсерединаscrollBehaviorповедение при прокрутке

----------------Не много ерунды, просто зайдите в код -------------

существуетrouter.jsсерединаrouterпример

const router = new VueRouter({
            routes,
            mode: 'history',
            scrollBehavior(to, from, savedPosition) {
            if (to.hash) {
                return {
                    selector: to.hash
                }
            }
        }
    })
  
export default router;

существуетvueНажмите, чтобы перейти к месту использования<a>связать

<div>
    <a href="#populationInformation">A</a>
</div>

<div>
    <a href="#peopleCounting">B</a>
</div> 
<div>
    <a href="#trafficAnalysis">C</a>
</div>

куда нужно прыгнуть

<div id='populationInformation '> A跳转到此</div>
    
<div id='peopleCounting'> B跳转到此</div>
    
<div id='trafficAnalysis '>C跳转到此</div>

гарантировать<a>Адрес тега href должен быть таким же, как показано ниже.idЗначение такое же, как и для завершения соответствующего прыжка, Что касается вrouterТакже требуется конфигурация в.

29. Как vue получает URL-адрес текущей страницы

Когда сцена требует от нас получения URL-адреса для определенных операций суждения, мы можем использовать следующие методы для его получения.

1. Получить все URL

console.log("完整的url地址：",window.location.href)  

// 完整的url地址： https://juejin.im/editor/posts/5a1a6a6551882534af25a86b

2. Получите путь маршрутизации

console.log("路由路径：",this.$route.path)

// 路由路径：/activity/list

3. Получить параметры пути

console.log("路径参数：",this.$route.query)

// 路径参数： {name: "detail", id: "109", tabView: "self", groupID: ""}

(Ссылка: Восемнадцать, передача параметров через маршрутизацию, получение параметров, статус записи и т. д.)

Тридцать два внешних метода загрузки

1. Вы можете напрямую перейти к адресу загрузки через URL через внутренний интерфейс

window.location.replace(http://172.******/exports/${id}/download`)

2. Реализуйте запрос на загрузку через внешний интерфейс внутреннего интерфейса.

 this.$axios.get(`${this.$config.apiDomain}/crowds/exports/${row.id}/download-crowd`)
    .then(({data})=>{
    // data 直接传入now Blob中
        const blob = new Blob([data], { type: 'cache-control,expires,pragma,content-type' })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = row.id+'.csv'
        document.body.appendChild(downloadElement)
        downloadElement.click()
		document.body.removeChild(downloadElement) // 下载完成移除元素
		window.URL.revokeObjectURL(href) // 释放掉blob对
	})

справочный адрес

31. Добавьте нативные события в компоненты

На этом этапе у наших фронтенд-разработчиков обычно в руках самые разные проекты.UIбиблиотека, такая какvueизUIбиблиотека имеетiview,elementUIтак далее,UIКомпоненты библиотеки будут предоставлять некоторые необходимые события, и может быть много раз, когда вы хотите прослушивать собственное событие непосредственно в корневом элементе компонента. На этом этапе вы можете использоватьv-onиз.nativeМодификатор:

<base-input v-on:focus.native="onFocus"></base-input>

Справочный адрес

рекомендуемые:

• Руководство по стилю кода для vue Существуют стили написания кода, рекомендуемые Vue, очень рекомендуемые, рекомендуемые и тщательно используемые примеры различных стилей.Рекомендуется ознакомиться каждому, что поможет повысить эффективность разработки.
• Инструмент запуска веб-страниц VueiVuewRunВеб-версию vue можно запускать и использовать напрямую, а также ею можно поделиться с друзьями!

В дальнейшем буду добавлять еще.Друзья прочитавшие статью могут добавить внимание!

作者：Christine    
出处：https://juejin.im/post/6844903512493539341
版权所有，欢迎保留原文链接进行转载：) 

Если вас заинтересовала моя статья или у вас есть предложения, дайте мне знать 👂

Почта:christine_lxq@sina.com

最后：
        祝各位工作顺利！
                        -小菜鸟Christine