IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue第三天 -> 正文阅读

[JavaScript知识库]Vue第三天

Vue数据绑定
前面聊过了vue实例中的data和_data相等,但是展开vue实例中的_data发现他不仅仅是一个对象的赋值操作,中间还进行了其他操作。

至于做了什么操作,最简单的是创建了一个observe类的实例,observe类用于监听数据的变化,通过给属性配置访问器属性,为什么要通过定义一个类实现呢?

let a={
            he:'何',
        }
        Object.defineProperty(a,'he',{
            get(){
                return a.he;
            },
            set(val){
                a.he=val;
            }
        })

在这里插入图片描述
如果我们给一个对象设置访问器属性,我们自然不能像以前那样设置一个常量或者来自其他变量的数据,我们要操作的对象是自身,但是一旦操作了自身就会触发访问器属性,从而导致不断的调用,最终超出了范围

所以要采用一个类的形式,在类中把对自身的操作和自身数据分离来开

var a={
            he:'何',
        }
        var ob=new Obeserve(a);
        var a=ob;
        function Obeserve(obj){
            let k=Object.keys(obj);
            k.forEach((p)=>{
                Object.defineProperty(this,p,{
                    get(){
                        return obj[p];
                    },
                    set(val){
                        obj[p]=val;
                    }
                })
            });
            
        }

在这里插入图片描述

实际上还是要在内部进行一次数据代理才能完成数据的监听,vue中还对对象嵌套对象,数组嵌套数组或者对象的形式做了递归的调用,比这里写的要复杂得多

set方法

如果在已经经过vue初始化的对象中还想在添加数据,这样的数据不再是响应式的,如果想要变成响应式,
1.Vue.set()
2.vm.$set()
在这里插入图片描述

添加对象在哪里找寻?
VM实例,vm.data,vm_data上的数据对象
在这里插入图片描述
给数组添加属性
前面我们是无法给对象添加一个新的属性从而达到响应式,这里我们给数组项进行增删改查都无法做到响应式,但是可以通过以下的七个方法从而让数组项达到响应式的结果
在这里插入图片描述
这几个方法在原生的js中是存在,但是在vue中他对着个几个方法进行了加工,在对数据进行操作的同时加上了响应式的操作

如果过我们不采用这几种方式给数组添加数据,可以通过Vue.set方法($set)同样也能让数组得到响应式的数据

表单数据

表单元素有不同种类,不同种类的表单元素在进行vue绑定的时候也都不太一样
在这里插入图片描述
第一种是有value值输入的这种,这样的直接绑定一个字符串类型的数据就行了

在这里插入图片描述
第二种是单选框,单选框没有value的值,所以我们要自己定义value的值,然后再通过双向数据绑定来传递值

在这里插入图片描述
第三种是多选框,多选框的选择一个内容绑定的checked的值,如果我们在vue的data中选择的是一个字符串数据,那么你只要选择一个CheckBox,那么所有的选项都会被选上,所以我们一般给checkbox绑定的值设置为一个数组,每一次添加进来的值都是他的value值(也要设置vale值,如果不指定还是是boolen值,这和字符串的效果是一样的)

后面的几种和上面的三种差不多,无非就是有value和没有value值的绑定

过滤器

过滤器相当于是一个通用的函数,他可以被用到插值语法和v-bind的数据简单处理
在这里插入图片描述
可以指定多个filter函数,前一个过滤器函数的值会传递到下一个函数中去。
过滤器函数在局部内定义的话就只能在当前实例上使用,如果想在其他实例上使用,可以通过
在这里插入图片描述
定义一个全局的过滤器

v-text指令
v-text放置在标签的属性栏中,它会向其所在节点中渲染文本的内容,同时是以字符串的的形式渲染,原本存在于文本的内容也会被覆盖

v-html
它和v-text没有什么太大的区别主要的区别在于,v-html可以解析标签,通过解析了标签可能会引发安全问题,假如你的输入来自于用户,用户输入恶意的信息从而导致输出了一些重要信息。

v-cloak
有一个场景,当vue还没有引入的时候,我们的页面上展示的是未经解析的模板时就会变得很丑,所以我们需要设置在vue没有引入的时候,那些经由vue解析的内容也应该得到隐藏

给一个标签设置v-cloak当vue没有渲染时,他就作为一个标签的属性存在,一旦经过渲染,这个属性就会丢失

v-once
v-once只在第一次动态渲染之后,后面内容就变成静态了

v-pre

他的作用是加快编译速度,能够告诉vue这个节点不需要编译可以直接跳过

自定义指令
vue中有很多内置指令,这个指令是怎么弄得,同时我们可以自己写一个指令
举个例子,设定一个v-big指令,给你输入的表达式的值乘10输出

在这里插入图片描述
首先指令的定义是放在vue的directive选项中的,怎么写

在这里插入图片描述
他有三个钩子函数,我们分别在这三个状态中调用函数就可以完成相应的工作,官网还提供其他钩子函数但是暂时用不上

在这里插入图片描述简写方式
在这里插入图片描述
他是结合了bind和update()函数中的内容

指令命名
当指令比较长的时候要采用key-value的形式命名,不能采用驼峰式,在directive定义的时候也应该采用‘key-value’

全局定义
定义一个全局指令在这里插入图片描述
和一个局部定义没有什么区别,只不过是在Vue上定义了directive这和filter是一样的,同时传入的参数既可以是简写的函数形式也可以是,以回调函数的形式传入

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-15 15:45:41  更:2021-11-15 15:48:26 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/11 22:04:17-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码