Vue指令、生命周期、Axios异步请求方式

发布于：2024-05-02 ⋅ 阅读:(38) ⋅ 点赞:(0)

Vue 是一款用于构建用户界面的渐进式的JavaScript框架

一、v-for

v-for = "(item, index) in items"
参数说明：
items 遍历的数组
item 遍历出来的元素
index 为索引/下表，从0开始，可以省略，省略index 语法： v-for = "item in items"

遍历的数组，必须在data中定义，要想让哪个标签循环展示多次，就在哪个标签上使用v-for指令。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>

   <div id="app">
       <table border="1 solid" colspa="0" cellspacing="0">
           <tr>
               <th>文章标题</th>
               <th>分类</th>
               <th>发表时间</th>
               <th>状态</th>
               <th>操作</th>
           </tr>
           <!-- 哪个元素要出现多次,v-for指令就添加到哪个元素上 -->
           <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:"文章标题三",
                               category:"旅游",
                               time:"2023-09-5",
                               state:"已发布"
                           }]  
               }
           }
       }).mount("#app")//控制页面元素
       
   </script>
</body>
</html>

二、v-bind

作用：动态为html标签绑定属性值，如设置href、src、style样式等
语法：v-bind：属性名=“属性值”
简化：属性名=“属性值”
v-bind绑定的数据，也必须在data里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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.baidu.com'
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>
</html>

三、v-if 和v-show

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

四、v-on

作用：html标签绑定事件
语法：
v-on：事件名=“函数名”
简写为 @事件名=“函数名”
Vue中使用的函数需要定义在methods选项内部

createApp({data(){需要用到的数据},methods:{需要用到的方法}})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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('送你钱100')
                },
                love: function(){
                    alert('爱你一万年')
                }
            }
        }).mount("#app");//控制html元素

    </script>
</body>
</html>

五、v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取 或设置表单项数据。视图发生了变化，数据就发生了变化；数据发生变化，试图也发生变化。 数据<------------->视图
语法：v-model=“变量名”
v-model中绑定的变量，必须在data中定义。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<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(){
                    //清空category以及state的数据
                    //在methods对应的方法里面,使用this就代表的是vue实例,可以使用this获取到vue实例中准备的数据
                    this.searchConditions.category='';
                    this.searchConditions.state='';
                }
            }
            ,
            mounted:function(){
                console.log('Vue挂载完毕,发送请求获取数据')
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

六、Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每个阶段会自动执行一个生命周期方法（钩子函数），让开发者有机会在特定的阶段执行自己的代码。

状态 阶段周期
beforeCreate 创建前 vue应用实例创建前调用
created 创建后 vue应用实例创建后调用
beforeMount 载入前 vue应用实例载入前调用
mounted 挂载完成 vue应用实例挂在后调用
beforeUpdate 数据更新前 vue应用实例数据更新前调用
updated 数据更新后 vue应用实例数据更新后调用
beforeUnmount 组件销毁前 vue应用实例组件销毁前调用
unmounted 组件销毁后 vue应用实例组件销毁后调用
只需要记住mounted钩子函数，
Vue生命周期包含几个阶段？
八个阶段
Vue生命周期典型的应用场景？
在页面加载完毕时，发起异步请求，加载数据，渲染页面。
//生命周期-钩子函数 mounted
mounted(){ 
console.log('Vue挂在完毕，发送请求获取数据.....');

}
发送请求使用Ajax的库

七、Axios

介绍：Axios对原生的Ajax进行封装，简化书写，快速开发
官网：https://www.axios-http.cn/
Axios使用步骤
引入Axios的js文件
使用Axios发送请求，并获取相应结果

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

  axios({
    method: 'GET',
    url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list'
  }).then((result) => {
    console.log(result.data);
  }).catch((err) => {
    alert(err);
  });

例子，then是正确的回调，catch是错误的回调结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 引入axios的js文件 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /* 发送请求 */
        /* axios({
            method:'get',
            url:'http://localhost:8080/article/getAll'
        }).then(result=>{
            //成功的回调
            //result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
            console.log(result.data);
        }).catch(err=>{
            //失败的回调
            console.log(err);
        }); */
        let article = {
            title: '明天会更好',
            category: '生活',
            time: '2000-01-01',
            state: '草稿'
        }
        /*  axios({
             method:'post',
             url:'http://localhost:8080/article/add',
             data:article
         }).then(result=>{
             //成功的回调
             //result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
             console.log(result.data);
         }).catch(err=>{
             //失败的回调
             console.log(err);
         }); */

        //别名的方式发送请求
        /* axios.get('http://localhost:8080/article/getAll').then(result => {
            //成功的回调
            //result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
            console.log(result.data);
        }).catch(err => {
            //失败的回调
            console.log(err);
        }); */
        axios.post('http://localhost:8080/article/add', article).then(result => {
            //成功的回调
            //result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
            console.log(result.data);
        }).catch(err => {
            //失败的回调
            console.log(err);
        });
    </script>
</body>

</html>

常用的是使用别名的方式请求
Axios的异步请求方式

GET: 
axios.get(url).then((res)=>{…}).catch((err)=>{…})
POST: 
    axios.post(url,data).then((res)=>{…}).catch((err)=>{…})

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布