黑马最新版Springboot3+Vue项目跟学笔记——Vue3的快速入门

CharlesHan
343 阅读2分钟

一、vue的基本语法

1.vue的快速入门：

Document

{{msg}}

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data () {
            return {
                msg:'hello vue3'
            }
        }
    }).mount('#app')
</script>

2.**v-for的使用：

v-for的使用.png

v-for案例

Document 
<div id="app">
    <table border="1 solid" colspa="0" cellspacing="0">
        <tr>
            <th>文章标题</th>
            <th>分类</th>
            <th>发表时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in articleList">
            <td>{{item.title}}</td>
            <td>{{item.category}}</td>
            <td>{{item.time}}</td>
            <td>{{item.state}}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
</div>

<script type="module">
    //导入vue模块
    import { createApp} from 
            'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    //创建应用实例
    createApp({
        data() {
            return {
                articleList:[
                {
                    title:"医疗反腐绝非砍医护收入",
                    category:"时事",
                    time:"2023-09-5",
                    state:"已发布"
                },
                {
                    title:"中国男篮缘何一败涂地？",
                    category:"篮球",
                    time:"2023-09-5",
                    state:"草稿"
                },
                {
                    title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                    category:"旅游",
                    time:"2023-09-5",
                    state:"已发布"
                }
            ]
            }
        }
    }).mount("#app")//控制页面元素
</script>

3.v-bind:

v-bind.png

image-20240104093016323.png

4：v-if&v-show：

image-20240104093910197.png

image-20240104094317691.png

5.v-on：

image-20240104094550117.png

image-20240104094943264.png

6.v-model：

image-20240104095221006.png

案例：

Document 
<div id="app">
    文章分类：<input type="text" v-model="searchConditions.category"/><span>{{searchConditions.category}}</span>
    发布状态：<input type="text" v-model="searchConditions.state"/><span>{{searchConditions.state}}</span>

​ 搜索 ​ 重置 ​
​ 

    <table border="1 solid" colspa="0" cellspacing="0">
        <tr>
            <th>文章标题</th>
            <th>分类</th>
            <th>发表时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in articleList">
            <td>{{item.title}}</td>
            <td>{{item.category}}</td>
            <td>{{item.time}}</td>
            <td>{{item.state}}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
    </table>

​ 

<script type="module">
    //导入vue模块
    import { createApp} from 
            'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    //创建应用实例
    createApp({
        data() {
            return {
                searchConditions:{
                    category:'',
                    state:''
                },
                articleList:[
                {
                    title:"医疗反腐绝非砍医护收入",
                    category:"时事",
                    time:"2023-09-5",
                    state:"已发布"
                },
                {
                    title:"中国男篮缘何一败涂地？",
                    category:"篮球",
                    time:"2023-09-5",
                    state:"草稿"
                },
                {
                    title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                    category:"旅游",
                    time:"2023-09-5",
                    state:"已发布"
                }
            ]
            }
        },
        methods: {
            clear:function(){
                this.searchConditions.category='',
                this.searchConditions.state=''
            }
        }
    }).mount("#app")//控制页面元素
</script>

二、vue的生命周期

image-20240104102431551.png

image-20240104102614027.png

三、Ajax

image-20240104103733689.png

image-20240104103754205.png ​ 官网：http://www/axios-http.cn/

1.axios的使用步骤!

image-20240104103930513.png

image-20240104104714967.png

2.axios别名请求方式

image-20240104105604504.png

3.小结：

image-20240104105831322.png

四、vue案例大总结：

image-20240104110051412.png

Document 
<div id="app">
    文章分类：<input type="text" v-model="searchConditions.category"/><span>{{searchConditions.category}}</span>
    发布状态：<input type="text" v-model="searchConditions.state"/><span>{{searchConditions.state}}</span>

    <button v-on:click="search">搜索</button>
    <button v-on:click="clear">重置</button>
    <br/>
    <br/>
    <table border="1 solid" colspa="0" cellspacing="0">
        <tr>
            <th>文章标题</th>
            <th>分类</th>
            <th>发表时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in articleList">
            <td>{{item.title}}</td>
            <td>{{item.category}}</td>
            <td>{{item.time}}</td>
            <td>{{item.state}}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
</div>
<!-- 导入axios的js文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
    //导入vue模块
    import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    
    //创建应用实例
    createApp({
        data() {
            return {
                searchConditions:{
                    category:'',
                    state:''
                },
                articleList:[]
            }
        },
        methods: {
            clear:function(){
                this.searchConditions.category='',
                this.searchConditions.state=''
            },
            search:function(){
                //发送请求，完成搜索
                axios.get('http://localhost:8080/article/search?category='+this.searchConditions.category+'&state='+this.searchConditions.state)
                .then(result=>{
                    //成功回调
                    //console.log(result.data)
                    this.articleList = result.data
                }).catch(err=>{
                    //失败回调
                    console.log(err)
                });
            }
        },
        mounted:function() {
            axios.get('http://localhost:8080/article/getAll').then(result=>{
                //成功回调
                //console.log(result.data)
                this.articleList = result.data
            }).catch(err=>{
                //失败回调
                console.log(err)
            });
        }
    }).mount("#app")//控制页面元素
</script>
avatar
文章
阅读
粉丝