How to implement seamless scrolling components using vue-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement seamless scrolling components using vue

亚连

Jun 20, 2018 pm 01:50 PM

vue Seamless scrolling

This article mainly explains the usage of vue's seamless scrolling component vue-seamless-scroll. Friends who need it can refer to it.

Installation

NPM

1	`npm install vue-seamless-scroll --save`

Copy after login

Usage

ES6

The following es6 usage requires webpack environment compilation.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

<template>
  <p id="app">
    <p class="fixed top-0 w-100 z-1 flex-none flex flex-row items-center pv3 ph4 bg-blue white">
      <p class="flex-none"><a href="https://github.com/chenxuan0000/vue-seamless-scroll" rel="external nofollow" rel="external nofollow" rel="noopener"
                   target="_blank" title="View on Github">
        <svg xmlns="http://www.w3.org/2000/svg" fill="white" width="32" height="32" viewBox="0 0 16 16">
          <path d="M8 .198c-4.418 0-8 3.582-8 8 0 3.535 2.292 6.533 5.47 7.59.4.075.548-.173.548-.384 0-.19-.008-.82-.01-1.49-2.227.485-2.696-.943-2.696-.943-.364-.924-.888-1.17-.888-1.17-.726-.497.055-.486.055-.486.802.056 1.225.824 1.225.824.714 1.223 1.872.87 2.328.665.072-.517.28-.87.508-1.07-1.776-.202-3.644-.888-3.644-3.954 0-.874.313-1.588.824-2.148-.083-.202-.357-1.015.077-2.117 0 0 .672-.215 2.2.82.64-.177 1.323-.266 2.003-.27.68.004 1.365.093 2.004.27 1.527-1.035 2.198-.82 2.198-.82.435 1.102.162 1.916.08 2.117.512.56.822 1.274.822 2.147 0 3.072-1.872 3.748-3.653 3.946.288.248.544.735.544 1.48 0 1.07-.01 1.933-.01 2.196 0 .213.145.462.55.384 3.178-1.06 5.467-4.057 5.467-7.59 0-4.418-3.58-8-8-8z"></path>
        </svg>
      </a>
      </p>
      <p class="flex-none" style="margin-left: 10px;"><a href="https://github.com/chenxuan0000/vue-seamless-scroll" rel="external nofollow" rel="external nofollow"
                   class="white no-underline underline-hover">vue-seamless-scroll</a></p>
    </p>
    <p class="pt5 f2" style="text-align: center;">无缝滚动demo</p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo1</b> 向上无缝滚动,hover可停止</p>
        var option = {<br/>
              step: 0.5,<br/>
              limitMoveNum: 5<br/>
        }
      </p>
      <my-class :data="listData" :class-option="classOption" @copy-data="listData = listData.concat(listData)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData"><span class="title" v-text="item.title"></span><span class="date"
                                                   v-text="item.date"></span>
          </li>
        </ul>
      </my-class>
    </p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo2</b> limitMoveNum过大不滚动 开启了openWatch</p>
        <p>3s后data增加到9条</p>
        var option = {<br/>
              limitMoveNum: 7<br/>
        }
      </p>
      <my-class :data="listData1" :class-option="classOption1"
           @copy-data="listData1 = listData1.concat(listData1)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData1"><span class="title" v-text="item.title"></span><span
              class="date" v-text="item.date"></span></li>
        </ul>
      </my-class>
    </p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo3</b> limitMoveNum过大不滚动 关闭了openWatch</p>
        <p>3s后data增加到9条</p>
        var option = {<br/>
              limitMoveNum: 7<br/>
              openWatch: false<br/>
        }
      </p>
      <my-class :data="listData2" :class-option="classOption2"
           @copy-data="listData2 = listData2.concat(listData2)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData2"><span class="title" v-text="item.title"></span><span
              class="date" v-text="item.date"></span></li>
        </ul>
      </my-class>
    </p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo4</b> 向下滚动,禁止了hover悬停</p>
        var option = {<br/>
              limitMoveNum: 5,<br/>
              direction: 0,<br/>
              hoverStop: false,<br/>
        }
      </p>
      <my-class :data="listData3" :class-option="classOption3"
           @copy-data="listData3 = listData3.concat(listData3)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData3"><span class="title" v-text="item.title"></span><span
              class="date" v-text="item.date"></span></li>
        </ul>
      </my-class>
    </p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo5</b> 向上无缝滚动,单条停止一段时间</p>
        var option = {<br/>
              step: 0.5,<br/>
              limitMoveNum: 5<br/>
              singleHeight: 30,<br/>
              waitTime: 1000<br/>
        }
      </p>
      <my-class :data="listData4" :class-option="classOption4"
           @copy-data="listData4 = listData4.concat(listData4)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData4"><span class="title" v-text="item.title"></span><span class="date"
                                                    v-text="item.date"></span>
          </li>
        </ul>
      </my-class>
    </p>
  </p>
</template>
 
<script>
 import myClass from &#39;../src/components/myClass.vue&#39;
 export default {
  name: &#39;app&#39;,
  data () {
   return {
    listData: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第九行无缝滚动第九行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
    listData1: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
    listData2: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
    listData3: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
    listData4: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第九行无缝滚动第九行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
   }
  },
  computed: {
   classOption () {
    return {
     step: 0.5,
     limitMoveNum: 5
    }
   },
   classOption1 () {
    return {
     limitMoveNum: 7
    }
   },
   classOption2 () {
    return {
     limitMoveNum: 7,
     openWatch: false
    }
   },
   classOption3 () {
    return {
     limitMoveNum: 5,
     direction: 0,
     hoverStop: false
    }
   },
   classOption4 () {
    return {
     step: 0.5,
     limitMoveNum: 5,
     singleHeight: 30,
     waitTime: 1000
    }
   }
  },
  components: {
   myClass
  },
  created () {
   setTimeout(() => {
    this.listData1 = this.listData2 = [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第九行无缝滚动第九行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }]
   }, 3000)
  }
 }
</script>
 
<style lang="scss">
  #app {
    padding-bottom: 100px;
  }
  .flex-fill {
    -ms-flex: 1 1;
    flex: 1 1;
  }
  .options {
    width: 300px;
    font-size: 15px;
    margin-right: 60px;
    p {
      color: #000;
      margin-bottom: 30px;
      b {
        font-size: 16px;
        font-style: italic;
      }
    }
  }
  .wd800 {
    width: 800px;
    margin: 30px auto;
  }
  .warp {
    height: 260px;
    width: 360px;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    }
  }
  @media screen and (max-width: 770px) {
    .warp {
      width: 90%;
      margin: 0 auto;
    }
    body {
      background-color: lightblue;
    }
    .wd800 {
      width: 100%;
    }
    .flex.wd800 {
      display: block;
    }
    .options {
      width: 90%;
      margin: 20px auto;
      p {
        margin-bottom:0;
      }
    }
  }
</style>

Copy after login

import Vue from &#39;vue&#39;
import vueSeamlessScroll from &#39;vue-seamless-scroll&#39;
 
new Vue({
 components: {
  vueSeamlessScroll
 }
})

Copy after login

Normal mode (script tag)

Example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .warp {
        height: 260px;
        width: 360px;
        overflow: hidden;
      }
      .warp ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
      }
      .warp li {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <p id="app">
      <vue-seamless-scroll :data="listData" :class-option="classOption"
                 @copy-data="listData = listData.concat(listData)"
                 class="warp">
        <ul class="item">
          <li v-for="item in listData"><span class="title" v-text="item.title"></span><span class="date"
                                                   v-text="item.date"></span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
    <script src="../dist/vue-seamless-scroll.min.js"></script>
    <script>
     new Vue({
      el: &#39;#app&#39;,
      data: {
       listData: [{
        &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第九行无缝滚动第九行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }]
      },
      computed: {
       classOption: function () {
        return {
         step: 0.5,
         limitMoveNum: 5
        }
       }
      }
     })
    </script>
  </body>
</html>

Copy after login

<html>
<head>
 ...
</head>
<body>
 <p id="app">
  <vue-seamless-scroll></vue-seamless-scroll>
 </p>
 <script src="vue.js"></script>
 <script src="vue-seamless-scroll"></script>
 <script>
  new Vue({
   el: &#39;#app&#39;
  })
 </script>
</body>
</html>

Copy after login

Configure

defaultOption () {
   return {
    step: 1, //步长 越大滚动速度越快
    limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length
    hoverStop: true, //是否启用鼠标hover控制
    direction: 1, //1 往上 0 往下
    openWatch: true, //开启data实时监听
    singleHeight: 0, //单条数据高度有值hoverStop关闭
    waitTime: 1000 //单步停止等待时间
   }
  }

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed interpretation of the responsiveness principle in Vuejs

About classes, constructors, and factory functions in Javascript How to use

How to use nodeJS to implement WeChat sharing

How to use the mobile component library in Vue.js (detailed tutorial)

How to remove the # sign from the url in Angular2 (detailed tutorial)

The above is the detailed content of How to implement seamless scrolling components using vue. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Blue Prince: How To Get To The Basement

1 months ago By DDD

Nordhold: Fusion System, Explained

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1664

CakePHP Tutorial

1423

Laravel Tutorial

1321

PHP Tutorial

1269

C# Tutorial

1249

Related knowledge

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

How to add functions to buttons for vue Apr 08, 2025 am 08:51 AM

You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.

How to use watch in vue Apr 07, 2025 pm 11:36 PM

The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.

How to return to previous page by vue Apr 07, 2025 pm 11:30 PM

Vue.js has four methods to return to the previous page: $router.go(-1)$router.back() uses <router-link to="/" component window.history.back(), and the method selection depends on the scene.

What does vue multi-page development mean? Apr 07, 2025 pm 11:57 PM

Vue multi-page development is a way to build applications using the Vue.js framework, where the application is divided into separate pages: Code Maintenance: Splitting the application into multiple pages can make the code easier to manage and maintain. Modularity: Each page can be used as a separate module for easy reuse and replacement. Simple routing: Navigation between pages can be managed through simple routing configuration. SEO Optimization: Each page has its own URL, which helps SEO.

React vs. Vue: Which Framework Does Netflix Use? Apr 14, 2025 am 12:19 AM

Netflixusesacustomframeworkcalled"Gibbon"builtonReact,notReactorVuedirectly.1)TeamExperience:Choosebasedonfamiliarity.2)ProjectComplexity:Vueforsimplerprojects,Reactforcomplexones.3)CustomizationNeeds:Reactoffersmoreflexibility.4)Ecosystema

How to reference js file with vue.js Apr 07, 2025 pm 11:27 PM

There are three ways to refer to JS files in Vue.js: directly specify the path using the <script> tag;; dynamic import using the mounted() lifecycle hook; and importing through the Vuex state management library.

How to use vue traversal Apr 07, 2025 pm 11:48 PM

There are three common methods for Vue.js to traverse arrays and objects: the v-for directive is used to traverse each element and render templates; the v-bind directive can be used with v-for to dynamically set attribute values for each element; and the .map method can convert array elements into new arrays.

See all articles