vue入门（回忆.img）-黑马vue+spring项目学习笔记

Vue入门

Vue安装

通过ES 模块快速将vue3导入到一个页面中

html
1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">{{ message }}</div>
<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

V提供的常用指令

指令作用
列表渲染，遍历容器的元素或者对象的属性
为HTML标签绑定属性，如设置href，css样式
条件性的渲染某元素，判定为true时渲染，否则不渲染
根据条件展示某元素，区别在于切换的是display属性的值
在表单元素上创建双向数据绑定
为HTML标签绑定事件

v-for

  • 作用：列表渲染，遍历容器的元素或者对象的属性
  • 语法：v-for = “(item,index) in items”
    • 参数说明：
      • items 为遍历的数组
      • item 为遍历出来的元素
      • index为索引/下标，从0开始；可以省略，省略index语法：v-for = “item in items”

简单案例

html
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
55
<body>
    <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="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.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>
</body>

v-bind

  • 作用：动态为HTML标签绑定属性值，如果设置href，sec，style样式等。
  • 语法：v-bind:属性名:=“属性值”
  • 简化：:属性名=“属性值”
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <div id="app">
        <!-- <a v-bind:href="URL">黑马官网</a> -->
         <a :href="URL">黑马官网</a>
    </div>
    <script type="module">
        //引入vue模块
        import { createApp} from
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    URL : 'https://www.itheima.com'
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

v-if&v-show

  • 作用：通过这两类指令，都是用来控制元素的显示与隐藏的
  • v-if
    • 语法：v-if=“表达式”,表达式值为 true，显示；false， 隐藏
    • 其他：可以配合 v-else-if/v-else 进行链式调用条件判断
    • 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
    • 场景：要么显示，要么不显示，不频繁切换的场景
  • v-show
    • 语法：v-show=“表达式”,表达式值为 true，显示；false，隐藏
    • 原理：基于CSS样式display来控制显示与隐藏
    • 场景：频繁切换显示的场景

      v-if简单案例

html
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
<body>
    <div id="app">
        手链价格为:
        <span v-if="customer.level>=0 && customer.level<=1">9.9</span>
        <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span>
        <span v-else=>29.9</span>
        <br>
        手链价格为:
        <span v-show="customer.level>=0 && customer.level<=1">9.9</span>
        <span v-show="customer.level>=2 && customer.level<=4">19.9</span>
        <span v-show="customer.level>=5">29.9</span>
    </div>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    customer: {
                        name: '张三',
                        level: 2
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

v-on

  • 作用：为html绑定事件
  • 语法：
    • v-on:事件名=“函数名”
    • 简写为@时间名=“函数名”
  • 函数需要定义在methods内
html
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
<body>
    <div id="app">
        <button v-on:click="money">点我有惊喜</button> &nbsp;
        <button @click="love">再点更惊喜</button>
    </div>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            }, methods: {
                money: function () {
                    alert("送你钱")
                },
                love: function () {
                    alert("爱你一万年")
                }
            }
        }).mount("#app");//控制html元素
    </script>
</body>

v-model

  • 作用：在表单元素上使用，双向数据绑定 。可以方便的获取或设置 表单项数据
  • 语法：v-model=“变量名”

    v-model 中绑定的变量，必须在data中定义。

html
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<body>
    <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>搜索</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="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.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'
        //创建vue应用实例
        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 () {
                    //在methods对应的方法里面，使用this就代表式vue实例，可以使用this获取到vue实例
                    this.searchConditions.category = "";
                    this.searchConditions.state = '';
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

vue生命周期

钩子函数

  • 生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子)，让开发者有机会在特定的阶段执行自己的代码
状态阶段周期
beforeCreate创建前
created创建后
beforeMount载入前
mounted挂载完成
beforeUpdate数据更新前
updated数据更新后
beforeUnmount组件销毁前
unmounted组件销毁后

mounted最为重要

Axios异步请求

Axios使用

  • 引入Axios的js文件
  • 使用Axios发生请求，并获取相应结果 安装Axios
html
1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios别名请求

get使用
html
1
2
3
4
5
6
7
8
9
10
11
<script>
axios.get("http://localhost:8080/article/getAll").then(result=>{
                //成功的回调
                //result代表服务器响应的所有数据，包含了响应头响应体
               console.log(result.data);
        }).catch(
            result=>{
                console.log(err);
            }
        );
</script>
post添加数据
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <script>  
   let article={
            title:'明天会更好',
            category:'生活',
            time:'2000-02-02',
            stata:'已发布'
        }    axios.post("http://localhost:8080/article/add",article).then(result=>{
                //成功的回调
                //result代表服务器响应的所有数据，包含了响应头响应体
                console.log(result.data);
        }).catch(
            result=>{
                console.log(err);
            }
        );
        </script>