黑马最新版Springboot3+Vue项目跟学笔记——Vue3的快速入门_黑马程序员springboot3+vue3 笔记

一、vue的基本语法

---

1.vue的快速入门：

<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>
1
2
3
4
5
6
7
8
9
10

---

2.v-for的使用：

---

v-for案例

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

---

3.v-bind:

---

---

4：v-if&v-show：

---

---

5.v-on：

---

6.v-model：

案例：

<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>
1
2
3

​ 搜索
​ 重置
​

​

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

​

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

---

二、vue的生命周期

---

三、Ajax

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

1.axios的使用步骤

2.axios别名请求方式

3.小结：

四、vue案例大总结：

---

<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>
1
2
3

​ 搜索
​ 重置
​

​

​
​

​ //创建应用实例
​ 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”)//控制页面元素
​

).then(result=>{ ​ //成功回调 ​ //console.log(result.data) ​ this.articleList = result.data ​ }).catch(err=>{ ​ //失败回调 ​ console.log(err) ​ }); ​ } ​ }).mount("#app")//控制页面元素 ​