v-bind指令——03
v-bind 指令详解：
1 、这个指令是干嘛的？
可以让html标签的某个属性的值产生动态的效果
2、v-bind指令的语法格式：<HTML 标签 v-bind : 参数 = “表达式”> </HTML>
3、v-bind指令的编译原理：
编译前：<HTML 标签 v-bind : 参数 = “表达式”> </HTML>
编译后：<HTML 标签 参数 = “表达式”> </HTML>（以参数作为HTML的属性名）
注意两项：
1.在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”
2.表达式会关联data，当data发生改变之后
- v-bind 很常用表格，所有vue框架对该指令提供了一种简写方式：
只是针对v-bind 提供了以下简写方式：<img : src = " imgPath"><br>
5.什么时候使用插值语法？ 什么时候使用命令
凡事标签体中的内容要想动态，需要使用插值语法。只要想让HTML标签的属性动态，需要使用指令语法
<body>
<div id ='app'>
//注意：1、以下代码中msg是变量名
2、原则上v-bind指令后面的这个参数名可以随便写
3、虽然可以随便写，但大部分情况下，这个参数名还是需要写成改HTML标签支持的属性名，这样才会有意义
<span v-bind : abc =“msg”></span>
<span v-bind : abc =“ 'msg ' ”></span> //这个表达式带有单引号，这个‘msg’就不是变量，是常量
v-bind实战：
<img src=“../img/1.png”><br>
<img v-bind : src = " imgPath"><br>
v-bind简写形式
<img : src = " imgPath"><br>
这是一个普通的文本框
<input type =“text” name=“username” value=“zhangsan”><br>
以下文本框可以让value这个数据变成动态的这个就是典型的动态数据绑定
<input type =“text” name=“username”: value=“zhangsan”><br>
使用v-bind也可以让超链接的地址动态
<a href="https://element-plus.org/zh-CN/component/dialog.html">点击</a><br>
<a :href="url">单机</a> <br>
不能采用以下写法：
<a href = "{{url}}">点击吧</a>// 属性内部插值这种语法已经被移除了，可能vue以前的版本中是支持这种写法的，但是现在不允许了。
请使用v-bind冒号速记来代替。请使用<div id= "val">来代替
</div>
<script>
new Vue （{
let i=100；//赋值的过程就可以看做是一种绑定的过程
el : '#app'
data(){
msg : ' qwert'
imgPath : "abc"
username= : 'https://element-plus.org/zh-CN/component/dialog.html' ,
url : 'https:'
}
}）
</scirpt>
</body>