vue第三天学习笔记6-27

最新推荐文章于 2024-07-12 15:14:43 发布
最新推荐文章于 2024-07-12 15:14:43 发布
阅读量52 收藏
点赞数
分类专栏： vue 文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_70820910/article/details/131425509
版权

v-model

进行双数据绑定,常应用于以下几个场景

form表单的提交

单选框radio

复选框checkbox

下拉框select

form表单的提交

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

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

<body>
    <div id="app">
        <form action="" method="" value="" target="">
            <!-- <input type="text" v-model="userName"> -->
            <input type="text" @click="submit" v-model="userName"> //点击输入框打印数据
        </form>
        <button @click="handleSubmit">提交</button> //点击按钮打印数据
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                userName: '张三',
            },
            methods: {
                handleSubmit() {
                    console.log(this.userName);
                },
                submit(){
                    console.log(this.userName);
                }
            }
        })
    </script>
</body>

</html>

注意:因为form表单本身就有默认的提交行为,所以button按钮事件不会被触发,所以需要把button写在form标签外部

也可以给form标签添加属性 οnsubmit="return false" 可以把button按钮写在form内部

单选框 radio

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

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

<body>
    <div id="app">
        <span>学生</span><br>
        男: <input type="radio" id="male" value="1" v-model="gender">
        女: <input type="radio" id="female" value="2" v-model="gender">

        <button @click="handleRadio()">快点我</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                gender: '2',
            },
            methods: {
                handleRadio() {
                    console.log(this.gender);
                }
            }
        })
    </script>
</body>

</html>

当点击btn按钮时,单选框点击选中谁就可以打印出谁的value值,使用v-model将两条数据绑定,给到gender默认值显示默认点击的效果

复选框checkbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
          <span>我的爱好</span><br>
          唱歌: <input type="checkbox" id="sing" value="0" v-model="hobby">
          跳舞: <input type="checkbox" id="dance" value="1" v-model="hobby">
          篮球: <input type="checkbox" id="basketball" value="2" v-model="hobby">
          读书: <input type="checkbox" id="read" value="3" v-model="hobby"><br>

          <button @click="handleCheckbox">我是复选框,点我吧</button>
    </div>

    <script>
        let vm=new Vue({
            el:'#app',
            data:{
               hobby:['2','3']
            },
            methods:{
                handleCheckbox(){
                    console.log(this.hobby.toString());
                }
            }
        })
    </script>
</body>
</html>

注意:使用v-model绑定数据 使用btn按钮触发事件打印下标值 ,记得一定要把打印出来的值处理一下转成字符串

select下拉菜单

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

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

<body>
    <div id="app">
        <span>职业</span>
        <select name="" id="" v-model="job">
            <option value="0">请选择职业</option>
            <option value="1">学生</option>
            <option value="2">程序员</option>
            <option value="3">前端开发</option>
        </select>
    </div>
    <script>
        let vm = new Vue({
             el:'#app',
             data:{
                job:'0'
             },
        })
    </script>
</body>

</html>

注意: 使用v-model绑定数据后给到默认值 0 ,使下拉框默认显示第一条数据

同时v-model绑定一定要写在select标签内

如果给select加上了 multiple属性 可以同时默认选中多条数据

使用shift键可以实现选中多条数据

v-model修饰符

v-model有三个修饰符分别是 .number .trim .lazy

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

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

<body>
    <div id="app">
        <!-- .number  失焦后可以将输入框里的数据只保留数字 -->
        <input type="text" v-model.number="msg"><br>
        <!-- .trim  失焦后去除两边的空格 数据中间的去不掉需要手动去除 -->
        <input type="text" v-model.trim="name"><br>
        <!-- .lazy 使input和span的实时响应失效,失焦后或者按下enter后才会加载数据 -->
        <input type="text" v-model.lazy="message"><br>

        <span>{{message}}</span>

    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '',
                name: '',
                message: ''
            }
        })
    </script>
</body>

</html>

注意:

.number在使用时 如果输入框中的数据是以数字开头然后跟着非数字再加数字,只会保留最开始的数字

如果输入框中的数据以非数字开头后面带有数字,则会保留数据不会处理

自定义指令

除了默认指令以外,vue允许自己注册自己的指令,给某一个方法前面带上 v- 即可使用

如果想对dom元素进行底层的操作,就需要自定义指令 通过vue指令操作进行封装

使用场景

代码复用和抽象的主要形式是组件

当需要对普通dom元素进行底层操作,就会用到自定义指令

对于大幅度的dom的变动,还是应该使用组件

全局指令

创建在全局

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

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

<body>
    <div id="app">
        <input type="text" v-focus>
        <input type="text" v-focus>
    </div>
    <script>
        //使用directive自定义指令,第一个参数是指令名称,第二个参数是一个对象
        Vue.directive('focus', {
            inserted: function (el) { //元素
                el.focus()
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

//当打开浏览器,第二个input框会自动触发聚焦事件
//带参数的自定义指令
    
<!DOCTYPE html>
<html lang="en">

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

<body>
    <div id="app">

        <p v-a="msg"></p>

    </div>
    <script>
        Vue.directive('a',{
            bind:function(el,binding){
                  console.log(el); //此时指的是获取到的p标签
                  console.log(binding);
                  console.log(binding.value.b);
                  el.innerHTML=binding.value.b
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msg: {
                    b:'消息',
                }
            }
        })
    </script>
</body>

</html>

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

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

<body>
    <div id="app">

        <p v-a="msg"></p>

    </div>
    <script>
        Vue.directive('a',{
            bind:function(el,binding){
                  console.log(el);
                  console.log(binding);
                  console.log(binding.value.b);
                  el.innerHTML=binding.value.b
                  el.style.color=binding.value.color
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msg: {
                    b:'消息',
                    color:'red'
                }
            }
        })
    </script>
</body>

</html>

局部指令

概念和使用场景都与全局指令一致

不同的是局部指令是一个对象,并且此时的directives是Vue实例化对象的一个属性名

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

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

<body>
    <div id="app">

        <div v-a="msg"></div>
        <input type="text" name="" id="" v-focus-input>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
               msg:'测试内容'
            },
            methods: {

            },
            directives: {
                a: {
                    bind: function (el, binding) {
                        el.innerHTML = binding.value
                    }
                },
                focusInput: {
                    inserted: function (el) {
                        el.focus()
                    }
                }
            }
        })
    </script>
</body>

</html>

局部指令的用法和全局指令一样,只不过要注意directives写的位置,是在局部,所以写在Vue的花括号里

并且每个局部指令都是一个对象

同时需要注意一点,在script标签中自定义的指令名可以使用驼峰命名法来写

但是在标签中引入的局部指令名不能使用驼峰命名法,正常使用 - 符号

计算属性

什么是计算属性:

在结构中绑定一些数据或者表达式的时候,如果数据过多或者表达式太长,以及逻辑更加复杂的时候,就会导致代码变得臃肿,难以阅读

计算属性就是把各部分的代码放在一个统一的位置方便管理

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

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

<body>
    <div id="app">
        <!-- 使用计算属性,其实就是直接使用函数方法 -->
        <!-- 把相关的处理代码写在一个方法里,直接调用 -->

        <div>{{reverserString1()}}</div>  //必须加()
        <div>{{reverserString1()}}</div>
        <div>{{reverserString1()}}</div>
        <div>{{reverserString2}}</div>    //不加()
        <div>{{reverserString2}}</div>
        <div>{{reverserString2}}</div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg:'测试文字'
            },
            methods: {
                 reverserString1:function(){
                    console.log('methods');
                    return this.msg.split('').reverse().join('')
                 }
            },
            computed: {
                reverserString2:function(){
                    console.log('computed');
                    return this.msg.split('').reverse().join('')
                }
            }
        })
    </script>

</body>

</html>

面试题---计算属性computed和方法methods之间的区别：

1.methods方法需要调用加小括号, 计算属性computed直接写方法名,不需要加小括号

2.可以从图中看到,methods调用了三次,意味着代码执行了三次,如果数据足够多,会导致性能出现问题

而同样的内容computed只调用了一次,其实是代码执行一次,剩下的是缓存的复制,比较节约性能

3.从使用的场景上来区分,当数据量更新比较频繁,更适合使用methods,获取最新的数据

而当数据更新不频繁时,可以使用computed缓存的方式读取,这样更加节省性能

无双幽梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
VUE3-router4学习笔记-一篇就够！
ty21000的博客
12-05 1948
Router4.x
Vue学习笔记6 - 学习vue-admin-template(1)
Coder.Monkey的工作簿
11-20 1743
vue-admin-template是在码云平台（gitee.com）上，搜索vue admin关键字，出来的结果中，相对说明算是比较多的开源代码，既有Demo的演示网站（https://panjiachen.gitee.io/vue-admin-template），也有系列教程帖子，不过作为一个仅在vue官网（https://cn.vuejs.org/）粗看了一遍教程的Vue小白，在下载了源码之后，即便是对照着admin的手把手系列教程，还是看的一头雾水，里面有太多的基础概念缺失，最终在慕课网，学习了vu
前端学习笔记202303学习笔记第三天-Vue3.0-安装html-webpack-plugin
qq_41632427的博客
04-04 304
前端
Vue3--Vue Router详解--学习笔记
善假于物
11-19 458
Vue-Router的使用，学习笔记。欢迎大家观看指正...
学习历程--Vue3仿美团项目笔记 第二天
m0_65841675的博客
01-10 2508
学习历程--Vue3仿美团项目笔记 第二天.......努力中
Vue学习笔记3--全局事件总线
jxncxgx的专栏
01-11 712
Vue学习笔记3--全局事件总线。
最新版本Vue3的学习笔记-第四章
apple_51927114的博客
12-26 1106
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有。通过点击导航，视觉效果上“消失” 了的路由组件，默认是被。作用：让路由组件更方便的收到参数（可以将路由参数作为。优点：兼容性更好，因为不需要服务器端处理路径。作用：控制路由跳转时操作浏览器历史记录的模式。作用：可以简化路由跳转及传参（后面就讲）。作用：将特定的路径，重新定向到已有路由。浏览器的历史记录有两种写入方式：分别为。参数时，需要提前在规则中占位。文件夹，一般组件通常存放在。掉的，需要的时候再去。的对象写法，必须使用。
最新版本Vue3的学习笔记-第三章(上部)
apple_51927114的博客
12-25 1103
修改名字
【RuoYi-Vue-Plus】学习笔记 35 - OSS 模块（六）V4.2.0+ 版本三种方式配置使用
MichelleChung的星球
08-23 5397
本文主要介绍 V4.2.0+ 版本 OSS 模块三种方式配置使用。
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Axios则是一个常用的第三方库，用于在Vue中发起HTTP请求，与后端服务器进行数据交互。Vuex是Vue的状态管理库，用于集中管理组件间的共享状态，解决复杂应用中的数据同步问题。 Vue实战项目通常会结合Element UI这样...
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于ssm的云的学习笔记系统-ssm-java代码
04-16
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1185
vue切换主题
vue解决页面放大图片模糊的问题
最新发布
m0_56104994的博客
07-12 184
解决页面放大，图片模糊的问题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1347
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 740
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
Vue的常见指令
m0_63624484的博客
07-09 565
它的作用就是我们可以动态的定义属性的值，比如常见的<img src = "1.jpg">我们如果想要修改图片就需要获取到DOM对象，然后再重新填充，但是如果使用v-bind，v-show作用和v-if一样，只是当它为true或者false都会生成DOM对象；style表示样式，同样我们也可以用vue绑定style，实现样式属性的动态生成。接下来，我们实现经常在网页上看见的多选项选择时，选到哪个，哪个就会高亮显示。所以说，vue主要是实现对数据的操作，而js是对DOM对象的操作。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 758
模糊搜索功能 每个网站都要用得到
前端Bootstrap+Es6+vue学习笔记
06-10
第三，介绍了Bootstrap内置的插件。通过添加class和实现JavaScript的初始化，可以实现一些常用的插件功能，如弹窗和下拉菜单等。另外，Bootstrap还对HTML5和CSS3提供了支持，提供了一些元素和属性的默认样式和效果，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

无双幽梦

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

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

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

打赏作者

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

抵扣说明：

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

余额充值