原文:Vue.js 源码分析(十五) 指令篇 v-bind指令详解

指令是Vue.js模板中最常用的一项功能,它带有前缀v ,比如上面说的v if v html v pre等。指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上,先介绍v bind指令 v bind用于动态地绑定一个或多个特性,或一个组件 prop 到表达式。 例如: 渲染为: 当我们点击整个超链接时将跳转到http: www.baidu.com,如果在控制台输入app.href ...

2019-07-01 10:48 0 649 推荐指数:

查看详情

Vue.js 源码分析(十九) 指令 v-html和v-text指令详解

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令,例如: 渲染结果为: <p>{{message}}</p>里的message被解释为了普通文本,而不是输出真正的 HTML,而<p ...

Fri Jul 05 17:44:00 CST 2019 0 781
Vue.js 源码分析(二十) 指令 v-once指令详解

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,例如:<p>Message: {{ msg }}</p>以后每当msg属性发生了改变,插值处的内容都会自动更新。 可以给DOM节点添加一个v-once指令,这样模板只会在第一次更新时显示数据 ...

Mon Jul 08 18:26:00 CST 2019 1 441
Vue.js 源码分析(二十二) 指令 v-model指令详解

Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的。 v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理 ...

Wed Jul 10 08:02:00 CST 2019 0 702
Vue.js 源码分析(十六) 指令 v-on指令详解

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,例如: 渲染结果为: 我们给测试按钮添加了一个mouseenter和click事件,鼠标移上去式控制台输出: 当点击时,输出为: Vue的事件绑定有很多种写法 ...

Wed Jul 03 01:26:00 CST 2019 1 736
Vue.js 源码分析(十八) 指令 v-for 指令详解

我们可以用 v-for 指令基于一个数组or对象来渲染一个列表,有五种使用方法,如下: 挺简单的,后台只要提供一个接口,返回一个数组或对象,前端通过v-for就可以渲染了,我们以上面对象的第三个格式为例讲一下源码,如下: writer by:大沙漠 QQ ...

Thu Jul 04 17:30:00 CST 2019 0 1043
Vue.js 源码分析(十七) 指令 v-if、v-else-if和v-else 指令详解

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。 v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用: 也可以使用 v-else 指令来表示 v-if 的“else 块”: 挺好理解的,就和大多数的语言 ...

Thu Jul 04 02:05:00 CST 2019 0 2543
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM