vue 起步02

v-for =" "循环数组
v-model =" "双向数据绑定  用于表单元素
v-on:事件名=“ ”  绑定事件
v-bind属性名“ ” 绑定属性
v-show=“ ” 控制元素显示隐藏
v-text
v-html
v-once
v-pre

1 v-for

<ul>
            <li v-for="arrs in arrs">{{arrs}}</li>
 </ul>

<script>
        new Vue({ 
            el:'#itany',
            data:{
                arr:[1,2,3,4,5],
            }
        })
    </script>

2 v-model

<div id='app'>
            <input v-model="message">
            <p>{{message}}</p>
</div>
<script src="vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var arr = new Vue({
              el: '#app',
              data: {
                message: 'Hello Vue.js!'
            }
        })
        </script>

3 v-on
 <div id='itany'>
       <button v-on:click='alt'>按钮</button>
   </div>
<script>
      var vm=new Vue({
            el:'#itany',
            data:{
                msg:'hello'
            },
            methods:{
                alt:function(){
                    console.log(vm.msg);
                }
            }
        }
    </script>

4 v-bind
               <div id="itany">
            <img v-bind:src="ct" v-on:click="cts">
        </div>
        <script src="vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            new Vue({
                el:'#itany',
                data:{
                    ct:'image/1.bmp'
                },
                methods:{
                    cts:function(){
                        this.ct='image/2.jpg'
                    }
                }
            })
        </script>

5 v-show
<div class='aa'>
     <h1>{{me}}</h1>
     <h3 v-show="seen">{{me}}</h3>        
     <button v-on:click="fun">回来</button>          
</div>
<script>
      new Vue({
            el:".aa",
            data:{
                  me:"才才",
                  me:“桶桶”,
                  seen:false      
            }
            methods:{
                  fun:function(){
                        this.seen=!this.seen          
                  }
            }
      })
</script>

v-text
v-html
v-once
v-pre

<div id="app">
            <input type="text" v-model="me">
            <p v-html="me">{{me}}</p>
             <h3 v-text='me'>{{me}}</h3>
       
       <a href="" v-once>{{me}}</a>
       
       <h1 v-pre>{{me}}</h1>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            new Vue({
                el:"#app",
                data:{
                    me:'hello Word'
                }
            })
        </script>