上一篇学习笔记2-Vue语法,聊了些Vue对JS的语法支持,涉及到了指令,那指令是什么?为什么要有指令这个概念?
- 2014年Vue1.0x问世,它借鉴了当前热火的angular的一个概念: 指令
- 指令是用来操作DOM的。
- 指令其实就是封装的函数,这个函数绑定在元素身上,就可以获取元素,然后就可以操作这个元素了
- Vue也是MVC的衍生框架,所以它采用类似的方案
我们知道标签属性可以随意定义,但是Vue希望添加的属性有vue标识,所以vue给它自定义的属性加了一个表示:这个标识就是 v-
指令的封装思路
分析:v-html其实是封装的函数,只要绑点在元素上,就会执行些它里面的逻辑,给这个元素做些事情。
v-html相当于
function v-html(el,str){
el.innerHTML=str
}
v-html="info"当绑定data里的info,此时info相当于函数的参数,相当于给函数传了个实参
<body>
<div index=1 v-html="info"> </div>
</body>
<script>
new Vue({
el: '#app',
data: {
info: 'hahaha~'
}
})
</script>