Телеграмм чат группы vuejs

2020 June 09

Е

Евгений in Vue.js Russian Developers Community

Ну да.
<elem
v-on="{ mousemove: doMethod(), touchmove: doMethod() }"
/>
или
<elem
@mousemove="doMethod()"
@touchmove="doMethod()"
/>

Спасиб) у меня почему-то засела аналогия с onClick)) вот и задумался))

источник

22:04пожаловаться #1

AB

Alexander Bright in Vue.js Russian Developers Community

Ребята, хочу сделать такую штуку:
1) есть статический index.html с содержимым страницы
2) при помощи .vue файлов описываю компоненты
https://metanit.com/web/vuejs/7.1.php
3) в index.html выбираю элемент, куда будет рендерится Vuejs, например <div id="app"> ... </div>
4) подставляю свои компоненты типа <my-component></my-component> внутрь типа

<div id="app>
   <my-component></my-component>
   <my-component></my-component>
</div>

но дело в том, что в index.html внутри <div id="app"> есть другой контент, и когда я рендерю свое приложение, то контент в <div id="app"> полностью замещается контентом моего приложения, а не так как я думал (просто подставлять компоненты)

скажите пожалуйста, возможно ли сделать так, чтобы можно было в index.html смешивать статическое содержимое с vue-тегами?
Или я где-то не в том направлении двигаюсь?

Metanit

Vue.js | Компоненты в отдельных файлах и Webpack

Помещение компонентов в отдельные файлы во Vue.js, сборка приложния с помощью Webpack, настройка конфигурации сборщика

источник

22:08пожаловаться #2

А

Алексей in Vue.js Russian Developers Community

Alexander Bright

Ребята, хочу сделать такую штуку:
1) есть статический index.html с содержимым страницы
2) при помощи .vue файлов описываю компоненты
https://metanit.com/web/vuejs/7.1.php
3) в index.html выбираю элемент, куда будет рендерится Vuejs, например <div id="app"> ... </div>
4) подставляю свои компоненты типа <my-component></my-component> внутрь типа

<div id="app>
   <my-component></my-component>
   <my-component></my-component>
</div>

но дело в том, что в index.html внутри <div id="app"> есть другой контент, и когда я рендерю свое приложение, то контент в <div id="app"> полностью замещается контентом моего приложения, а не так как я думал (просто подставлять компоненты)

скажите пожалуйста, возможно ли сделать так, чтобы можно было в index.html смешивать статическое содержимое с vue-тегами?
Или я где-то не в том направлении двигаюсь?

Metanit

Vue.js | Компоненты в отдельных файлах и Webpack

Помещение компонентов в отдельные файлы во Vue.js, сборка приложния с помощью Webpack, настройка конфигурации сборщика

Что-то ты не так делешь

источник

22:12пожаловаться #3

АМ

Алексей Магнер... in Vue.js Russian Developers Community

<div id="app>
   <div>Это не должно меняться</div>
   <my-component></my-component>
   <my-component></my-component>
   <div>и это тоже</div>
</div>

источник

22:13пожаловаться #4

AB

Alexander Bright in Vue.js Russian Developers Community

Вот мой main.ts:

import Vue from 'vue'
import App from './app.vue'

Vue.config.productionTip = false

new Vue({
  el: '#content',
  render: h => h(App),
});

Вот app.vue

<template>
  <div id="hello">
    <h2>{{message}}</h2>
  </div>
</template>

<script lang="ts">

export default {
  name: 'app',
  data () {
    return {
      message: 'Welcome to Vue.js'
    }
  }
}
</script>

<style lang="css" scoped>

</style>

и в index.html примерно такое:

<body>
   <div id="content">
       <div>Тут статический контент</div>
   </div>
   <script src="bundle.js" />
</body>

источник

22:16пожаловаться #5

K

Kagameow~💜 in Vue.js Russian Developers Community

Алексей Магнер

<div id="app>
   <div>Это не должно меняться</div>
   <my-component></my-component>
   <my-component></my-component>
   <div>и это тоже</div>
</div>

Если я правильно понимаю, можно прицепить два вью инстанса как тут https://codingexplained.com/coding/front-end/vue-js/using-multiple-vue-instances-page

источник

22:18пожаловаться #6

АМ

Алексей Магнер... in Vue.js Russian Developers Community

Это не мне надо)

источник

22:18пожаловаться #7

K

Kagameow~💜 in Vue.js Russian Developers Community

А, извиняюсь)

источник

22:18пожаловаться #8

АМ

Алексей Магнер... in Vue.js Russian Developers Community

Alexander Bright

Вот мой main.ts:

import Vue from 'vue'
import App from './app.vue'

Vue.config.productionTip = false

new Vue({
  el: '#content',
  render: h => h(App),
});

Вот app.vue

<template>
  <div id="hello">
    <h2>{{message}}</h2>
  </div>
</template>

<script lang="ts">

export default {
  name: 'app',
  data () {
    return {
      message: 'Welcome to Vue.js'
    }
  }
}
</script>

<style lang="css" scoped>

</style>

и в index.html примерно такое:

<body>
   <div id="content">
       <div>Тут статический контент</div>
   </div>
   <script src="bundle.js" />
</body>

В данном случае либо контент из html переносить во .vue, либо скрипт Вью переносить в html, либо делать второй контейнер, чтоб не перезатирало основной

источник

22:20пожаловаться #9

AB

Alexander Bright in Vue.js Russian Developers Community

Алексей Магнер

В данном случае либо контент из html переносить во .vue, либо скрипт Вью переносить в html, либо делать второй контейнер, чтоб не перезатирало основной

а что имеется ввиду, делать второй контейнер?

источник

22:21пожаловаться #10

А

Алексей in Vue.js Russian Developers Community

Да, в данном случае переностьб статику из html а vue

источник

22:22пожаловаться #11

АМ

Алексей Магнер... in Vue.js Russian Developers Community

<div id="content">
<div>Тут статический контент</div>
<div id="app">
<div>Тут контент приложения</div>
</div>
</div>

источник

22:22пожаловаться #12

АМ

Алексей Магнер... in Vue.js Russian Developers Community

Я думаю от количества зависит. Где меньше, оттуда и переносить)

источник

22:23пожаловаться #13

AB

Alexander Bright in Vue.js Russian Developers Community

Алексей Магнер

<div id="content">
<div>Тут статический контент</div>
<div id="app">
<div>Тут контент приложения</div>
</div>
</div>

понял, так вот работает

new Vue({
  el: 'div.vue-component',
  render: h => h(App),
});

и в index.html

<div id="content">

<div class="vue-component">
  <my-component></my-component>
</div>

</div>

спасибо за подсказку, буду пробовать в этом направлении думать

источник

22:29пожаловаться #14

РГ

Расулходжа Ганиев... in Vue.js Russian Developers Community

всем, привет)
https://codepen.io/grasul99/pen/vYLNPJW
есть этот работающий код

источник

22:32пожаловаться #15

РГ

Расулходжа Ганиев... in Vue.js Russian Developers Community

я его скопипастил, и поставил в проект
но получил вот столько ошибок
подскажите пж, почему они появляются

источник

22:33пожаловаться #16

DK

Daniil Kuznetsov in Vue.js Russian Developers Community

Расулходжа Ганиев

всем, привет)
https://codepen.io/grasul99/pen/vYLNPJW
есть этот работающий код

Давненько я подобной х*йни не видел

источник

22:35пожаловаться #17

РГ

Расулходжа Ганиев... in Vue.js Russian Developers Community

Daniil Kuznetsov

Давненько я подобной х*йни не видел

Круто да?)

источник

22:38пожаловаться #18

РГ

Расулходжа Ганиев... in Vue.js Russian Developers Community

Daniil Kuznetsov

Давненько я подобной х*йни не видел

Ты со своим комментарием сделал мой день

источник

22:38пожаловаться #19

РГ

Расулходжа Ганиев... in Vue.js Russian Developers Community

Спасибо

источник

22:38пожаловаться #20