如何利用Vue.js库中的v-bind绑定样式属性

利用Vue.js库中的v-bind绑定样式属性：

第一步，创建静态页面vbind.html，并引入vue.js文件

第二步，在主体里插入一个div标签元素，并在div中插入img元素，利用v-bind绑定img的src属性

第三步，利用Vue.js代码绑定src属性，默认为项目中的图片

第四步，由于图片比较小，添加一个间隔，padding属性

第五步，预览该静态页面，这时在页面上显示一个小图片

第六步，打开浏览器下方调试工具，可以看到div中的img的src属性值

我们需要在template，script，style下引用图片，如下。

比如

这里能用 @assets 是因为在 vue.config.js 里面设置了如下参数。

本地开发的时候，因为域名是 http://localhost:8080 ，也就是 / ，vue自动帮你转换成相对 / 路径。

build的时候，vue默认把图片路径指定在 / 下。图片地址也就是在 /img/xxx.jpg 。

如果项目部署在域名是 http://www.aaa.com/vue/ ， /img/xxx.jpg 自然找不到图片。

我们build的时候需要指定一个路径 /vue/ ，因为 vue/img/xxx.jpg 是正确的路径。

修改 vue.config.js 配置即可。

可以看到现在的图片，已经具备放大缩小及旋转的功能了，但是这个方法会造成图片的遮挡，所以还需要做一个拖动图片的功能

在main.js里面全局定义一个拖动指令，也可在局部定义。

最后给当前图片的元素加上v-drag，以及position: absolute的样式，图片就能正常的拖动了

---