Vue最全指令大集合————VUE

1. v-cloak
2. v-html
3. v-text
4. v-bind
5. v-show
6. v-model
7. v-for
8. v-if v-else-if v-else
9. v-pre
代码如下：（可以自己复制去看一下）
html

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 [v-cloak]{
 10 display: none;
 11 }
 12 .css{
 13 color: red;
 14 }
 15 
 16 
 17 

 18 
v-html 标签有效
 19 
 20 
v-text 标签无效
 21 
 22 

 23 
style
 24 使用style从数据拿视图，v-bind====:
 25 
v-bind可以简写成： ,动态地绑定一个或多个特性，或一个组件 prop 到表达式。
 26 v-bind可以省
 27 自己改,数据
 31 我不是红色的
 34 

 35 
v-show
 36 v-show可以控制出现或者隐藏
 37 v-on:click====@click点击，隐藏
 38 

 39 
v-model 双向绑定！
 40 
 41 

 42 
v-for
 43 

 44 

 45 
 46 
 47 
 48 
 49 
{{a.name}}
{{a.age}}

 50 

 51 
v-if
 52 
 53 

 54 

 55 

 56 

 57 
v-pre 这是一个跳过这个元素和它的子元素的编译过程
 58 {{ 被包括的vue语言全都无效化！！ }}
 59 
 60 
 61 
 62 new Vue({
 63 el: "#domo",
 64 data: {
 65 name: '我爱你而你爱他',
 66 src:'img/发生的事_画板 1.png',
 67 objCss:{
 68 color: 'blue',
 69 fontSize: '28px'
 70 },
 71 bool:false,
 72 arr: [{
 73 name: "大哥",
 74 age: 18,
 75 imgs: ['img/image (24).gif']
 76 }, {
 77 name: "二哥",
 78 age: 17,
 79 imgs: ['img/image (25).gif']
 80 }, {
 81 name: "三弟",
 82 age: 19,
 83 imgs: ['img/image (26).gif']
 84 }, {
 85 name: "四弟",
 86 age: 20,
 87 imgs: ['img/image (27).gif']
 88 }],
 89 name1: "lemon",
 90 name2: "enenenen",
 91 name3: "DASDA",
 92 name4: "eDASDASF",
 93 type:'B',
 94 },
 95 methods:{
 96 showClick(){
 97 this.name="ddddd",
 98 this.bool=!this.bool,
 99 alert("取消隐藏")
100 this.type='D'
101 }
102 },
103 
104 
105 })
106 
107 
108 
109 

展示地址：[http://cth1688.qicp.vip/vue%20api.html]
#### 这是一个VUE指令的用法大集合，后面再深入说下他的路由功能。
#### 觉得有帮助的话给个赞呗！