cai/VueJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Новые уроки и полировка кода

Browse Source
This commit is contained in:
Alexander I. Chebykin
2019-06-10 22:06:26 +03:00
parent 644a854843
commit 64d0c9568b
17 changed files with 594 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/data/id303.html
View File

@@ -7,9 +7,9 @@
<p>
Для начала нам понадобится Axios (<a href="https://yarnpkg.com/ru/package/axios" target="_blank">
https://yarnpkg.com/ru/package/axios</a>), именно с его помощью мы будем загружать наши json и html файлы.
Установим его командой <code>yarn add axios vue-axios</code>, после чего добавим в main.js строки для его
Установим его командой <kbd>yarn add axios vue-axios</kbd>, после чего добавим в main.js строки для его
подключения. Выглядеть он у вас должен следующим образом:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
import Vue from 'vue'
import Axios from 'axios'
@@ -32,7 +32,7 @@ new Vue({
о разделах, для этого строку items в блоке data приведём к виду <code>items: []</code>, после чего перейдём к
App.vue и в секцию export добавим <code>mounted () {}</code>. Здесь мы в дальнейшем добавим код, исполняемый при
запуске нашего приложения. Блок <code>&lt;script>&lt;/script></code> должен выглядеть следующим образом:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;script>
import TOC from './components/TOC'
@@ -63,7 +63,7 @@ new Vue({
</p>
<p>
Итак, добавим в секцию <code>mounted</code> код загрузки оглавления:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
mounted () {
this.axios.get("data/toc.json")
@@ -88,7 +88,7 @@ mounted () {
принципы работы нашего компонента. Каждый раз при выборе элемента, у компонента изменяется свойство active и
нам надо отслеживать его изменение в App.vue. Для этого добавим в mounted файла App.vue следующий код:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
this.$watch(
"$refs.TOC.active",