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]

<input type="text" v-model="msg"/>{{msg}} <!--取数据-->

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

<div id="box">
      <ul>
          <!--ng-repeat-->
          <li v-for="item in arr">
              <span>{{item.name}}</span>
              <span>{{item.age}}</span>
          </li>
      </ul>
  </div>
 <script type="text/javascript">
     new Vue({
         el:'#box',
         data(){
             return{
 //                arr:['module','views','controlle','aaaaa']
                 arr:[
                     {"name":"xiaohong1","age":12},
                     {"name":"xiaohong2","age":12},
                     {"name":"xiaohong3","age":12},
                     {"name":"xiaohong4","age":12}
                 ]   
          }
         }
     })
 </script>

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

<div id="box">
    <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

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

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

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

<div id="box">
    <input type="text" v-bind:value="msg">
    <a :href="link">点击</a>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg: "12222",
                link:"1、v-model.html"
            }
        }
    })
</script>

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

<div id="box">
    <!-- v-on -->
    <button v-on:click="say">按钮</button>
    <!--<button @click="say">按钮</button>-->
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

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

<div id="box">
    <div v-text="msg">
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {msg:"11111"}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

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

<div id="box">
    <div v-html="msg"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg:"<h1>121212</h1>"
            }
        },
        methods: {
            say() {
            }
        }
    })
</script>

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

<div id="box">
  <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
</div>

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