vue1练习1
---恢复内容开始---
<!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>
