黑马程序员学习之Vue3各种功能

微笑伴你而行

已于 2025-02-12 11:07:49 修改

阅读量802

点赞数 19

分类专栏：毕设-CM项目管理系统文章标签：学习

于 2025-01-17 15:17:48 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52108058/article/details/145207550

版权

毕设-CM项目管理系统专栏收录该内容

6 篇文章

订阅专栏

文章目录

1、JavaScript-导入导出

在这里插入图片描述

导入和导出的时候，可以使用as重命名

2、Vue快速入门

Vue是一款用于构建用户界面的渐进式的JavaScript框架。
在这里插入图片描述

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

3、v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法：v-for="(item,index)in items"

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

shift+alt+f重排代码格式

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

4、v-bind

作用：动态为HTML标签绑定属性值，如设置href，src,style样式等。
在这里插入图片描述
作用：动态为HTML标签绑定属性值，如设置href,src,style样式等。
语法：v-bind：属性名=“属性值”
简化：:属性名=”属性值"
两种格式：

      <a v-bind:href="url">百度搜索</a>
      <a :href="url">百度搜索</a>

5、v-if&v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if语法：v-if=“表达式”，表达式值为true，显示；false，隐藏
v-else-if可以配合/v-else进行链式调用条件判断
原理：基于条件判断，来控制创建或移除元素节点（条件渲染)

v-show语法：v-show=“表达式”，表达式值为true,显示；false,隐藏
原理：基于Css样式display来控制显示与隐藏

        手链价格为:  <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>

在这里插入图片描述

6、v-on

作用：为html标签绑定事件
语法：
v-on:事件名=“函数名”
简写 @事件名=“函数名”

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

        <button v-on:click="money">点我有惊喜</button> &nbsp;
        <button @click="love">再点更惊喜</button>

         methods:{
             //定义方法
             money:function(){
                 alert("恭喜你，你获得了100元！")
             },
             love:function(){
                 alert("l love you")
             }
         }

7、v-model

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

        文章分类: <input type="text" v-model="searchConditions.category" />
        <span>{{searchConditions.category}}</span>

        发布状态: <input type="text" v-model="searchConditions.state"/>
        <span>{{searchConditions.state}}</span>

8、生命周期

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

生命周期的八个阶段：每个阶段会自动执行一个生命周期方法（钩子)，让开发者有机会在特定的阶段执行自己的代码
在这里插入图片描述

9、axios

使用步骤：
在这里插入图片描述

let article={
            title:'医疗反腐绝非砍医护收入',
            category:'时事',
            time:'2023-09-5',
            state:'已发布'
        }
        axios({
            method:'post',
            url:'http://localhost:8081/article/add',
            data:article,
        }).then(result=>{
            // 成功的回调
            //result代表服务器响应所有的数据，包含了响应头和响应体，result.data代表接口回调的核心数据
            console.log(result.data);
        }).catch(err=>{
            // 失败的回调
            console.log(err);
        })

在这里插入图片描述