开始使用vue和vuetify

半城伤御伤魂 提交于 2019-12-20 19:59:32

底部加上vue的script

<!-- development version, includes helpful console warnings -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vuetify -->
<script src="https://unpkg.com/vuetify@1.0.17/dist/vuetify.min.js"></script>

样式引用

<link href="https://cdn.staticfile.org/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" rel="stylesheet"/>
<link href="https://unpkg.com/vuetify@1.0.17/dist/vuetify.min.css" rel="stylesheet">
<style>
    [v-cloak] {
        display: none;
    }
</style>

页面body体上加入展示元素

<div id="app">
    <v-content v-cloak>
        <v-container>
            <h1 :title="msg">Hello, single Vue!</h1>
        </v-container>
    </v-content>
</div>

启动js

var app = new Vue({
    el: '#app',
    data: {
        msg: 'Hello'
    }
})

完整版

https://gist.github.com/terwer/0f9e19c1a2f345e04c2eb91609489026

在线查看

https://runjs.cn/detail/kpscnn6a

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!