Vue基本用法


<script type="text/javascript" src="lib/vue.js">script>
<
script>
   
window.onload=function(){
       
var vue = new Vue({
           
el:"#box",//选择器
           
data:{
               
msg:"this ishw.",//数据
               
arr:['apple','banana','orange','pear'],
               
json:{a:'apple',b:'banana',c:'orange'},
               
flag:true
           
},
           
methods:{
               
show: function () {
                   
alert("this isclick ");
               
},
               
add: function () {
                   
alert(this.arr)//this vue对象
                   
this.arr.push("猕猴桃")
                }
,
               
hide: function () {
                   
this.flag=false
               
}
            }
        })
;
   
};
script>

<body>
    <div id="box">
        
        {{msg}}
        <br>
        {{arr}}
        <br>
        {{json}}
        <br>
        
        <input type="text" v-model="msg">
        
        <ul>
            <li v-for="value in arr">
               {{$index}} {{value}}
            li>
        ul>
        <ul>
            <li v-for="item in json">
                {{$index}} {{$key}}-{{item}}
            li>
        ul>
        <br>
        <input type="button" value="show按钮" v-on:dblclick="show()"/>
        <input type="button" value="add按钮" v-on:mouseover="add()"/>
        <input type="button" value="add按钮" v-on:click="hide()"/>
        <br>
        <div v-show="flag" id="mydiv" style="background-color: #4cae4c;width: 90px;height: 90px;">div>
    div>
body>

效果:


你可能感兴趣的:(Vue,vue)