以下均在Windows 10環(huán)境下實(shí)現(xiàn)。

安裝Vue3

安裝node.js的過程略過。
1、在cmd命令行中執(zhí)行以下命令：

>npm install @vue/cli -g

2、查看vue版本

>vue -V
@vue/cli 5.0.8

注意，如果電腦中以前有vue2版本，則需要卸載后重啟電腦再重新安裝，否則有可能安裝失敗。

創(chuàng)建Vue3項(xiàng)目（參照官方文檔使用vite）

1、執(zhí)行以下命令以創(chuàng)建項(xiàng)目

>npm init vue@latest

第一步需要填寫項(xiàng)目名稱；后面的除router建議選yes外，其他建議全部選No。
2、安裝插件依賴，并啟動(dòng)項(xiàng)目

>cd [projectName]
>npm install
>npm run dev

修改App.vue（改為setup語(yǔ)法糖的方式），直接在App.vue中實(shí)現(xiàn)計(jì)數(shù)器

<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>

使用組件的方式實(shí)現(xiàn)上述計(jì)數(shù)器功能

1、 在components文件夾下創(chuàng)建Counter.vue，把上述App.vue中的代碼剪切過來(lái)。
2、 把App.vue中的代碼改為

<template>
  <Counter/>
</template>

<script setup>
  import Counter from './components/Counter.vue'
</script>

上述兩個(gè)vue組件中，App.vue相當(dāng)于父組件，Counter.vue相當(dāng)于子組件，從功能上看與第3步中的計(jì)數(shù)器功能相同。

綁定屬性 v-bind

將上述計(jì)數(shù)器中顯示數(shù)字的h1標(biāo)簽加上動(dòng)態(tài)的title屬性和class屬性。title屬性值等于msg變量的值；如果msg值小于0則將class屬性值設(shè)為red，否則將class屬性值設(shè)為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>

使用Element-Plus對(duì)計(jì)數(shù)器進(jìn)行修飾

1、安裝element-plus
先停止項(xiàng)目，在項(xiàng)目目錄中執(zhí)行以下命令

>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>

條件渲染 v-if

<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>

列表渲染 v-for

借助element-plus中的描述組件el-descriptions，展示一組數(shù)據(jù)

<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">編號(hào)</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: "貴州省貴陽(yáng)市南明區(qū)寶山路"},
  {id: 2, un: "李四", gender: "女", age: "32", addr: "貴州省興義市桔山大道" },
]);
</script>

利用axios獲取數(shù)據(jù)

1、安裝axios

>npm install axios --save

2、配置main.js

import axios from 'axios'
axios.defaults.withCredentials = true  //允許跨域
axios.defaults.baseURL = 'http://jsonplaceholder.typicode.com'  //免費(fèi)api，獲取100條數(shù)據(jù)

3、在組件中使用axios獲取數(shù)據(jù)

<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">編號(hào)</div>
          </template>
          {{ item.id }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">標(biāo)題</div>
          </template>
          {{ item.title }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">內(nèi)容</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>

安裝Flask服務(wù)環(huán)境

pip install flask
pip install pymysql
pip install flask-cors

創(chuàng)建Flask應(yīng)用

任意位置創(chuàng)建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  #結(jié)果類型為字典型 
    ) #連接數(shù)據(jù)庫(kù)

    cursor = db.cursor() #創(chuàng)建游標(biāo)對(duì)象
    sql = 'select title,author,posttime from news order by posttime desc' #sql語(yǔ)句
    cursor.execute(sql)  #執(zhí)行sql語(yǔ)句
    all = cursor.fetchall() #獲取全部數(shù)據(jù)
    cursor.close()  
    db.close()  #關(guān)閉數(shù)據(jù)庫(kù)的連接
    return (all)

執(zhí)行flask run，以啟動(dòng)后端服務(wù)，ur默認(rèn)l為http://127.0.0.1:5000

前端Vue3從后端Flask服務(wù)中獲取數(shù)據(jù)

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文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-491797.html

<template>
     <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>國(guó)內(nèi)新聞</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>

到了這里，關(guān)于Vue3 Flask 漸進(jìn)式入門筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！