Vue黑马版（总结中）

最新推荐文章于 2024-04-08 00:05:41 发布
最新推荐文章于 2024-04-08 00:05:41 发布
阅读量460 收藏 11
点赞数
分类专栏： java 笔记总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44165280/article/details/114540748
版权

整个前端工程只有一个入口就是main.js

简介

官方文档：https://cn.vuejs.org/

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在这里插入图片描述
在这里插入图片描述

第一个vue程序

#是id选择器

.是class选择器
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基础</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
       el:"#app",
        data:{
           message:"hello vue!"
        }
    });
</script>
</body>
</html>

el:挂载点

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el:挂载点</title>
</head>
<body>
{{message}}//超出vue作用域
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app" class="app"> //支持标签<h2></h2>>
{{message}}
   <p>{{message}}</p>
</div>

<script>
    var app=new Vue({
   el:"#app",  // #是id选择器（默认）
   //  el:".app", class选择器
   // el:"div",//标签选择器
       data:{
           message:"my name is liangwh!"
       }
    });

</script>

</body>
</html>

data:数据对象

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data：数据对象</title>
</head>
<body>
<div id="app">
    {{message}}
    <h2>{{school.name}}{{school.mobile}}</h2>
<ul>
    <li>{{campus[0]}}</li>
    <li>{{campus[1]}}</li>
</ul>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"你好，梁伟浩!",
            school: {
                name: "梁伟浩",
                mobile:"4154545454",
            },
            campus:["北京","珠海","深圳","广州"]
        }
    });
</script>
</body>
</html>

在这里插入图片描述

vue指令

在这里插入图片描述

v-text

v-text
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text：指令</title>
</head>
<bod>
<div id="app">
  <h2 v-text="message+'字符串拼接'">深圳</h2>
    <h2 v-text="info">深圳</h2>
    <h2>{{message}}深圳</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
    el:"#app",
        data:{
        message:"78787878",
            info:"好好学习天天向上"
    }
    });
</script>


</bod>
</html>

在这里插入图片描述

v-html

v-html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html：指令</title>
</head>
<bod>
<div id="app">
<p v-text="content"></p>//纯文本
    <p v-html="content"></p>//可以解释超文本
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
    el:"#app",
        data:{
       // content:"我是梁伟浩",
content:"<a href='https://www.baidu.com'>梁伟浩</a>"
    }
    });
</script>


</bod>
</html>

v-on

v-on

为元素绑定时间
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on指令基础</title>
</head>
<div id="app">
    <input type="button" value="v-on指令" v-on:click="doIt">

<p>
    <input type="button" value="v-on简写" @click="doIt">
</p>
    <P>
        <input type="button" value="双击事件" @dblclick="doIt">
    </P>
    <h2 @click="changeFood">{{food}}</h2>
</div>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
       el:"#app",
        data:{
          food:"韭菜炒鸡蛋"
        },
       methods:{
           doIt:function (){
               alert("做it");
           },
           changeFood:function (){
              // console.log(this.food);
           this.food+="好好吃！"
           }
       }
    });

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on补充</title>
</head>
<body>
<div id="app">
    <input type="button" value="点击我" @click="doIt(666,'老铁')">
    <input type="text"  @keyup.enter="sayHi">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
       el:"#app",
       methods:{
           doIt:function (p1,p2){
               console.log("学习");
           console.log(p1);
           console.log(p2);
           },
           sayHi:function (){
               alert("吃了吗");
           }
       }
    });
</script>
</body>
</html>

v-show

v-show

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
</head>
<body>
<div id="app">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<input type="button" value="切换显示状态" @click="changeIsShow">
    <input type="button" value="累加年龄" @click="addPage">
    <img v-show="isShow" src="image/2.jpg">
<img v-show="age>18" src="image/1.jpg">
</div>
<script>
    var app=new Vue({
       el:"#app",
       data:{
       isShow:false,
           age:17
       },
        methods:{
           changeIsShow:function (){
             this.isShow= !this.isShow;
           },
           addPage:function (){
               this.age++;
           }
        },
    });
</script>
</body>
</html>

v-if

v-if

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if指令</title>
</head>
<body>
<div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <P v-if="isShow">我叫梁伟浩 - v-show修饰</P>
    <h2 v-if="temperature>=32">热死人啦</h2>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
   el:"#app",
    data:{
      isShow:false,
temperature:50
    },
    methods:{
       toggleIsShow:function (){
           this.isShow = !this.isShow;
       }
    }

});

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

v-bind

v-bind

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .active{
            border: 1px solid chartreuse;
        }
    </style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br> <!--换行-->
    <img :src="imgSrc" alt="" :title="imgTitle+'nb!!!'"
    :class="{active:isActive}" @click="toggleActive">
    <br>
    <img :src="imgSrc" alt="" :title="imgTitle+'nb!!!'"
         :class="isActive?'active':''" @click="toggleActive">
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
       el:"#app",
        data:{
            imgSrc:"http://www.itheima.com/images/logo.png",
            imgTitle:"黑马程序员",
            isActive:false
       },
        methods:{
           toggleActive:function (){
               this.isActive = !this.isActive;
           }
        }
    });
</script>
</body>
</html>

计数器

计数器
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
<!--html结构-->
<div id="app">
<!--计数器功能区域-->
    <div class="input-num">
        <button @click="sub">
            -
        </button>
  <span>{{num}}</span>
        <button @click="add">
            +
        </button>
    </div>


</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建vue实例
var app=new Vue({
   el:"#app",
    data:{
       num:1
    },
    methods:{
        add:function (){
            //console.log('add');
            if (this.num<10){
                this.num++;
            }else {
                alert("别点了，到头了哥哥！")
            }
        },
        sub:function (){
            //console.log('sub');
        if (this.num>0){
            this.num--;
        }else {
            alert("最小了，不能再小了！")
        }
        },
    }

});

</script>

</body>
</html>

图片切换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
</head>
<body>
<div id="mask">
    <div class="center">
        <h2 class="title">
            <img src="image/1.jpg" alt=""/>
        </h2>
<!--图片-->
        <img :src="imgArr[index]" alt=""/>
<!--左箭头-->
        <a href="javascript:void(0)" @click="prev" v-show="index!=0" class="left">
            <img src="image/4.jpg" alt=""/>
        </a>
<!--右箭头-->
        <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1" class="right">
            <img src="image/1.jpg" alt=""/>
        </a>
    </div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
       el:"#mask",
       data:{
         imgArr:[
             "image/1.jpg",
             "image/2.jpg",
             "image/4.jpg",
         ],
           index:0
       },
        methods:{
           prev:function (){
               this.index--;
           },
            next:function (){
               this.index++;
            }
        }
    });
</script>

</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for指令</title>
</head>
<body>
<div id="app">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
    <ul>
        <li  v-for="(item,index) in arr">
            {{index+1}}梁伟浩在：{{item}}
        </li>
    </ul>
    <h2 v-for="it in vegetables" v-bind:title="it.name">
        {{it.name}}
    </h2>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
       el:"#app",
        data:{
           arr:["北京","杭州","广州","上海"],
            vegetables:[
                {name:"西红柿炒蛋"},
                {name:"蛋炒韭菜"}
            ]
        },
        methods:{
           add:function (){
               this.vegetables.push({name:"花菜炒蛋"});
           },
            remove:function (){
               this.vegetables.shift();
            }
        }
    });
</script>
</body>
</html>

v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model:指令</title>
</head>
<body>
<div id="app">
    <input type="button" value="修改message" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>{{message}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
       el:"#app",
        data:{
           message:"我叫梁伟浩"
        },
        methods:{
           getM:function (){
            alert(this.message);
           },
            setM:function (){
               this.message="啦啦队";
            }
        },
    })
</script>
</body>
</html>

小黑记事本

在这里插入图片描述
请添加图片描述
请添加图片描述
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小黑记事本</title>
</head>
<body>
<!--主体区域-->
<section id="todoapp">
<!--输入框-->
    <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo"/>
    </header>
<!--列表区域-->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list">
                <div class="view">
                    <span class="idnex">{{index+1}}.</span>
                    <label>{{item}}</label>
                <button class="destroy" @click="remove(index)"></button>
                </div>
            </li>
        </ul>
    </section>
<!--统计和清空-->
    <footer class="footer">
        <span class="todo-count" v-if="list.length!=0">
        <strong>{{list.length}}</strong> items left
        </span>
        <button v-show="list.length!=0" class="clear-completed" @click="clear">
            Clear
        </button>
    </footer>
</section>
<!--底部-->
<footer class="info">
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
      el:"#todoapp",
        data:{
            list: ["写代码","吃饭饭","睡觉觉"],
            inputValue:"好好学习，天天向上"
        },
        methods:{
          add:function (){
              this.list.push(this.inputValue);
          },
            remove:function (index){
              console.log("删除");
              console.log(index);
              this.list.splice(index,1);
            },
            clear:function (){
              this.list=[];
            }
        }
    })
</script>
</body>
</html>

网络应用

在这里插入图片描述

axios

<!--axios官网提供的在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!--axios官网提供的在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    /*
    接口一：随机笑话
    请求地址：https://autumnfish.cn/api/joke/list
    请求方法：get
    请求参数：num（笑话条数，数字）
    响应内容：随机笑话
     */
    document.querySelector(".get").onclick=function (){
        axios.get("https://autumnfish.cn/api/joke/list?num=3")
        .then(function (response) {
            console.log(response);
        },function (err){
            console.log(err);
        })
    }

    /*
    接口二 ：用户注册
    请求地址：https://autumnfish.cn/api/user/reg
    请求方法：post
    请求参数：username（用户名，字符串）
    响应参数：注册成功或失败
      */
    document.querySelector(".post").onclick=function (){
        axios.post("https://autumnfish.cn/api/user/reg",
            {username:"梁伟浩"})
        .then(function (response) {
            console.log(response);
        },function (err){
            console.log(err);
        })
    }

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios+vue</title>
</head>
<body>
<div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
  <p>{{joke}}</p>
</div>

<!--axios官网提供的在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    /*
    接口：随机获取一条笑话
    请求地址：https://autumnfish.cn/api/joke
    请求方法：get
    请求参数：无
    响应内容：随机内容
     */
var app= new Vue({
    el:"#app",
    data:{
        joke:"大笑话"
    },
    methods:{
        getJoke:function (){
       //     console.log(this.joke);
            var that=this;
            axios.get("https://autumnfish.cn/api/joke")
            .then(function (response) {
                //console.log(response)
                 console.log(response.data);
                //console.log(this.joke);
            that.joke=response.data;
            },function (err){ })
        }
    },
})
</script>


</body>
</html>

天知道

在这里插入图片描述在这里插入图片描述

var app=new Vue({
    el:"#app",
    data:{
        city:'',
        weatherList:[]
    },
    methods:{
        searchWeather:function (){
            //console.log('天气查询');
            //console.log(this.city);
            var that=this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='
                +this.city)
                .then(function (response){
                    //console.log(response);
                    // console.log(response.data.data.forecast);
                    that.weatherList=response.data.data.forecast
                })
                .catch(function (err){})
        },
        changeCity:function (city){
            this.city=city;
            this.searchWeather();
        }
    },


});


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="wrap" id="app">
    <div class="logo"></div>
    <div class="form_group">
        <input type="text" v-model="city" @keyup.enter="searchWeather"

               class="input_txt" placeholder="请输入你要查询的天气"/>
        <button @click="searchWeather" class="input_sub">
            搜索
        </button>
    </div>
    <div class="hotkey">
        <a href="javascrpt:;" @click="changeCity('茂名')">茂名</a>
        <a href="javascrpt:;" @click="changeCity('东莞')">东莞</a>
        <a href="javascrpt:;" @click="changeCity('广州')">广州</a>
        <a href="javascrpt:;" @click="changeCity('深圳')">深圳</a>
    </div>
    <ul class="weather_list">
        <li v-for="item in weatherList">
            <div class="info_type">
                <span class="iconfont">{{item.type}}</span>
            </div>
            <div class="info_temp">
                <b>{{item.low}}</b>
                ~
                <b>{{item.high}}</b>
            </div>
            <div class="info_date">
                <span>{{item.date}}</span>
            </div>
        </li>
    </ul>
</div>
<!--axios官网提供的在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

在这里插入图片描述

总结：

写字符串的时候记得加上""或者’’，不然也会报错，找不到在这里插入图片描述

Java中的战斗机
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
黑马vue.txt
07-24
黑马最新前端讲解，采用前后端分离模式，包括nodejs安装。
vue笔记黑马
04-08
vue所有笔记--黑马
黑马电商后台管理系统前端vue后端nodejs.zip
12-02
黑马电商后台管理系统前端vue后端nodejs.zip
基于Vue的每日作业提交系统设计源码
03-29
这是一个基于Vue的每日作业提交系统设计，使用JavaScript、Vue和HTML语言开发，包含98个文件。主要文件类型包括39个JavaScript文件、25个Vue文件、11个SVG文件、6个SCSS文件、2个YAML文件、2个Markdown文档、2个JSON文件、2个PNG图片文件、1个editorconfig文件和1个development文件。该项目适合用于个人学习和实践Vue的开发技术。
Vue3入门笔记【黑马】
最新发布
m0_59778008的博客
04-08 1286
默认情况下在 script setup语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问。补充：setup语法糖只是帮你省略了一些代码，但是它的底层原理仍然是把定义的数据和方法导出后再使用。而 setup 为组合式API的入口，只有先写setup，才能往里面写组合式API的函数。在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用。后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。
医院就诊管理系统Vue前段代码
05-15
医院就诊管理系统Vue前段代码，Vue前端代码，如果只是想需要前端部分的可以可以下载查看
【vue基础】黑马vue视频笔记（十）
weixin_51233575的博客
07-25 265
vant案例学习
黑马vue2笔记
qq_63856981的博客
04-22 419
vue:一套用于构建用户界面的前端框架构建用户界面用vue往html页面添加数据框架框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库使用自定义组件时需要加v-指令前缀即：声明成 color ，使用时要写成 v-color在每个 Vue 组件中，可以在directives节点下声明私有自定义指令//定义名为 color 的指令，指向一个配置对象color: {
vue学习笔记（黑马程序员）--目录
qq_43327134的博客
08-21 860
目录 ES6模块化 Promise async/await EventLoop 宏任务和微任务 API接口案例 ES6模块化与异步编程高级用法--开始 部分规范： 每个Js文件都是一个独立的模块 导入其他模块成员使用import关键字 向外共享模块成员使用export关键字 要求： 1.node.js版本高于v14.15.1 C:\Users\My>node -v v12.16.3 这里版本低于v14.15.1,使用gnvm工具切换node版本 ①gnvm v..
Vue全家桶笔记04(黑马vue)--图书管理系统
weixin_43745804的博客
12-03 1426
1、数组方法 1、变异方法 变异方法会修改原有数据 push()：添加元素 pop()：删除元素 shift() unshift() splice() sort() reverse() <body> <div id="app"> <input type="text" v-model="pname" /> <li :key='index' v-for="(item,index) in lists">{{item}}</li> &lt
黑马2021-8Vue自学笔记hm
qq2981118661的博客
01-22 1152
黑马2021-8Vue自学笔记hm，代码和笔记不断更新,笔记详细到极致
Vue.js笔记(黑马程序员）
m0_61778421的博客
11-07 53
Vue2 vue内置指令 计算属性 watch，生命周期 vue cli 组件开发 prop sync修饰符，ref，自定义指令 插槽 VueRouter 声明式导航，路由重定向 编程式导航 vuex state，mutations actions，getters，moudle Vue3 create-vue，组合式API 生命周期API Pinia
Vue的项目总结及流程
02-21
Vue的项目总结及流程
vue基本内容总结学习
07-01
包含路由，组件传值，路由对象，路由守卫等
Vue中使用canvas方法总结
01-19
下面就是小编带给大家的Vue中怎么使用canvas方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。 1、如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面。v-html只能渲染出一个字符串, 没办法像...
Vue 核心技术总结
12-12
Vue 核心技术总结，适合初步想了解Vue语法的童鞋，其实语法是相通的。加油吧
b站黑马的Vue快速入门案例代码——计数器
weixin_72322475的博客
12-12 1659
b站黑马的Vue快速入门案例代码——计数器
Vue3-黑马（一）
dengfengling999的博客
05-09 1682
我们访问的使用的localhost，这个ip地址去访问的，这就意味着，只能自己去访问，在局域网中别人是不能访问你这个vue的应用的，这个怎么该呢。因为刚才的变量不是响应式的变量，在vue3里只要响应式的变量才能在页面达到响应式的更新，可以使用vue的函数把普通的变量包装成响应式的变量。vue3的技术选型，它提供了两套API，一个是选项式的API（vue2的东西）和组合式的API。项目默认监听的5173，还可以修改端口，想改项目的配置文件：vite config.ts。我们用组合式的API，因为它更简单。
VUE学习笔记（黑马2023版 第一天~第三天）
m0_70675152的博客
11-02 4440
VUE学习笔记（黑马2023版）第一天1.Vue是什么？2.创建一个Vue实例2.1.准备容器（Vue所管理的范围）2.2.引包（开发版本包/生产版本包）2.3.创建实例2.4.指定配置项 el data3.插值表达式3.1.作用：3.2.语法：3.3.注意点3.4.实践案例4.Vue响应式特性4.1.什么是响应式？4.2.访问和修改数据5.Vue开发者工具安装：装插件调试Vue应用5.1浏览器为谷歌的安装方法通过谷歌应用商店安装（需要魔法）通过极简插件安装5.2浏览器为Edge的安装方法6.Vue指令6.
vue黑马头条项目难点
11-11
1. 数据流管理：在Vue黑马头条项目中，需要管理大量的数据，包括用户信息、新闻内容、评论等。如何有效地处理并管理这些数据，确保数据的正确性和一致性是一个难点。可以使用Vuex来进行全局的数据管理，并通过状态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java中的战斗机

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值