以下均在Windows 10环境下实现。
安装node.js的过程略过。
1、在cmd命令行中执行以下命令:
>npm install @vue/cli -g
2、查看vue版本
>vue -V
@vue/cli 5.0.8
注意,如果电脑中以前有vue2版本,则需要卸载后重启电脑再重新安装,否则有可能安装失败。
1、执行以下命令以创建项目
>npm init vue@latest
第一步需要填写项目名称;后面的除router建议选yes外,其他建议全部选No。
2、安装插件依赖,并启动项目
>cd [projectName]
>npm install
>npm run dev
<template>
<h1>{{ msg }}</h1>
<button @click="add">+</button>
<button @click="sub">-</button>
</template>
<script setup>
import {ref} from 'vue'
const msg=ref(0)
function add(){
msg.value++
}
function sub(){
msg.value--
}
</script>
1、 在components文件夹下创建Counter.vue,把上述App.vue中的代码剪切过来。
2、 把App.vue中的代码改为
<template>
<Counter/>
</template>
<script setup>
import Counter from './components/Counter.vue'
</script>
上述两个vue组件中,App.vue相当于父组件,Counter.vue相当于子组件,从功能上看与第3步中的计数器功能相同。
将上述计数器中显示数字的h1标签加上动态的title属性和class属性。title属性值等于msg变量的值;如果msg值小于0则将class属性值设为red,否则将class属性值设为green(red和green为自定义的css样式)
<template>
<h1 v-bind:title="tooltip" v-bind:class="msg >= 0 ? 'green' : 'red'">
{{ msg }}
</h1>
<button @click="add">+</button>
<button @click="sub">-</button>
</template>
<script setup>
import { ref } from "vue";
const msg = ref(0);
const tooltip = ref("");
function add() {
msg.value++;
tooltip.value = msg.value;
}
function sub() {
msg.value--;
tooltip.value = msg.value;
}
</script>
<style scoped>
.green {
color: green;
}
.red {
color: orangered;
}
</style>
1、安装element-plus
先停止项目,在项目目录中执行以下命令
>npm install element-plus --save
2、配置main.js文件
在main.js中添加以下代码:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
3、修改Counter.vue
<template>
<div>
<el-text
v-bind:type="msg >= 0 ? 'success' : 'danger'"
style="font-size: 2rem"
>
{{ msg }}
</el-text>
</div>
<el-button @click="add" type="success">加1</el-button>
<el-button @click="sub" type="danger">减1</el-button>
</template>
<script setup>
import { ref } from "vue";
const msg = ref(0);
function add() {
msg.value++;
}
function sub() {
msg.value--;
}
</script>
<template>
<div>
<el-text v-bind:title="msg" v-if="msg>=0" type="success" style="font-size: 2rem">{{ msg }}</el-text>
<el-text v-bind:title="msg" v-else type="danger" style="font-size: 2rem">{{ msg }}</el-text>
</div>
<el-button @click="add" type="success">加1</el-button>
<el-button @click="sub" type="danger">减1</el-button>
</template>
<script setup>
import { ref } from "vue";
const msg = ref(0);
function add() {
msg.value++;
}
function sub() {
msg.value--;
}
</script>
借助element-plus中的描述组件el-descriptions,展示一组数据
<template>
<el-row v-for="item in userdata" :key="item.id">
<el-col :span="24">
<el-descriptions
class="margin-top"
:column="2"
size="large"
border
style="margin: 0.5rem; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2)"
>
<el-descriptions-item>
<template #label>
<div class="cell-item">编号</div>
</template>
{{ item.id }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">姓名</div>
</template>
{{ item.un }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">性别</div>
</template>
{{ item.gender }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">年龄</div>
</template>
{{ item.age }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">住址</div>
</template>
{{ item.addr }}
</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from "vue";
const userdata = ref([
{id: 1, un: "张三", gender: "男", age: "35", addr: "贵州省贵阳市南明区宝山路"},
{id: 2, un: "李四", gender: "女", age: "32", addr: "贵州省兴义市桔山大道" },
]);
</script>
1、安装axios
>npm install axios --save
2、配置main.js
import axios from 'axios'
axios.defaults.withCredentials = true //允许跨域
axios.defaults.baseURL = 'http://jsonplaceholder.typicode.com' //免费api,获取100条数据
3、在组件中使用axios获取数据
<template>
<el-row v-for="item in userdata" :key="item.id">
<el-col :span="24">
<el-descriptions
class="margin-top"
:column="1"
size="large"
border
style="margin: 0.5rem; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2)"
>
<el-descriptions-item>
<template #label>
<div class="cell-item">编号</div>
</template>
{{ item.id }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">标题</div>
</template>
{{ item.title }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">内容</div>
</template>
{{ item.body }}
</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
</template>
<script setup>
import { ref, onMounted } from "vue";
import axios from 'axios';
const userdata = ref([ {}]);
onMounted(() => {
axios.get("/posts").then((rs)=>{
userdata.value=rs.data
})
})
</script>
pip install flask
pip install pymysql
pip install flask-cors
任意位置创建app.py文件,代码如下:
from flask import Flask
import pymysql
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True) #允许跨域
@app.route("/getdatalist")
def hello_world():
db = pymysql.connect(
host="localhost",
port=3306,
user='root',
password='root',
charset='utf8' ,
database='temp',
cursorclass=pymysql.cursors.DictCursor #结果类型为字典型
) #连接数据库
cursor = db.cursor() #创建游标对象
sql = 'select title,author,posttime from news order by posttime desc' #sql语句
cursor.execute(sql) #执行sql语句
all = cursor.fetchall() #获取全部数据
cursor.close()
db.close() #关闭数据库的连接
return (all)
执行flask run,以启动后端服务,ur默认l为http://127.0.0.1:5000
main.js
import axios from 'axios'
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://127.0.0.1:5000'
App.vue
<template>
<News/>
</template>
<script setup>
import News from './components/News.vue'
</script>
News.vue
<template>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>国内新闻</span>
</div>
</template>
<p v-for="(item,index) in rsdata" :key="index" class="text item">{{ item.title }}</p>
</el-card>
</template>
<script setup>
import { ref, onMounted } from "vue";
import axios from 'axios';
const rsdata = ref([ {}]);
onMounted(() => {
axios.get("/getdatalist").then((rs)=>{
rsdata.value=rs.data
})
})
</script>