Vue.js学习：制作跑马灯效果

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

跑马灯效果展示：

跑马灯效果.gif

实现过程：

新建网页html文件：

html基本架构

引入js库：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

添加基本元素：

<div id="app">
    <button value="开始跑" @click="run">开始跑</button>
    <button value="跑累了" @click="stop">跑累了</button>
    <h1>{{ msg }}</h1>
</div>

添加操作script标签，放在body下面。

script标签

然后就可以访问网页了。

跑马灯效果.gif