Vue学习

Dioker

已于 2024-02-20 11:22:38 修改

阅读量374

点赞数 8

文章标签：学习前端

于 2024-02-10 22:17:45 首次发布

本文链接：https://blog.csdn.net/Dioker/article/details/136091645

版权

1.js导入文件

1.在需要导出的js文件中使用export导出,使用{}批量导出方法,使用逗号隔开

2.使用import导入js文件,使用{}批量导入方法,使用逗号隔开;from后跟文件位置(相对路径)

3.可以直接使用大括号内导入的方法,也可以使用as定义别名

4.一般使用default导出,导入的文件中使用自定义的名称(相当于类名),可以在自定义的名称调用导入的方法

	<script type="module">
        import messageMethods from './showMessage.js';
        document.getElementById("btn").onclick=function(){
            messageMethods.complexMessage('被点击了');
        }
    </script>

报错

Uncaught SyntaxError: The requested module ‘…/xx/xx/x.js’ does not provide an export named ‘default’

原因

js中的功能function前要写上export向外暴露,才能在其他文件中使用import导入

2.局部使用Vue

1.Vue入口

1.引入Vue模块

使用import导入Vue官方提供的在线js库

        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

2.定义div域,写id名,Vue需要使用id绑定div域;使用.mount('#app')绑定div域

3.返回数据,在大括号内定义一个data()方法,返回一个JSON对象,对象内部写上需要返回的数据

4.div域中使用插值表达式,在双大括号内写上需要的键名即可

    <!-- 引入vue模块 -->
    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        // 创建Vue的应用实例
        createApp({
            data(){
                return {
                    //定义数据
                    msg: 'hello vue3'
                }
            }
        }).mount('#app');
    </script>

2.常用指令

1.v-for

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

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


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

2.v-bind

作用:动态为HTML标签绑定属性值，如设置href，src，style样式等

语法: v-bind:属性名="属性值"
简化: :属性名="属性值"

    <div id="app">
        <a v-bind: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.baidu.com'
                }
            }
        }).mount("#app")//控制html元素
    </script>

3.v-if/v-else-if/v-else

语法: v-if="表达式"，表达式值为true显示,false隐藏

其它:可以配合 v-else-if /v-else 进行链式调用条件判断

原理: 基于条件判断，来控制创建或移除元素节点 (条件渲染)

场景:要么显示，要么不显示，不频繁切换的场景

4.v-show

语法: v-show="表达式"，表达式值为true显示,false隐藏

原理: 基于CSS样式display来控制显示与隐藏
场景:频繁切换显示隐藏的场景

    <div id="app">

        手链价格为:  <span v-if="customer.level>0 && customer.level<=1">9.9</span>
                    <span v-else-if="customer.level>1 && 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>1 && customer.level<=4">19.9</span>
                <span v-show="customer.level>4">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: 1
                        }
                }
            }
        }).mount("#app")//控制html元素
    </script>

v-if的原理是创建或不创建->切换不频繁时使用

v-show的原理是显示或不显示->切换频繁时使用

F12显示

错误:data数据返回的对象的格式为

customer:{name:"张三",level:1}

5.v-on

作用:为HTML标签绑定事件

语法:
v-on:事件名="函数名
简写为@事件名="函数名

    <div id="app">
        <button v-on:click="punch">点我有惊喜</button> &nbsp;
        <button @click="kick">再点更惊喜</button>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            },
            methods:{
                punch: function(){
                    alert("Rider Punch!")
                },
                kick: function(){
                    alert("Rider Kick")
                }
            }
        }).mount("#app");//控制html元素

    </script>

6.v-model

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

注意:v-model中绑定的变量，必须在data中定义

        文章分类: <input type="text" v-modle="serchData.category"/> <span>{{serchData.category}}</span>
        <br>
        发布状态: <input type="text" v-model="serchData.state"/> <span>{{serchData.state}}</span>
        <br>



                    serchData: {
                        category:'',
                        state:''
                    }

7.生命周期

一般使用生命周期函数的mounted(){}发送请求获取数据

    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {

                }
            },
            methods: {
                reset: function(){
                     this.serchData.category='',
                     this.serchData.state=''
                },
                mounted(){
                    console.log('Vue挂载完毕,发送请求数据')
                }
            }

        }).mount("#app")//控制html元素
    </script>

3.Axios

1.引入Axios的js文件

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

2.使用Axios发送请求,并获取相应结果

GET:

axios.get(url).then(result=>{...成功回调}).catch(error=>{...失败回调})

POST:

axios.post(url,data).then(result=>{...成功回调}).catch(error=>{...失败回调})

    <script>
        // 发送请求
        //get请求,正常格式
        axios({
            methods:'get',
            url:'http://localhost:l8080/article/getAl'
        }).then(result=>{
            //成功的回调
            //result代表服务器响应的所有的数据,包括响应头,响应体;
            //result.data代表的是接口响应的核心数据
            alert(result.data);
        }).catch(err=>{
            //失败的回调
            alert(err);
        });
        //缩写格式,一般用这个
        axios.get('http://localhost:l8080/article/getAl').then(result=>{
            alert(result.data);
        }).catch(err=>{
            alert(err);
        })
        let article={
            title:'明天会更好',
            category:'生活',
            time:'2000-01-01',
            state:'草稿'
        }
        axios.post('http://localhost:l8080/article/add',article).then(result=>{
            alert(result.data);
        }).catch(err=>{
            alert(err);
        })
    </script>

4.Vue案例

1.钩子函数mounted中,获取所有文章数据

使用mounted函数发送异步请求获取文章数据,使用Axios;返回的数据传递给articleList数组

2.使用v-for指令,把数据渲染到表格上显示

使用articleList中的数据,利用v-for指令将数据在表格中显示出来

3.使用v-model指令完成表单数据的双向绑定

在vue中创建search对象,存储文本框数据category和state用于搜索,利用v-model完成双向绑定

4.使用v-on指令为搜索按钮绑定单击事件

在vue中创建search方法,并利用v-on:click绑定在按钮上;在方法中发送请求完成搜索

        文章分类: <input type="text" v-model="serchData.category">
        {{serchData.category}}
        <br>
        发布状态: <input type="text" v-model="serchData.state">
        {{serchData.state}}
        <br>
        <button v-on:click="serch">搜索</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 src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        //创建Vue应用实例
        createApp({
            data(){
                return{
                    articleList:[],
                    serchData:{
                        category:'',
                        state:''
                    }
                }
            },
            //在钩子函数mounted中获取所有文章数据
            mounted:function(){
                //发送异步请求 Axios
                axios.get('http://localhost:8080/article/getAll').then(result=>{
                    this.articleList=result.data;
                }).catch(error=>{
                    alert(error);
                })
            },
            methods:{
                search:function(){
                    //发送请求,完成搜索
                    axios.get('http://localhost:8080/article/search?category='
                    +this.search.category+'&state='
                    +this.search.state)
                    .then(result=>{
                        this.articleList=result.data;
                    }).catch(error=>{
                        alert(error);
                    });
                }
            }
            
        }).mount('#app');
    </script>

spring-boot-maven-plugin引入不成功

问题:

idea一直下载不下来spring-boot-maven-plugin这个插件,也不会从本地仓库中去找

解决办法:

加上本地仓库中的version即可,就会从仓库中自己去找了

            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>3.2.2</version>
            </plugin>

3.整站使用Vue(工程化)

1.第一个Vue

1.使用cmd新建vue项目->npm init vue@latest

2.使用vscode打开->输入code .

3.需要编写的文件->src->App.vue

<script>
//写数据
export default{
  data(){
    return{
      msg: '上海'
    }
  }
}
</script>

<template>
<html lang="zh-CN"></html>
  <!--html-->
<h1>{{msg}}</h1>
</template>

<style scoped>
/* 样式 */
h1{
  color: rebeccapurple;
}
</style>

问题:新建的vue页面出现乱码,查看文件也是UTF-8

解决办法:添加一行<html lang="zh-CN"></html>

2.组合式Api

1.在script标签上添加setup标识

2.使用响应式对象,此对象只有一个内部值属性value

const count = ref(0);

count.value++;

3.使用函数

function(){}

4.声明钩子函数

onMounted(()=>{//操作})

3.案例

1.导入Axios,工程化导入->npm install axios

导入vue,工程化导入->import {ref} from 'vue';

1.获取文章数据

1)定义响应式数据->const articleList = ref([]);

2)发送异步请求.获取所有文章数据->

axios.get('http://localhost:8080/article/getAll').then(result=>{}).catch(error=>{})

3)使用v-for指令,把数据渲染到表格上展示

2.搜索功能

1)定义响应式数据 searchData

const searchData = ref({

category:'',

state:''

})

2)使用v-model指令完成表单数据的双向绑定->

3)声明search函数->const search = function(){}

4)使用v-on指令为搜索按钮绑定单击事件->

<script setup>
    //导入Axios,工程化导入->npm install axios
    import axios from 'axios';
    import {ref} from 'vue';
    //定义响应式数据
    const articleList = ref([]);

    //发送异步请求.获取所有文章数据
    axios.get('http://localhost:8080/article/getAll')
    .then(result=>{
        //保存服务器响应的数据
        articleList.value = result.data;
    })
    .catch(error=>{
        console.log(error);
    })

    //定义响应式数据 searchData
    const searchData = ref({
        category:'',
        state:''
    })

    //声明search函数
    //function search(){}
    const search = function(){
        //发送请求,完成搜索
        axios.get('http//localhost:/8080/article/search',{params:{...searchData.value}})
        .then(result=>{
            articleList.value = result.data;
        })
        .catch(error=>{
            console.log(error);
        })
    }
</script>

<template>
    <html lang="zh-CN"></html>
    <div>

        文章分类: <input type="text" v-model="searchData.category">

        发布状态: <input type="text" v-model="searchData.state">

        <button v-on:click="search">搜索</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>

</template>

3.优化

1.将函数放到单独的js文件中

将函数写到vue文件中复用性差,接口调用的js代码需要封装到js文件中,以函数的形式暴露给外部;一般放到api文件夹中

1)js文件中的函数前需要加上export,才能暴露给外部

2)函数中需要添加

await同步式等待服务器响应结果; async声明为异步函数(await只能在异步函数中使用)

在then中使用return返回从服务器获取的数据

    //获取所有文章数据的函数
    export async function articleGetAllService(){
        //同步等待服务器响应结果(不然获取不到),并返回 async await
        //await同步式等待服务器响应结果; async声明为异步函数(await只能在异步函数中使用)
        return await axios.get('/article/getAll')
        .then(result=>{
            return result.data;
        })
        .catch(error=>{
            console.log(error);
        })
    }

3)vue文件获取数据也需要使用async await添加同步,并且将获取函数返回结果封装为函数

    //同步获取函数返回结果 async await
    const getAllArticle = async function(){
        let data = await articleGetAllService();
        articleList.value = data;
    }
    getAllArticle();

2.定义一个变量,记录请求的公共前缀=>baseURL

再使用axios提供的create方法创建一个请求实例instance(实例instance与axios有同样的功能)

使用instance就不需要在添加baseURL中的前缀了

    const baseURL = 'http://localhost:8080';
    const instance = axios.create({baseURL});

    export async function articleGetAllService(){
        //同步等待服务器响应结果(不然获取不到),并返回 async await
        //await同步式等待服务器响应结果; async声明为异步函数(await只能在异步函数中使用)
        return await instance.get('/article/getAll')
        .then(result=>{
            return result.data;
        })
        .catch(error=>{
            console.log(error);
        })
    }

3.使用提供的拦截器优化代码

拦截器放到文件夹util里

//导入Axios,工程化导入->npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀=>baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    error=>{
        alert('服务异常');
        //异步的状态转换成失败的状态
        return Promise.reject(error);
    }
)

export default instance;

在获取服务器数据函数的js文件中导入拦截器文件后就可以直接使用request了

而且因为拦截器的方法本身是异步的,所以调用的函数不用再添加异步关键字了,只需要在最后的vue中的函数添加即可


import request from '@/util/request.js'

//获取所有文章数据的函数
export function articleGetAllService(){
    return request.get('/article/getAll');
}
//搜索函数
export function articleSearchService(searchData){
    return request.get('/article/search',{params: searchData});
}