vue.js(2.0)常用指令总结以及一些指令的坑!
来源:互联网 发布:网络语鬼畜什么意思 编辑:程序博客网 时间:2024/06/06 23:09
**凄凄惨惨凄凄切切,时间又来到了公元2017年8月11号,最近小飞飞在学习vue.js,在学习的过程中总结了一些vue中常用的指令和坑!不希望后来小伙伴再踩了!**
《1》 先说一些最基本的指令也就是最常用的呗。
`v-bind: //主要是綁定html标签中的属性,例如 href,class,name,这样绑定后属性值。看代码!
html部分!
<a v-bind:href="url">小飞飞的博客</a> //注意这里面的url不能直接写网址!,只能写变量传参数才可以//错误示范:v-bind:href="http://blog.csdn.net/qq_37983691"
js部分
new Vue({ data:{ url:"http://blog.csdn.net/qq_37983691" } })
《2》 注意!v-bind:class=”{className:boolean}” 只能这么绑定class,第一个参数class的名称,第二个是一个boolean值,就是true,false, 如果是true的话这个绑定的class才生效啊!//错误的绑定方式:v-bind:class=”sb”,v-bind:class=”{bigSb}”
上代码!再看如何用!
//v-bind:class主要是配合v-on:click使用改变data中的数据属性值从而达到改变元素样式的目的.下面的例子是*点击p标签就会让p标签的背景改变*//html部分<p v-bind:class="{active:isActive}" v-on:click="changeColor">小飞飞是sb吗?<p> //注意看isActive在js中的属性值//css部分p{background:#000;color:white;}.active{background:red;}//js 部分new Vue({ data:{ url:"http://blog.csdn.net/qq_37983691", isActive:false }, methods:{ changeColor:function(){ if(this.isActive==true){ this.isActive=false }else{ this.isActive=true } }; } })
注意!源码都可以直接复制运行!前提引入vue.js!
先说这么多吧!因为就会这点!别他妈嘲笑!耻笑就行。。。。。。。。
有道友一起的就点个赞再走,不点赞的点个关注!就这样待后续学成归来继续排坑。。。。。。。。。。
阅读全文
0 0
- vue.js(2.0)常用指令总结以及一些指令的坑!
- vue.js的常用指令
- Vue.js的常用指令-vue.js
- Vue.js常用指令
- vue的常用指令
- 【Vue.js】- Vue.js常用指令的使用
- 细微笔记(快捷键以及一些常用指令总结)
- Vue.js介绍以及vue的常见指令
- vue指令的定义及常用指令
- oracle一些常用指令记录(总结)
- Vue.js学习系列(十七)--常用指令(一)
- Vue.js学习系列(十九)--常用指令(二)
- Vue.js入门(二)——常用指令
- Vue.js知识总结——指令
- vue---vue中常用指令,以及如何自定义指令vue.directive进行节点操作?
- 02.vue常用指令
- vue常用内置指令
- vue常用指令
- 对一致性Hash算法,Java代码实现的深入研究
- PX4之commander剖析解读-2
- 超能粒子炮·改 HYSBZ
- hdu2222
- 文本框字数问题从http://www.cnblogs.com/beiz/p/5238224.html 处拿来的文章,谢谢北执!
- vue.js(2.0)常用指令总结以及一些指令的坑!
- 【物联网】行排式二维条码 介绍
- F
- 简单粗暴安卓全屏幕适配
- 【视频开发】ONVIF客户端搜索设备获取rtsp地址开发笔记(精华篇)
- 在京单位笔试面试经验
- MapReduce中的排序和分组
- 日常生活小技巧 -- CSDN 文件搜索
- I