.lists-app
- const lists = new Array(10)
- const items = new Array(3)
each i, idx in lists
button(
data-list-toggle=`${idx}`
) open #{idx + 1}
ul.lists-app__list(
data-list=`${idx}`
)
each i, idx in items
li list elem #{idx + 1}.lists-app
&__list
display: none
&--open
display: blockconst rootClass = 'lists-app'
const openClass = 'lists-app__list--open'
const $listsRoot = document.querySelector(`.${rootClass}`)
const findList = idx => {
return $listsRoot.querySelector(`[data-list='${idx}']`)
}
const closeList = $el => {
$el.classList.remove(openClass)
}
const openList = $el => {
$el.classList.add(openClass)
}
const isOpen = $el => $el.classList.contains(openClass)
const getOpenList = () => {
return $listsRoot.querySelector(`.${openClass}`)
}
$listsRoot.addEventListener('click', e => {
if (!e.target.hasAttribute('data-list-toggle')) {
return
}
const idx = e.target.dataset.listToggle
const $list = findList(idx)
if (isOpen($list)) {
closeList($list)
return
}
const $openList = getOpenList()
$openList ? closeList($openList) : null
openList($list)
})
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = require('./app')
// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'
async function start () {
// Init Nuxt.js
const nuxt = new Nuxt(config)
const { host, port } = nuxt.options.server
await nuxt.ready()
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
}
// Give nuxt middleware to express
app.use(nuxt.render)
// Listen the server
app.listen(port, host, () => {
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
})
}
start()const express = require('express')
const app = express()
module.exports = appserverMiddleware: {
'/api': '~/api'
},const express = require('express')
// Create express instance
const app = express()
app.get('/', (req, res) => res.status(200).json([{name: "Robert"}, {name: "John"}]))
// Export express app
module.exports = app
// Start standalone server if directly running
if (require.main === module) {
const port = process.env.PORT || 3001
app.listen(port, () => {
console.log(`API server listening on port ${port}`)
})
}<template lang="pug">
div
p(v-for="user in users") {{ user.name }}
</template>
<script>
export default {
async asyncData({ $axios }) {
const users = await $axios.$get('/api/')
return {
users,
}
},
}
</script>app.use(express.static(path.join(__dirname, 'public')))<link rel="stylesheet" href="/css/main.css">
<script src="/js/main.js"></script>
const user = {
name: 'Nikola',
age: 25
}
console.log(user)
setTimeout(() => {
user.age = 45
console.log(user)
}, 5000)// вешаем обработчик на документ
// если повесите на каждую ссылку - то кол-во обработчиков будет равно кол-ву ссылок
// так себе идея
document.addEventListener('click', e => {
// определяем, что клик произошёл на ссылке
if (e.target.nodeName === 'A') {
// отменяем переход по ссылке
e.preventDefault()
console.log('do some there')
}
})