vue.jsv-html,关于vue.js v-bind 的一些理解和思考,vue.jsv-bind
关于vue.js v-bind 的一些理解和思考,vue.jsv-bind
一、v-bind 初探
它是一个 vue 指令,用于绑定 html 属性,如下:
html属性不能使用双大括号形式绑定,只能使用v-bind指令
......
var vm = new Vue({
el: '#app',
data: {
title: 'title content'
}
});
这里的 html 最后会渲染成:
html属性不能使用双大括号形式绑定,只能使用v-bind指令
二、指令预期值
上面这种 v-bind 这也是我们对于 vue 指令最初的理解,但实际上,vue 指令的预期值(如 v-bind:class="classProperty" 中,v-bind 是指令,: 后面的 class 是参数,而 classProperty 则在官方文档中被称为“预期值”),除了像上面那样绑定一个字符串类型变量,其实它是支持一个单一 JavaScript 表达式 (v-for 除外)。
所以在这里,我们就可以有更多的选择,例如:
(1)执行运算
html属性不能使用双大括号形式绑定,只能使用v-bind指令
......
var vm = new Vue({
el: '#app',
data: {
t1: 'title1',
t2: 'title2'
}
});
最后渲染的结果:
html属性不能使用双大括号形式绑定,只能使用v-bind指令
(2)执行函数等
html属性不能使用双大括号形式绑定,只能使用v-bind指令
......
var vm = new Vue({
el: '#app',
data: {
getTitle: function () {
return 'title content';
}
}
});
最后渲染的结果:
html属性不能使用双大括号形式绑定,只能使用v-bind指令
三、支持的数据类型
上面的内容,指令预期值得到的都是字符串类型的数据,但实际上,我们知道 js 有很多数据类型,它如果放入其中呢?
(1)对象类型
content
......
var obj = {};
var vm = new Vue({
el: '#app',
data: {
obj: obj
}
});
为什么一来就选择对象类型呢?答案是它比较有代表性,它渲染结果如下:
content
诶,这个怎么有点眼熟?有点像...没错!对象的 toString 方法的返回值!为了验证我们的猜想,我们进行进一步的测试:
content
......
var obj = {};
obj.toString = function () {
return 'edited in toString!';
};
var vm = new Vue({
el: '#app',
data: {
obj: obj
}
});
上面这里修改了 obj 的 toString 方法(但准确的说,这里不是修改,而是添加。一开始的 obj 对象上自身是没有 toString 方法的,它继承了 Object.prototype.toString,但这里我们执行 obj.toString = function..... 实际上是为它添加了一个 toString 方法,使得它执行的时候,不用再去调用继承自 Object 的方法),渲染结果如下:
content
这里就进一步证实了我们的猜想。
(2)数组类型
数组类型的 toString 方法和对象类型的有所不同,它将返回和执行 arr.join(',') 相同的结果。如 [1, 2, 3].toString() 将返回 “1,2,3”。下面进行测试:
content
......
var vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3]
}
});
渲染结果如下:
content
仍然跟预期结果一样。
(3)其它类型
number 类型,正常执行 toString,包括数字0,结果都正常渲染成对应的字符串;
boolean 类型,true 正常渲染成字符串 "true",但 false 虽然执行 toString 方法将返回 "false" 字符串,但是却没有渲染出来;
null / undefined 类型,二者没有 toString 方法,也没有渲染出来。
显然,在执行 toString 方法之前,vue 内部应该先做了类型校验,满足条件才输出。而且这里不是简单的真 / 假值校验,因为 、0 虽为假值,但最终却像真值一样渲染了出来。具体如何实现,可能需要参考 vue 的源码了,这里不再深究。
四、多 html 属性值绑定
一个的 html 属性值,可能包含许多内容,需要我们进行一些操作,将多个数据绑定到一个属性上,这里我们可以考虑像前面一样,通过如 “+” 等运算符号等实现字符串的连接操作。但是事实上,字符串连接麻烦又易错,不易于维护。于是我们可以考虑像前面一样向指令预期值中存入一个对象或数组,来实现多个数据绑定到一个属性上的作用。
(1)利用对象绑定
content
......
var obj = {
name: 'Dale',
age: 22
};
// 利用 for-in 循环遍历对象属性,拼接成字符串
obj.toString = function () {
var str = '';
for(var i in this) {
str += i + ': ' + this[i] + '; ';
}
return str;
};
// 防止 toString 方法自身被遍历出来
Object.defineProperty(obj, 'toString', {'enumerable': false});
var vm = new Vue({
el: '#app',
data: {
obj: obj
}
});
输出结果:
content
上面通过 for-in 循环在 toString 方法中得到所有可遍历的属性以及对应的属性值,然后将其拼接成字符串再进行输出,可以实现多属性值绑定,至于如何拼接,可以自己在 toString 方法中进行不同的实现 。
(2)利用数组绑定
content
......
var arr = [1, 2, 3];
arr.toString = function () {
return this.join(' ');
};
var vm = new Vue({
el: '#app',
data: {
arr: arr
}
});
渲染结果如下:
content
相比于对象字符串拼接,数组的拼接操作则显得简单得多,可以直接在 toString 方法返回 join 方法的返回值,默认的 toString 方法的返回值其实就和 join(',') 的返回值相同。
(3)思考
其实想想一个 html 属性绑定多个值的情况其实并不少见,最典型的应该是 class 和 style 属性,或者说我们经常都会接触到这样的场景。
但我们这里的实现,看起来还是问题比较多,数组的绑定还好,对象的绑定,除了每次要重写 toString 方法以外,我们还需要设置 toString 方法变得不可枚举,否则它将在 for-in 循环中被遍历出来(一般情况下,这不是我们希望看到的结果),这样无疑会增加很多重复性工作,而 vue 为我们考虑到了这一点,它在框架内部进行了一些优化操作。
五、vue 对于 class 和 style 绑定的增强
基于上面的情况,vue 对 class 和 style 这两个 html 属性进行了一定程度的增强。vue 具体的实现方式请参考其源码,这里仅给出基于上面的结论的实现方式。
(1)基于对象针对 class 的增强
content
......
var obj = {
c1: true,
c2: false,
c3: null,
c4: undefined
};
obj.toString = function () {
var str = '';
for(var i in this) {
if(this[i]) {
str += i + ' ';
}
}
return str;
};
// 防止 toString 方法自身被遍历出来
Object.defineProperty(obj, 'toString', {'enumerable': false});
var vm = new Vue({
el: '#app',
data: {
obj: obj
}
});
渲染结果:
content
同样是 for-in,与之前不同的是,当检测到 obj 的某个属性值为真的时候,则将这个属性的属性名添加到绑定的元素的 class 上。当然,我这里只是一个模拟实现,vue 实际的实现方式,请参考 vue 源码。
(2)基于数组对 class 的增强
content
.......
var arr = ['c1', 'c2', 'c3'];
arr.toString = function () {
return this.join(' ');
};
var vm = new Vue({
el: '#app',
data: {
arr: arr
}
});
渲染结果:
content
这里基本和前面的实现思路一样,利用 join(' ') 实现。
(3)基于对象对 style 的增强
content
......
var obj = {
color: 'red',
backgroundColor: '#ddd',
fontSize: '20px',
};
obj.toString = function () {
var str = '';
for(var i in this) {
if(this[i]) {
str += i + ':' + this[i] + ';';
}
}
return str;
};
// 防止 toString 方法自身被遍历出来
Object.defineProperty(obj, 'toString', {'enumerable': false});
var vm = new Vue({
el: '#app',
data: {
obj: obj
}
});
渲染结果:
content
这里基本和前面的实现思路一样,利用 for-in 配合字符串拼接实现。
(4)基于数组对 style 的增强
content
var arr = [{
color: "red"
}, {
backgroundColor: '#ddd'
}, {
fontSize: '20px'
}];
arr.toString = function () {
var str = '';
arr.forEach(function (val, key) {
for(var i in val) {
str += i + ':' + val[i] + ';';
}
});
};
var vm = new Vue({
el: '#app',
data: {
arr: arr
}
});
渲染结果:
content
这里通过 forEach 方法遍历了数组,然后将数组元素(也就是这里我们的样式对象)再通过 for-in 遍历并拼接成样式字符串达到效果。
六、结语
再次强调,这里只是个人的理解和思考,仅供参考,vue 本身的实现方式未必相同。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
vue.jsv-html,关于vue.js v-bind 的一些理解和思考,vue.jsv-bind相关推荐
- Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue.js?v=3e1adf4e‘ does not ...
vue3导入全局变量时,可以运行但是会一直显示报错,如图: 解决方法如下: 在 Vue.js 3 中,"@vue/runtime-core" 是一个包含 Vue.js 运行时核心的 ...
- 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
- 【项目相关技术】前端由来、vscode安装使用、ECMAScript 6、Vue、element-ui、Node.js、npm、模块化、WebPack
前端开发的由来? vscode安装和使用 sda ①.下载地址:[https://code.visualstudio.com/](https://code.visualstudio.com/) sda ...
- Vue中常用的8种v指令
Vue中常用的8种v指令 根据官网的介绍,指令 是带有 v- 前缀的特殊属性.通过指令来操作DOM元素 指令 功能 v-text="变量/表达式" 文本的设置 字符串变量+数字可以 ...
- Vue 云开发-结合survey.js+boostrapVue
新建一个vue项目并配置 脚手架版本为3.0.4 首先创建一个新的vue项目并且安装router.boostrapVue.survey.js(都安装默认安装 ) vue create survey v ...
- vue实现div多选全选功能_怎样为你的 Vue.js 单页应用提速
每日前端夜话第323篇 翻译:疯狂的技术宅 作者:Matthias Sommer 来源:dzone 正文共:1956 字 预计阅读时间:10 分钟 我有一个项目用了 Vue.js 来构建单页应用程序. ...
- js字符串替换_浅析Vue的生命周期以及JS异步
前言 Vue的生命周期和JS异步都是有很多文章的知识点,我之前也是一知半解,基本够用. 但是直到我在开发的时候真的遇到了问题,才发现如果不把这些知识点融汇到一起,很难解决实际问题. 我甚至觉得这是我离 ...
- Vue 脚手架中的.eslintrc.js代码规范 的解决
在我们使用Vue脚手架 创建项目时 尤其是团队共同开发项目时 会按照一个共同的代码规范来编程 创建Vue脚手架中有一个.eslintrc.js格式 但是在编程中我们通常会使用 shift+alt+f ...
- [转]vue项目中,main.js,App.vue,index.html如何调用
1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...
- vue理由设置_在你的下一个Web应用中使用Vue.js的三个理由
Vue.js是那么地易上手,它在提供了大量开箱即用的功能的同时也提供了良好的性能.请继续阅读以下事例及代码片段以便更加了解Vue.js. 选择一个JavaScript框架真是太难了--因为有太多的框架 ...
最新文章
- 活动报名 | 智源重大研究方向:自然语言处理暨“北京智源-京东跨媒体对话智能联合实验室”发布会...
- 2018 OO第一次总结(作业1-3)
- android多种方式实现异步加载图片
- SASE — Overview
- android动态更改布局宽高,动态更改Android上的线性布局宽度或高度
- pwm控制的基本原理_最详细的电机控制说明
- python学习笔记——类
- 【链表】Add Two Numbers
- 截屏悬浮软件_吹爆的软件,准确率太强了!
- vue + vue-router + vue-resource 基于vue-cli脚手架 ---笔记
- 【NLP】毕设学习笔记(二)transformer
- 【X264系列】之命令参数解析
- 百度对数据的要求很高,智能音箱的难点是远场语音识别
- mysql按逗号拼接起来_MySql逗号拼接字符串查询的两种方法
- CSDN:如何获得C币
- 南京大学计算机学院杨老师,南京大学计算机系名师风采_跨考网
- 阿里视觉AI训练营-day05-创意日-你的图像识别项目
- centos6如何配置ip
- 臻图信息构建数字孪生港口船舶停靠管理系统,赋能港口创新发展
- Stream Collectors - joining
热门文章
- 实现愤怒的小鸟:我们有很多种小鸟(Bird类),每种小鸟都有飞的行为(fly()方法),还有一个弹弓(Slingshot类),弹弓有一个弹射的行为(shot()方法:调用fly()方法)
- [LiteratureReview]Improving 3D Object Detection for Pedestrians with Virtual Multi-View Synthesis...
- 揭开HPC应用的神秘面纱
- CVPR 2022 Oral | 视频文本预训练新SOTA,港大、腾讯ARC Lab推出基于多项选择题的借口任务
- log4j2远程执行漏洞原理以及解决方案
- JavaScript 每日一题 #6
- Web前端开发技术课程大作业:基于HTML+CSS+JavaScript实现校园主题-萍乡田家炳中学校网站(1页)
- 哒螨灵使用注意事项_哒螨灵的基础知识
- 使用codelite搭建stm32开发环境
- 基于画布的手绘风格图形库 Rough.js