vue中的attribute和property的具体使用及区别

目录
  • 作为 attribute 和 property 的 value 及 Vue.js 的相关处理
  • attribute 和 property 的概念
  • attribute 和 property 的绑定
  • Vue.js 对 value 的处理
    • 一般情况使用 :value
  • 特殊情况使用 :value.prop
  • 总结

作为 attribute 和 property 的 value 及 Vue.js 的相关处理

attribute 和 property 是 Web 开发中,比较容易混淆的概念,而对于 value,因其特殊性,更易困惑,本文尝试做一下梳理和例证

attribute 和 property 的概念

简单的说,attribute 是元素标签的属性,property 是元素对象的属性,例如:

<input id="input" value="test value">
<script>
let input = document.getElementById('input');
console.log(input.getAttribute('value')); // test value
console.log(input.value); // test value
</script>
  • input 的 value attribute 是通过标签里的 value=“test value” 定义的,可以通过input.getAttribute(‘value') 获取,可以通过 input.setAttribute(‘value', ‘New Value') 更新
  • input 的 value property 可通过 input.value 获取和更新,初始值是与 attribute 中的赋值一致的

attribute 和 property 的绑定

如果在最开始的时候,更新 attribute value 的值,property 的值也会随之改变

但是更新 property value 的值(在文本框输入或给 input.value 赋新值 ),attribute 的值不会随之改变,而且此时再更新 attribute 的值,property 的值也不再随之改变,如此动画所示,也可访问此页面尝试进行操作

这其实是脏值标记(dirty value flag)在起作用,dirty value flag 的初始值为 false,即 attribute value 的更新默认会改变对应的 property value,但是一旦用户交互修改了 property value,dirty value flag 的值就变为 true,即attribute value 的更新就不会改变对应的 property value 了

所以在实际项目中,我们一般都是在处理作为 property 的 value

Vue.js 对 value 的处理

一般情况使用 :value

Vue.js 的 v-bind,一般情况下是在处理 attribute,如果要作为 property 处理的话,需要加上 .prop

不过 v-bind:value 却大都默认为处理 property 值,因为被强制转化了,例如:

<input id="input" :value="'test value'" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let input = new Vue({
  el: '#input',
  mounted () {
    console.log(this.$el.getAttribute('value')); // null
    console.log(this.$el.value); // test value
    console.log(this._vnode.data) // {attrs: {id: "input"}, domProps: {value: "test value"}}
  }
});
</script>

可见,Vue.js 将 value 作为 VNode 的 data 中的 domProps 的属性,而不是 attrs 的属性,所以挂载后会成为作为 property 的 value

在 Vue.js 源码中,强制转化 property 的处理如下:

// src/compiler/parser/index.js
function processAttrs (el) {
...
        if ((modifiers && modifiers.prop) || (
          !el.component && platformMustUseProp(el.tag, el.attrsMap.type, name)
        )) {
          addProp(el, name, value, list[i], isDynamic)
        } else {
          addAttr(el, name, value, list[i], isDynamic)
        }

其中 platformMustUseProp 在 web 平台的定义如下:

// src/platforms/web/util/attrs.js
const acceptValue = makeMap('input,textarea,option,select,progress')
export const mustUseProp = (tag: string, type: ?string, attr: string): boolean => {
  return (
    (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
    (attr === 'selected' && tag === 'option') ||
    (attr === 'checked' && tag === 'input') ||
    (attr === 'muted' && tag === 'video')
  )
}

由上可知,类型不为 button 的 input, textarea, option, select, progress 的 value 会强制作为 property,而不需要设置为 :value.prop

例如 textarea 标签,其本身其实并不支持 value attribute,所以以下代码中的 value 的值并不会显示在多行文本框中

<textarea value="test value"></textarea>

但是在 Vue.js 中, 以下代码能成功绑定到 value property 并显示在多行文本框中

<textarea :value="'test value'"></textarea>

特殊情况使用 :value.prop

以上 Vue.js 源码需要注意的还有,强制作为 property, 还要满足 !el.component,即不为动态组件,因为动态组件的 el.component 的值为其 is attribute 的值

即动态组件的的 v-bind 默认都是作为 attribute的,如果要作为 property,就要使用 .prop,例如:

<div id="app">
  <component :is="element" :value.prop="'test value'"></component>
  <button @click="change">Change</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
  el: '#app',
  data: {
    element: 'input'
  },
  methods: {
    change () {
      this.element = 'input' === this.element ? 'textarea' : 'input';
    }
  }
});
</script>

如果以上 component 中,删除 :value.prop 的 .prop,切换到 textarea 时,其值就不会显示在多行文本框中,可以在此页面点击切换标签查看

总结

  • 作为 attribute 和 property 的 value 的绑定关系会在用户交互更新值后失效
  • Vue.js 一般使用 :value 即可让 value 作为 property
  • Vue.js 动态模版需要使用 :value.prop 才可让 value 作为 property

到此这篇关于vue中的attribute和property的具体使用及区别的文章就介绍到这了,更多相关vue attribute property内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue用Object.defineProperty手写一个简单的双向绑定的示例

    前言 上次写了一个Object.defineProperty() 不详解,文末说要写用它来写个双向绑定.说话算话,说来就来 前文链接 Object.defineProperty() 不详解 先看最后效果 model演示.gif 什么是双向绑定? 1.当一个对象(或变量)的属性改变,那么调用这个属性的地方显示也应该改变,模型到视图(model => view) 2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也会改为最新的值 ,即视图到模型(view =>

  • vue.js利用Object.defineProperty实现双向绑定

    Object.defineProperty这个方法了不起啊,vue.js是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了. 几行代码看他怎么用 var a= {} Object.defineProperty(a,"b",{ value:123 }) console.log(a.b);//123 很简单,它接受三个参数,而且都是必填的.. 传入参数 第一个参数:目标对象 第二个参数:需要定义的属性或方法的

  • vue源码学习之Object.defineProperty对象属性监听

    本文介绍了vue源码学习之Object.defineProperty对象属性监听,分享给大家,具体如下: 参考版本 vue源码版本:0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ,让我们先来看下这个函数. 在MDN上查看有关Object.defineProperty的解释. 我们先从最简单的开始: let a = {'b': 1}; Object.defineProperty(a, 'b', { enumerable: false, configur

  • vue中defineProperty和Proxy的区别详解

    Proxy的出现,给vue响应式带来了极大的便利,比如可以直接劫持数组.对象的改变,可以直接添加对象属性,但是兼容性可能会有些问题 Proxy可以劫持的数组的改变,defineProperty 需要变异 defineProperty 中劫持数组变化的变异的方法 可以理解为在数组实例和原型之间,插入了一个新的原型的对象,这个原型方法实现了变异的方法,也就真正地拦截了数组原型上的方法 我们来看下vue2.x的源码 // vue 2.5.0 var arrayProto = Array.prototy

  • 详解vue-property-decorator使用手册

    一,安装 npm i -s vue-property-decorator 二,用法 1,@Component(options:ComponentOptions = {}) @Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives 等未提供装饰器的选项 虽然也可以在 @Component 装饰器中声明 computed,watch 等,但并不推荐这么做,因为在访问 this 时,编译器会给出错误提示 import { Vu

  • vue.js利用defineProperty实现数据的双向绑定

    vue.js如何实现数据的双向绑定呢? 与angular不同. vue利用的是es5的defineproperty特性. 1.一个小例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="tex

  • vue-property-decorator用法详解

    vue-property-decorator 这个组件完全依赖于vue-class-component.它具备以下几个属性: @Component (完全继承于vue-class-component) @Emit @Inject @Provice @Prop @Watch @Model Mixins (在vue-class-component中定义); 使用 当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:

  • vue源码学习之Object.defineProperty 对数组监听

    上一篇中,我们介绍了一下defineProperty 对对象的监听,这一篇我们看下defineProperty 对数组的监听 数组的变化 先让我们了解下Object.defineProperty()对数组变化的跟踪情况: var a={}; bValue=1; Object.defineProperty(a,"b",{ set:function(value){ bValue=value; console.log("setted"); }, get:function(

  • vue中的attribute和property的具体使用及区别

    目录 作为 attribute 和 property 的 value 及 Vue.js 的相关处理 attribute 和 property 的概念 attribute 和 property 的绑定 Vue.js 对 value 的处理 一般情况使用 :value 特殊情况使用 :value.prop 总结 作为 attribute 和 property 的 value 及 Vue.js 的相关处理 attribute 和 property 是 Web 开发中,比较容易混淆的概念,而对于 val

  • 详解Vue 中 extend 、component 、mixins 、extends 的区别

    new Vue().component 首先我们来约定一个选项对象 baseOptions,后面的代码会用到. let options = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } }, created(){ conso

  • javascript中attribute和property的区别详解

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为"特性",property翻译成中文术语为"属性",从中文的字面意思来看,确实是有点区别了,先来说说attribute. attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数

  • JS中DOM元素的attribute与property属性示例详解

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 html 标签拥有的属性: property 是 dom 元素在 js 中作为对象拥有的属性. 从定义上可以看出: 对于 html 的标准属性来说,attribute 和 property 是同步的,是会自动更新的 但是对于自定义的属性来说,他们是不同步的.(自定义属性不会自动添加到property)

  • 深入理解JS中attribute和property的区别

    目录 attribute和property介绍 “脚踏两只船” attribute和property的取值和赋值 1.attribute取值 2.attribute赋值 3.property取值 4.Property赋值 更改property和attribute其中一个值,会出现什么结果 property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property是DOM中

  • Vue中使用sass实现换肤功能

    先给大家展示下效果图: 先给大家看一下目录和主要文件: 解释一下主要文件: base.scss: 一些通用样式文件. mixin.scss: 定义mixin方法的文件. varibale.scss: 颜色,字体,背景的配置文件 以下就拿封装的head组件代码来展示以下实现逻辑,现在大家主要是来理解,不要着急复制代码,在文章最后会贴出三个主要文件的代码的. 为什么会在 background:$background-color-theme; 地方标注错误? 如果之前用过sass的同学可能会知道,这样

  • Vue中jsx不完全应用指南小结

    前言:文章不介绍任务背景知识,没有原理说明,偏向于实践的总结和经验分享. 文章所有的代码是基于Vue CLI 3.x版本,不会涉及到一步步通过Webpack来配置JSX所需要的知识点. 在使用Vue开发项目时绝大多数情况下都是使用模板来写HTML,但是有些时候页面复杂又存在各种条件判断来显示/隐藏和拼凑页面内容,或者页面中很多部分存在部分DOM结构一样的时候就略显捉襟见肘,会写大量重复的代码,会出现单个.vue文件过长的情况,这个时候我们就需要更多的代码控制,这时候可以使用渲染函数. 渲染函数想

  • 浅析Vue 中的 render 函数

    render函数是什么 简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程. 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具.官网上给他起了个名字叫createElement.还有约定的简写叫h, vm中有一个方法_c,也是这个函数的别名 先看官网对

  • 在Vue中使用HOC模式的实现

    前言 HOC是React常用的一种模式,但HOC只能是在React才能玩吗?先来看看React官方文档是怎么介绍HOC的: 高阶组件(HOC)是React中用于复用组件逻辑的一种高级技巧.HOC自身不是ReactAPI的一部分,它是一种基于React的组合特性而形成的设计模式. HOC它是一个模式,是一种思想,并不是只能在React中才能用.所以结合Vue的特性,一样能在Vue中玩HOC. HOC HOC要解决的问题 并不是说哪种技术新颖,就得使用哪一种.得看这种技术能够解决哪些痛点. HOC主

  • 带你理解vue中的v-bind

    目录 一.v-bind关键源码分析 1.v-bind化的属性统一存储在哪里:attrsMap与attrsList 2.解析HTML,解析出属性集合attrs,在start回调中返回 3.在start回调中创建ASTElement,createASTElement(... ,attrs, ...) 4.创建后ASTElement会生成attrsList和attrsMap 5.attrs的数据类型定义 6.绑定属性获取函数 二.如何获取v-bind的值 1.v-bind:key源码分析 2.v-bi

随机推荐