vue1练习1

最新推荐文章于 2024-11-08 17:24:22 发布

ab6787

最新推荐文章于 2024-11-08 17:24:22 发布

阅读量260

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lxj0205/p/10431321.html

版权

---恢复内容开始---

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue练习</title>
    
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>     



<div id="app">{{content}}</div>

<hr/>

<div id="app1">

  <!--双向绑定-->
  
  <input type="text" v-model="inputValue" />

  <!--绑定事件-->

  <button v-on:click="handleBtnClick">提交</button>

  <ul>
 <!--遍历-->
    <li v-for="item in list">{{item}}</li>
  </ul>

</div>


  </body>
  <script type="text/javascript">
 //如果此处Vue是小写，会报错
   var app = new Vue({

      el:'#app',
      data: {

        content:'hello world'
      }

    })

 //延时两秒之后，文字发生变化
   setTimeout(function(){

   app.$data.content='bye bye'
    

   },2000)


   var app1= new Vue({

    el:'#app1',

    data:{

      list: [],

      inputValue:''
    },

    methods:{
      handleBtnClick:function(){

        this.list.push(this.inputValue)
        this.inputValue=''
      }
    }

   })

  </script>
  </html>

---恢复内容结束---

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue练习</title>
    
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>     



<div id="app">{{content}}</div>

<hr/>

<div id="app1">

  <!--双向绑定-->
  
  <input type="text" v-model="inputValue" />

  <!--绑定事件-->

  <button v-on:click="handleBtnClick">提交</button>

  <ul>
 <!--遍历-->
    <li v-for="item in list">{{item}}</li>
  </ul>

</div>


  </body>
  <script type="text/javascript">
 //如果此处Vue是小写，会报错
   var app = new Vue({

      el:'#app',
      data: {

        content:'hello world'
      }

    })

 //延时两秒之后，文字发生变化
   setTimeout(function(){

   app.$data.content='bye bye'
    

   },2000)


   var app1= new Vue({

    el:'#app1',

    data:{

      list: [],

      inputValue:''
    },

    methods:{
      handleBtnClick:function(){

        this.list.push(this.inputValue)
        this.inputValue=''
      }
    }

   })

  </script>
  </html>

<body>

<div id="app">


{{fullName}}


</div>

<script>

//vue生命周期函数，就是Vue实例在某一个时间点会自动执行的函数
    
var vm= new Vue({

    el:'#app',
    data:{

        s1:'DELL',
        s2:'123'

    },
    computed:{

        fullName:{

            get:function(){

                return this.s1 + " " + this.s2
            },

            set:function(value){

                var arr=value.split(" ");

                this.s1=arr[0];
                this.s2=arr[1];
                console.log(value);
            }
        }
    }
    
})


</script>
</body>

<body>

<div id="app">


</div>




<script>

//vue生命周期函数，就是Vue实例在某一个时间点会自动执行的函数
    
var vm= new Vue({

    el:'#app',
    template:"<div>{{test}}</div>",
    data:{

        test:'123456'
    },
    beforeCreate:function(){

        console.log("beforeCreate");
    },
    created:function(){

        console.log("created");
    },
    beforeMount:function(){
         
         console.log(this.$el);
        console.log("beforeMount");
    },
    mounted:function(){
          console.log(this.$el);
        console.log("mounted");
    },
    beforeDestroy:function(){

        console.log("beforeDestroy");
    },
    destroyed:function(){

        console.log("destroyed");
    },
    beforeUpdate:function(){

        console.log("beforeUpdate");
    },
    updated:function(){

        console.log("updated");
    }

    
})


</script>
</body>

 <body> 
  <div id="app">    
<input type="text" v-model="inputvalue">
<button @click="clickbutton">提交</button>
<ul>
  <todo-item v-for="item in list" 
  v-bind:message="item">   
  </todo-item>
</ul>

</div>
  </body>
  <script type="text/javascript">
  //局部组件
  Vue.component('todo-item', { 
     props:['message'],
     template:'<li>{{message}}</li>'
   })

   var app=new Vue({
    el:'#app',
    data:{
      inputvalue:'',
      list:[]
      
    },
    methods:{
      clickbutton:function(){
        this.list.push(this.inputvalue);
        this.inputvalue='';
      }
    }
   })
  </script>

<body>

<div id="app">

    <div @click="handleDivClick"
         
          :class="{activated: isactivated}"

    >hello world</div>





</div>


<script>

    
var vm= new Vue({

el:'#app',

data:{

    isactivated:false
},
methods:{
handleDivClick:function(){

    this.isactivated=!this.isactivated;
}

}
})


</script>
</body>

<body>

<div id="app">

    <div @click="handleDivClick" 
    :style="[styleObj,{fontSize:'20px'}]"  
    >hello world</div>

</div>


<script>

    
var vm= new Vue({

el:'#app',

data:{

styleObj:{

    color:"green"
}
    
},
methods:{
handleDivClick:function(){

    this.styleObj.color=this.styleObj.color==="green"?"red":"green";
}

}
})


</script>
</body>

<body>

<div id="app">

    <div v-if="show==='a' ">this is a </div>
    <div v-else-if="show==='b' ">this is b</div>
    <div v-else>this is others</div>

</div>


<script>

    
var vm= new Vue({

el:'#app',

data:{
    show:"a",

}

})


</script>
</body>

加上KEY值，确保input框不被复用

<body>

<div id="app">

    <div v-if="show">
        用户名：<input key="user"/>
    </div>
    <div v-else>
        密码：<input key="password"/>
    </div>

</div>


<script>

    
var vm= new Vue({

el:'#app',

data:{
    show:false,

}

})


</script>
</body>