vue指令使我们入手使用vue的桥梁&＃xff0c;没有这些基石&＃xff0c;一切高级应用都是空话。
1.【v-text、v-html】
v-text&＃xff1a;用于绑定文本
v-html&＃xff1a;用于绑定html
姓名&＃xff1a;
姓名&＃xff1a;{{Name}}
-------->
姓名&＃xff1a;Wangxc
姓名&＃xff1a;Wangxc
20
1.{{Name}}这种学法和v-text的作用是相同的&＃xff0c;用于绑定标签的text属性。如果标签没有text属性&＃xff0c;该绑定会失效&＃xff0c;比如在一个文本框上面使用v-text时没有效果的。
2.从结果看出&＃xff0c;v-html绑定后会覆盖原来标签里面的内容&＃xff0c;此处是覆盖而非append。
3.对于v-html应用时要慎重&＃xff0c;在网站上会动态渲染任意html有一定的危险存在&＃xff0c;因此容易导致XSS跨站脚本攻击。所以最好是在新任的网址上面使用。
4.v-text和v-html绑定都是单向的&＃xff0c;只能从Model到View的绑定&＃xff0c;不能实现View到Model的更新。
2.v-model指令
v-model实现双向绑定&＃xff0c;vue限定只能对表单控件进行绑定&＃xff0c;常见的由input、select、textarea等。
编辑姓名&＃xff1a;
姓名&＃xff1a;{{Name}}
编辑备注&＃xff1a;
备注&＃xff1a;{{Remark}}
学生爱好&＃xff1a;{{Hobby}}
户籍&＃xff1a;{{Huji}}
3.v-if、v-else指令
v-if和v-else在使用条件运算符判断时常用&＃xff0c;需要说明的是&＃xff0c;v-if可以单独使用&＃xff0c;但是v-else的前面必须有一个v-if的条件或v-show指令。
这里的v-else可以不写&＃xff0c;expression表达式是一个返回bool类型的属性或者表达式。
姓名&＃xff1a;
是否已婚&＃xff1a;if&＃61;"IsMarry">是否
大人or小孩&＃xff1a;if&＃61;"Age>18">大人小孩
单位&＃xff1a;{{School}}
//--------->
姓名&＃xff1a;wangxc
是否已婚&＃xff1a;是
大人or小孩&＃xff1a;大人
单位&＃xff1a;欣网
4.v-show指令
v-show指令表示根据表达式的bool值来决定是否显示该元素。如果bool是false&＃xff0c;对应的dom标签还是会渲染到页面上&＃xff0c;只是css的display设为none而已&＃xff0c;而如果用v-if&＃xff0c;bool值为false时整个dom树都不会被渲染到页面上。从这点来说&＃xff0c;如果需求是需要经常切换元素的显示和隐藏&＃xff0c;使用v-shew效率更高&＃xff0c;而如果只做 一次条件判断&＃xff0c;则使用v-if更加合适。
v-show常和v-else 一起使用&＃xff0c;表示如果v-show条件满足则显示当前标签&＃xff0c;否则显示v-else标签。
姓名&＃xff1a;
是否已婚&＃xff1a;是
//----------->
姓名&＃xff1a;Wangxc
是否已婚&＃xff1a;
5.v-for指令
v-for指令需要以item in items 形式的特殊语法&＃xff0c;常用来绑定数据对象。
- for&＃61;"value in nums">{{value}}
//-------------->
除基础数据之外&＃xff0c;还支持json数组的绑定&＃xff1a;
- for&＃61;"item in items">姓名&＃xff1a;{{item.Name}},年龄&＃xff1a;{{item.Age}}
//---------->
姓名&＃xff1a;呵呵,年龄&＃xff1a;20
姓名&＃xff1a;虫虫,年龄&＃xff1a;25
在v-for里面&＃xff0c;可以使用标签渲染多个元素块&＃xff0c;下面基于bootstrap样式使用v-for、v-if、v-else等实现一个简单的demo。
实现效果&＃xff1a;
v-for指令除了支持数据对象的迭代以外&＃xff0c;还支持普通json对象的迭代&＃xff0c;如&＃xff1a;
- for&＃61;"(item,key) in items">{{key}}:{{item}}
- for&＃61;"(item,key,index) in items">{{index}}.{{key}}:{{item}}
//------------------->
Name:Wangxc
Age:20
Company:欣网
0.Name:Wangxc
1.Age:20
2.Company:欣网
6.v-once指令
v-once表示只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。什么意思呢&＃xff1f;来看demo&＃xff1a;
姓名&＃xff1a;
年龄&＃xff1a;{{Age}}
学校&＃xff1a;{{School}}
从demo看出&＃xff0c;只要使用v-once指令的&＃xff0c;View和Model之间除了初次渲染同步&＃xff0c;之后便不再同步&＃xff0c;而同一次绑定里面没使用v-once指令的还是会继续同步。
7.v-bind指令
对于html标签的text、value等属性&＃xff0c;Vue里面提供了v-text、v-model去绑定。但是对于除此之外的其他属性呢&＃xff0c;这就要用到接下来要讲的v-bind指令了。v-bind的作用是绑定除了text、value之外的其他html标签属性&＃xff0c;常见的比如class、style、自定义标签的自定义属性等。
姓名&＃xff1a;
是否女性&＃xff1a;&＃61;"IsBack">是
岗位等级&＃xff1a;aa
//--------------------->
姓名&＃xff1a;Wangxc
是否男性&＃xff1a;是
岗位等级&＃xff1a;aa
需要说明的是同一个标签里面的同一个属性&＃xff0c;可以既有绑定的写法&＃xff0c;也有静态的写法&＃xff0c;组件会自动帮你合并&＃xff0c;比如上文中的class属性。
8.v-on指令
在vue中v-on指令用来绑定标签的事件&＃xff0c;语法和v-bind类似。
v-on:event&＃61;"expression"&＃xff0c;这里的event可以是js里的常用事件&＃xff0c;也可以是自定义的事件。
姓名&＃xff1a;
年龄&＃xff1a;{{Age}}
//------------>
这段代码是一个最简单的应用&＃xff0c;直接在click事件里面执行逻辑&＃xff0c;改变变量的值。
除了直接在标签内写处理逻辑&＃xff0c;还可以定义方法事件处理器&＃xff1a;
姓名&＃xff1a;
年龄&＃xff1a;{{Age}}
9.实现增删改查
10.VUE常用指令 实现表格分页
| 姓名 | 年龄 | 学校 | 备注 |
|---|---|---|---|
| {{row.Name}} | {{row.Age}} | {{row.Job}} | {{row.Remark}} |
本文原创出处&＃xff1a;http://www.cnblogs.com/landeanfen/
京公网安备 11010802041100号