Vue 所有指令（v-on:click = @click v-blind:class = :class）的学习

[color=blue][size=medium][b]先说一下指令里面的值都是表达式[/b][/size][/color]

new  Vue({
         el: "#box", // element（元素） 当前作用域 id="box"
         data(){
                return { //用return返回对象
                       msg: "122"
                }
            }
 })

[img]http://dl2.iteye.com/upload/attachment/0129/4974/964572d3-53a1-34ff-bcfc-f3612acbcbb0.png[/img]

[size=medium][color=red][b]v-model 表单控件双向绑定数据[/b][/color][/size]

{{msg}} 

[size=medium][color=red][b]v-for循环[/b][/color][/size]

      

          
          

              {{item.name}}
              {{item.age}}
          
      
  
 

[size=medium][color=red][b]v-show 显示与隐藏[/b][/color][/size]

[size=medium][color=red][b]v-if显示与隐藏 （dom元素的删除添加 个人理解）
[/b][/color][/size]

[size=medium][color=red][b]v-bind 用于绑定 html 属性 缩写 :value=""[/b][/color][/size]

    
    点击

[size=medium][color=red][b]v-on 事件[/b][/color][/size]

    
    按钮
    

[size=medium][color=red][b]v-text 读取文本不能读取html标签[/b][/color][/size]

[size=medium][color=red][b]v-html 能读取html标签[/b][/color][/size]

[size=medium][color=red][b]v-bind:class 类名[/b][/color][/size]

  



当isred = true时class的值是red
new Vue({
         el: "#box",
         data(){
             return {
                 isred:false
             }
         }
     })