Vue.javascript源码分析(十五)指令篇v-bind指令详解

事业上得寸进尺,生活中不论短长,何愁事业无成。人生最精彩的不是实现梦想的瞬间,而是坚持梦想的过程。

指令是Vue.js模板中最常用的一项功能,它带有前缀v-,比如上面说的v-if、v-html、v-pre等。指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上,先介绍v-bind指令

v-bind用于动态地绑定一个或多个特性,或一个组件 prop 到表达式。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>Document</title>    
</head>
<body>
    <div id="app"><a v-bind:rel="nofollow noopener noreferrer" href="href">链接</a></div>
    <script>
    Vue.config.productionTip=false;
    Vue.config.devtools=false;
    var app = new Vue({
        el:'#app',
        data:{href:"http://www.baidu.com"}
    })
    </script> 
</body>
</html>

本文Vue.javascript源码分析(十五)指令篇v-bind指令详解到此结束。理解失败等于回归真实的自我,理解失败等于打破完美的面具,理解失败等于放松自我高压的心理,理解失败也等于给了自我从零开始的机会,理解失败更是一种智者的宣言和呐喊。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
vue.javascript管理后台table组件封装的方法

vue+threejavascript写物体动画之物体缩放动画效果

vue.javascript中methods watch和computed的区别示例详解

基于Vue.javascript与WordPress Rest API构建单页应用详解

Vue.javascript中provide/inject如何实现响应式数据更新的方法示例