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

zs132024-07-012024-07-23

Vue入门

Vue安装

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

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

简单案例

<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:属性名:=“属性值”
简化：:属性名=“属性值”

<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简单案例

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

<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中定义。

<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对原生的Ajax进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn

Axios使用

引入Axios的js文件
使用Axios发生请求，并获取相应结果安装Axios

1	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios别名请求

get使用

<script>
axios.get("http://localhost:8080/article/getAll").then(result=>{
                //成功的回调
                //result代表服务器响应的所有数据，包含了响应头响应体
               console.log(result.data);
        }).catch(
            result=>{
                console.log(err);
            }
        );
</script>

post添加数据

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