后端小菜鸟对Vue的简单入门---了解

最新推荐文章于 2023-12-28 22:54:42 发布
最新推荐文章于 2023-12-28 22:54:42 发布
阅读量488 收藏 3
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45537947/article/details/108475423
版权

文章目录


学习目的：

会创建Vue实例，知道Vue的常见属性
会使用Vue的生命周期的钩子函数
能够使用vue常见指令
能使用vue计算属性和watch监控
能够编写vue组件
能够使用axios发送异步请求获取数据

一、Vue的概述

中文文档：https://cn.vuejs.org/v2/guide/syntax.html

MVVM通过视图与模型的双向绑定，简化前端操作。
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、搭建示例工程

目标：使用IDEA创建示例工程并在工程通过npm安装下载vue.js
分析：

vue是一个前端框架，也是其实是一个js文件；下载vue.js文件并在页面中引入该js文件。

vue.js的下载方式：

可以引用在线的vue.js
可以离线下载vue.js
npm包资源管理器，可以下载vue.js

下载安装：
下载地址：https://github.com/vuejs/vue
可以下载2.6.10版本https://github.com/vuejs/vue/archive/v2.6.10.zip或资料文件夹也已下载
下载解压，在dist可得到vue.js文件

使用CDN：
或者也可以直接使用公共的CDN(内容分发网络)服务：

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

或者：

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

三、演示双向绑定与事件处理

目标： 创建ideax.html页面并初始化Vue实例，通过console修改Vue数据实现双向绑定效果和创建按钮实现点击即自增

分析：

1、创建页面，初始化Vue
2、{{}}获取显示数据
3、v-mmodel实现双向绑定
4、v-on演示事件处理

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h2>{{name}}非常可爱！！！</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
            data:{
            name:"小宝贝"
        }
    });
</script>
</body>
</html>

观看网页：
在这里插入图片描述
然后使用F12进入开发者模式：
在这里插入图片描述
而若要进行v-mmodel实现双向绑定，则需要添加下列语句：

在这里插入图片描述
效果：
在这里插入图片描述

四、Vue实例生命周期及钩子函数

目标：了解Vue实例生命周期，生命周期的钩子函数及created函数常用场景
分析：

在创建Vue实例的时候可以指定模板id、数据和方法；而如果要在实例化、模板渲染的过程中需要执行一些1其它操作的话；那么可以使用钩子函数。

lifecycle.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试</title>
    <script src="vue.js"></script>
</head>
<boby>
<div id="app">
    {{msg}}
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            msg:""
        },
        //钩子函数
        created() {
            //this表示vue实例
            this.msg = "hello vue. created";
            console.log(this);
        }
    });
</script>
</boby>
</html>

在这里插入图片描述

小结：

钩子函数会在vue实例的各个生命周期阶段自动调用；具体有：beforeCreate,
created、beforeMount、mounted、updated、beforeUpdate、destroyed、beforeDestroy
created钩子函数常用场景：用于初始化数据
钩子函数不要使用箭头函数的方式编写。

5、插值、v-text和v-html
目标：插值使用场景和要求；v-text和v-html的作用
小结：
插值可以使用在需要显示vue实例数据的地方，可以在插值表达式中调用实例的数据属性和函数。
v-text和v-html的作用：可以将数据在模板进行显示；区别：v-html会对内容中出现的html标签进行渲染，而
-text会将内容当做普通文本输出到元素里面。

五、插值、v-text和v-html

目标：插值使用场景和要求；v-text和v-html的作用

text-html.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试</title>
    <script src="vue.js"></script>
</head>
<boby>
    <div id="app">
        v-text:<span v-text="msg"></span></br>
        v-text:<span v-html="msg"></span></br>
    </div>
    <script type="text/javascript">
       var app = new Vue({
           el:"#app",
           data:{
               msg:"<h2>hello, vue</h2>"
           }
       });
    </script>
</boby>
</html>

在这里插入图片描述

小结：

插值可以使用在需要显示vue实例数据的地方，可以在插值表达式中调用实例的数据属性和函数。
v-text和v-html的作用：可以将数据在模板进行显示；区别：v-html会对内容中出现的html标签进行渲染，而
-text会将内容当做普通文本输出到元素里面。

六、指令v-model使用

目标：使用v-model指令1实现复选框的双向绑定

model.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试</title>
    <script src="vue.js"></script>
</head>
<boby>
    <div id="app">
        <input type="checkbox" value="Java" v-model="language">Java<br>
        <input type="checkbox" value="Python" v-model="language">Python<br>
        <input type="checkbox" value="Swift" v-model="language">Swift<br>
        <h2>
            你选择了：{{language.join(", ")}}
        </h2>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                language:[]
            }
        });
    </script>
</boby>
</html>

在这里插入图片描述
小结：

多个checkbok对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型,redio对应的值是input的value值
input和textarea默认对应的model是字符串
select单选对应字符串，多选对应也是数组

七、指令v-on使用

目标：了解v-on指令的语法实现按钮点击后的递增和递减
分析：

在没有使用vue之前；页面标签可以通过设置onXXX响应事件；在vue中可以通过v-on指令响应事件。

on.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试</title>
    <script src="vue.js"></script>
</head>
<boby>
    <div id="app">
        <button v-on:click="num++">增加</button>
        <button @click="decrement">减少</button>
        <h2>
            num = {{num}}
        </h2>
        <hr>
        事件冒泡测试：<br>
        <div style="background-color: aliceblue; width:100px;height:100px" @click="print('div被点击了')">
            <button @click.stop="print('点击了buttonn')">点我试试</button>
        </div>
        <br>阻止默认事件：<br>
        <a href="http://www.itcast.cn" @click="print('点击了超链接')">传智播客</a>			<!--@click.prevent-->
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods: {
                //递减
                decrement() {
                    this.num--;
                },
                //打印
                print(str) {
                    console.log(str);
                }
            }
        });
    </script>
</boby>
</html>

在这里插入图片描述
小结：

事件修饰符： 语法v-no：xxxx.修饰符，常用的修饰符有：
.stop:阻止事件冒泡
.prevent:阻止默认事件发生
.capture:使用事件捕获模式
.self:只有元素自身触发事件才执行(冒泡或捕获的都不执行)
.once:只执行一次

八、指令v-for使用

目标：了解v-for指令语法实现对数组、对象的遍历
分析：
实现：

可以在vue实例化的时候指定要遍历的数据，然后通过v-for指令在模板中遍历显示数据。一般情况下，
要遍历的数据可以通过钩子函数created发送异步请求获取数据。

可以通过v-for遍历数组、对象：
for.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试</title>
    <script src="vue.js"></script>
</head>
<boby>
    <div id="app">
        <ul>
            <li v-for="(user, index) in users" :key="index">
                {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(value, key, index) in person">
                {{index}}--{{key}}--{{value}}
            </li>
        </ul>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                users:[
                    {"name":"猪头","age":20,"gender":"男"},
                    {"name":"小宝贝","age":20,"gender":"女"},
                    {"name":"小菜鸟","age":20,"gender":"男"}
                ],
                person:{"name":"B站","age":"2","gender":"无","address":"中国"}
            }
        });
    </script>
</boby>
</html>

在这里插入图片描述

小结：

如果遍历的时候需要使用到索引号，可以在循环遍历的位置，添加一个参数；该索引号是从0开始的。

九、指令v-if和v-show使用

目标：说出v-if与v-show的区别；通过一个按钮的点击，实现遍历数组结果的显示存在与否并在遍历过程中使用v-if对数据进行判断处理；实现文本内容的隐藏
分析：

v-if： 通过一个按钮的点击，实现遍历数组结果的显示存在与否并在遍历过程中使用v-if对数据进行
判断处理
v-show： 实现文本内容的隐藏

if-show.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试</title>
    <script src="vue.js"></script>
</head>
<boby>
    <div id="app">
        <button @click="show=!show">点我</button>
        <h2 v-if="show">
            Hello Vue.js
        </h2>
        <hr>
        <ul>
            <li v-for="(user, index) in users" v-if="user.gender=='女'" :key="index" style="background-color:deeppink">
                {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
            </li>
            <li v-else style="background-color: blue">
                {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
            </li>
        </ul>
    </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                show:true,
                users:[
                    {"name":"猪头","age":20,"gender":"男"},
                    {"name":"小宝贝","age":20,"gender":"女"},
                    {"name":"小菜鸟","age":20,"gender":"男"}
                ],
                person:{"name":"B站","age":"2","gender":"无","address":"中国"}
            }
        });
    </script>
</boby>
</html>

在这里插入图片描述

在上面的</ul>后面加：

<hr>
<h2 v-show="show">
     你好，小菜鸟！！！
 </h2>

看效果：

在这里插入图片描述

小结：

v-if在条件不满足的时候元素不会存在；v-show条件不满足的时候只是对元素进行隐藏。

十、指令v-bind使用

目标：了解v-bind语法和作用；实用点击不同按钮切换不同的属性值；使用class属性中的特殊用法实现一个按钮切换背景色。
分析：

<img src="" height=""/>其中src和height的值如果不想写死，而是想获取vue实例中的数据属性值的话；
那可以通过使用v-binf实现：
<img v-bind:src="vue实例中数据属性名" :height="vue实例中的数据属性名"/>

小结：
可以使用v-bind：
bind.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuejs测试</title>
    <script src="vue.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <div :class="color">
        点击按钮改变背景颜色
    </div>
    <hr>
    <br>
    <button @click="bool=!bool">点我改变下面色块的颜色</button>
    <div :class="{red:bool, blue:!bool}">
        点击按钮改变背景颜色
    </div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            color:"red",
            bool:true
        }
    });
</script>
</body>
</html>

在这里插入图片描述

v-bind的作用：

可以对所有元素的属性设置vue实例的数据。

十一、计算属性的使用

目标：计算属性的应用场景，实现将一个日期时间值转换为yyyy-MM-dd格式字符串
分析：

一个日期的毫秒值要显示为格式化(yyyy-MM-dd)的日期字符串的话；可以使用computed计算属性里面的方法

computed.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
   <h2>
       你的生日是：
       {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
   </h2>
    <hr>
    <h2>
        你的生日是：
        {{birth}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            birthday:1429032123201
        },
        computed:{
            birth() {
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述

小结：
计算属性的应用：

computed计算属性的应用场景：可以应用在插值或指令表示式复制的时候。可以将一些属性数据经过方法处理之后返回。

十二、watch基本和深度监控

目标：watch的使用场景；并使用其监听简单属性值及其对象中属性的变化
分析：

在vue实例中数据属性，因为在页面中修改而产生了变化；可以通过watch监控获取其改变前后的值。
如果是修改的对象数据属性，可以开启深度监控获取修改后最新的对象数据。如：person.name

小结：

可以如下使用watch进行数据属性的监控

watch.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
   <input type="text" v-model="message">
    <hr><br>
    <input type="text" v-model="person.name"><br>
    <input type="text" v-model="person.age"><button @click="person.age++">+</button>
    <h2>
        姓名为：{{person.name}};年龄为：{{person.age}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"小菜鸟",
            person:{"name":"cute","age":20}
        },
        watch:{
            message(newValue, oldValue) {
                console.log("新增："+ newValue + ",旧值：" + oldValue);
            },
            person: {
                //开启深度监控；监控对象中的属性值变化
                deep:true,
                //可以获取到最新的对象属性数据
                handler(obj) {
                    console.log("name = " + obj.name + "; age=" + obj.age);
                }
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述

watch使用场景：可以监控视图中数据的变化而做出响应；如：下拉旷列表中，当如果选择了对于
的下拉框选项之后，要根据最新的值去加载一些其它数据的话。

十三、组件使用

目标：了解组件的使用场景；定义点击则计数的组件并使用全局注册和局部注册方式。
分析：

可以将通用或者公用的页面模块抽取成vue组件，在vue实例中引用。

小结：
在页面中可以如下实验组件：

component.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--    使用组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>
<script type="text/javascript">

    //定义组件
    const counter = {
        template:"<button @click='num++'>你点击了{{num}}次</button>",
        data(){
            return {num:0}
        }
    };

    //全局注册组件：在所有的vue实例中都可以使用组件
    //参数1：组件名称，参数2:具体的组件
    Vue.component("counter", counter);


    var app = new Vue({
        el:"#app",
    });
</script>
</body>
</html>

在这里插入图片描述

组件使用场景：

在项目1需要重用某个模块(头部、尾部、新闻等等)的时候，可以将模块抽取成组件，其它页面中注册组件引用。

全局注册：在任何vue实例中都可以引用，如：一般网站的头部导航菜单
局部注册：可以在需要的页面引用组件，如：商城网站首页页面中各种活动模块

十四、父组件向子组件通信

目标：父组件与子组件通信的意义；实现父组件将简单字符串和对象更新到子组件
小结：
组件通信意义：

父子组件之间数据的交换，能够及时更新组件内容。

父组件将简单字符串传递到子组件：
conponent2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--    使用组件-->
    <introduce :title="msg"></introduce>
</div>
<script type="text/javascript">

    //定义组件
    const introduce = {
        template:"<h2>{{title}}</h2>",
        //定义接收父组件的属性
        props:["title"]
    };

    //全局注册组件：在所有的vue实例中都可以使用组件
    //参数1：组件名称，参数2:具体的组件
    Vue.component("introduce", introduce);


    var app = new Vue({
        el:"#app",
        data:{
            msg:"父组件的msg属性数据内容"
        }
    });
</script>
</body>
</html>

父组件将数组更新传递到子组件：

component3.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--    使用组件-->
    <my-list :items="lessons"></my-list>
</div>
<script type="text/javascript">

    //定义组件
    const myList = {
        template:
            <ul>
            <li v-for="item in items" :key="item.id">{{item.id}}--{{item.name}}</li>
        </ul>,
    //定义接收组件的属性
    props:{
        items:{
            //数据类型，如果数组则是Array，如果是对象则是Object
            type:Array,
            //默认值
            default:[]
        }
    }
};

    var app = new Vue({
        el:"#app",
        data:{
            msg:"父组件的msg属性数据内容",
            lessoms:[
                {"id":1, "name":"Java"},
                {"id":2, "name":"Python"},
                {"id":3, "name":"后端"}
            ]
        },
        components:{
            myList
        }
    });
</script>
</body>
</html>

十五、子组件向父组件通信

目标：在子组件点击对应按钮实现父组件中属性数据的改变
小结：
component4.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--    使用组件-->
    <my-list :items="lessons"></my-list>
</div>
<script type="text/javascript">

    //定义组件
    const counter = {
        template:
            <div>
            <button @click='incrNum'>+</button>
            <button @click='decrNum'>-</button>
        </div>
    ,
        props:["snum"],
        methods:{
        //递增
        incrNum() {
            //调用到父组件的方法
            return this.$emit("plus");
        },
        decrNum() {
            //调用到父类中的方法
            return this.$emit("reduce");
        }
    }
};
    //全局注册组件；在所有的vue实例中都可以使用组件
    //参数1：组件名称，参数2：具体的组件
    //vue.component("counter",counter);
    var app = new Vue({
        el:"#app",
        components:{
            counter:counter
        },
        data: {
            num:0
        },
        methods:{
            numplus() {
                this.num++;
            },
            numReduce() {
                this.num--;
            }
        }
    });
</script>
</body>
</html>

十六、axios概述

目标：axios的用途及了解常见方法
小结：

axios的作用：发送异步请求获取数据。常见的方法：get、post；在发送的时候可以指定参数(地址、请求方式和请求头部信息)；返回数据结构(data/status/statusText/headers/config)

具体操作可看菜鸟教程。

跨域：

在前端js中如果发送异步请求的话，请求的地址与当前服务器的ip或者1端口号不同都是跨域请求，
可以使用如下方式再服务器端进行配置：
@CrossOrigin(origins = “*”)

一个爱运动的程序员
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-admin-template与SpringBoot前后端接口请求数据示例代码.rar
09-08
总的来说，这个示例代码集是学习Vue.js前端开发和SpringBoot后端服务结合的理想材料，可以帮助开发者深入理解前后端分离架构的实现方式，提升开发效率。同时，理解并掌握相关工具和框架的使用，对提高个人技能和团队...
vue-beautiful-chat：一个简单而美丽的Vue聊天组件，与后端无关，可完全自定义和扩展
02-05
唯美聊天 vue-beautiful-chat提供了一个类似于内部通信的聊天...后端不可知 自由 目录 安装 $ yarn add vue-beautiful-chat 例 import Chat from 'vue-beautiful-chat' Vue . use ( Chat ) < beautiful-chat
菜鸟学习vue3笔记-vue3 router回顾
最新发布
qq_30519365的博客
12-28 549
【代码】菜鸟学习vue3笔记-vue3 router回顾。
Vue3 菜鸟入门（一）超详细：介绍、安装、打包、创建项目、目录结构、起步等
小for学习栏
09-19 2002
本文主要内容含Vue3介绍、安装、打包、创建项目、目录结构、起步等内容，Vue 、Vue 3、Java、Spring Boot、Idea、数据库、一对一、培训、教学。
Vue 基础入门
热门推荐
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue快速入门
weixin_42732665的博客
01-31 1309
Vue快速入门
vue基础入门
weixin_58470558的博客
05-13 6390
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
vue-kotlin-starter:提供一个简单的 Kotlin Spring Boot 后端和一个 Vue 前端
05-29
vue-kotlin-starter 你会发现两个 IDEA 项目，前端和后端。 请分别导入。 前端使用 nodejs 作为应用程序框架。 要准备并启动节点服务器，请转到您的终端并运行： npm install然后是npm run serve 。 或者，使用您的 ...
外卖点餐系统，后端：springboot+mybatis+mybatis-plus 前端：vue+elmen
05-08
后端使用Spring Boot和MyBatis作为开发框架，而前端使用Vue和ElementUI作为开发工具。 后端开发框架 后端使用Spring Boot作为开发框架，Spring Boot是一个轻量级的框架，易于学习和使用，可以快速搭建项目。它提供...
vue使用js-audio-recorder实现一句话识别功能
07-14
vue使用js-audio-recorder实现一句话识别功能：以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！...
Vue学习-Vue入门
weixin_59357453的博客
04-02 4276
这是一篇vue学习记录
vue2 基础入门
ClearloveYt的博客
07-03 2765
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
【Vue3】表单数据的双向绑定：v-model
早睡早起长头发的博客
08-04 3986
一、单行文本框的绑定 二、多行文本区的绑定 三、复选框的绑定 四、单选按钮的绑定 五、下拉列表框的绑定 六、常用的两个修饰符
【Vue】快速入门
你不来，再美的天地，都狼藉 ~
03-24 1703
一文带你从HelloWorld认识Vue框架，深刻理解！
vue双向绑定checked属性&&JavaScript原生实现全选反选功能
qq_45701130的博客
07-05 2510
功能要求： 1、点击全选，其他相关的复选框都会被选中 2、取消全选，相关复选框都变成不选中 3、所有相关复选框都被选中后，全选框被选中 4、只要有一个相关复选框没有被选中，全选框就不被选中一、vue双向绑定checked属性实现 二、JavaScript实现全选和反选.........
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
vue双向数据绑定的实现
weixin_52223050的博客
11-05 2686
vue数据双向绑定原理
Vue——数据的双向绑定(v-model)，循环渲染(v-for)
qq_52499745的博客
09-29 4231
Vue——数据的双向绑定(v-model)，循环渲染(v-for)
vue后端接收数据导出application/octet-stream
09-27
在Vue中，后端接收并导出application/octet-stream格式的数据可以通过以下步骤实现： 1. 在Vue组件中，使用axios或其他HTTP库发送请求到后端接口，并设置请求头的Content-Type为application/octet-stream。 2. 后端...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值