前言
对于后端人士来说vue的开发有些摸不着头脑,便捷式的开发使得其得到大部分人的喜爱
Vuetify
安装vuetify依赖-----vue add vuetify
这里官方文档也有说:https://vuetifyjs.com/en/getting-started/quick-start/
主要记录自己的学习过程 也是在B站听一个老外叽里咕噜勉强学到了点
对于刚生成的项目App.vue这里需要进行删减不然你无论配置啥路由访问都是那个vue的页面
对自己来说还是一点 多看官方文档
App.vue
<template>
<v-app>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Home.vue
<template>
<!--当有一个root组的时候不能再创建一个不然code直接报错-->
<div class="home">
<!--要想v-icon起作用 要么导入link连接 要么npm下载依赖-->
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<!-- <img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!--控制字体的颜色和背景颜色-->
<span class="red white--text">sadasndknsdkndkbflfb,flgasdsa</span>
<!-- text--darken-4 字体颜色数值越大加深 lighten-4 背景颜色 数值越大越浅-->
<span class="pink lighten-4 red--text text--darken-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, iste suscipit ad unde provident, impedit cum doloremque accusantium minus odit perspiciatis? Porro aliquam voluptate quidem sapiente aspernatur, a vitae soluta!</span>
<h1 class="display-4">Massive Dispaly</h1><!--控制字体的大小 数值越大字越大-->
<h1 class="display-1">Massive Dispaly</h1>
<!--使用一个vuetify模版页面-->
<v-content>
<paiban/>
<test/>
</v-content>
<v-btn class="pink white--text">click me</v-btn>
<v-btn depressed color="pink">click me</v-btn>
<v-btn flat color="pink">click me</v-btn><!-- 新版的是将flat改成了text-->
<!--添加link之后图标正常显示-->
<v-btn depressed small color="pink white--text">
<v-icon left small>email</v-icon>
<span> email me</span>
</v-btn>
<v-btn depressed color="pink white--text">
<v-icon>check</v-icon>
</v-btn>
<v-btn fab depressed small dark color="red"><!--fab圆形-->
<v-icon>favorite</v-icon>
</v-btn>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
//导入一个vuetify模版页面
import paiban from './paiban.vue'
import test from './test.vue'
export default {
name: 'Home',
// components: {
// HelloWorld
// }
components: {
paiban,
test,
}
}
</script>
对于页面的跳转,利用rout实现页面的访问
向后台发送请求的话是axios
一般的模板文件的数据我用v-model实现数据的双向绑定
<template>
<v-app id="inspire">
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col
cols="12"
sm="8"
md="4"
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>Login form</v-toolbar-title>
<v-spacer />
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn
icon
large
href="https://codepen.io/johnjleider/pen/pMvGQO"
target="_blank"
v-on="on"
>
<v-icon>mdi-codepen</v-icon>
</v-btn>
</template>
<span>Codepen</span>
</v-tooltip>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Login"
name="login"
v-model="login"
prepend-icon="person"
type="text"
/>
<v-text-field
id="password"
label="Password"
name="password"
v-model="password"
prepend-icon="lock"
type="password"
/>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="primary" @click="submit">Login</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
// import axios from 'axios'
// axios.defaults.timeout = 2000;//设置axios的请求时间
// Vue.prototype.$http = axios;
export default {
name: "test",
props: {
source: String,
},
data: () => ({
login: "",
password: ""
}),
methods: {
submit() {
// console.log("111111"),
// 将数据提交到后台
console.log(this.login + " ... " + this.password),
// axios({
// method: 'get',
// url: 'http://www.xxxx.cn',
// // data:
// }).then(() => {
// this.$message.success("保存成功!");
this.$router.push({ path: '/About' });
// this.closeWindow();
// }).catch(() => {
// // this.$message.error("保存失败!");
// this.$router.push({ path: '/home' });
// });
}
}
}
// }
</script>
希望我的这些会对你有所帮助 第一天学vuetify有错误请见谅。