vue基础基础学习

<div id="app"> <!-- v-cloak指令的用法 1.提供样式: [v-cloak]{ display: none; } 2. 在插值表达式所在标签中添加v-cloak指令 --> <div v-cloak>{{msg}}</div> <!-- v-text="msg" 纯文本 --> <div v-text="msg"></div> <!-- v-html="msg1" html片段 --> <div v-html="msg1"></div> <!-- v-pre="msg1" 显示原始信息,跳过编译 --> <div v-pre>{{msg}}</div> <!-- v-once 只编译一次,后续数据不再具有响应试 --> <div v-once>{{msg}}</div> <!-- 双向数据绑定, --> <input type="text" v-model="msg"/> <!-- 事件绑定,$event事件对象 event.target.innerHTML获取元素内容 event.target.tagName 标签名字 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的地一个参数 2.如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且世界对象名称固定$event --> <div v-text="num"></div> <button v-on:click="num++">点 击事件</button> <button @click="num++">简单写法</button> <button @click="handle">函数不加()写法</button> <button @click="handle(123,45,$event)">函数加()写法</button> <!-- 时间修饰符 stop 阻止 .prevent 阻止默认行为 --> <div v-on:click="handel0"> <button v-on:click.stop="handel2">时间修饰</button> <a href="http://www.baidu.com" @click.prevent="handel2">百度</a> </div> <!-- 键盘事件 v-on:keyup.enter="submit" --> <hr> 用户名:<input type="text" v-on:keyup.delete="clearcontent" v-model="user"/> 密码:<input type="text" v-on:keyup.enter="submit" v-model="pwd"/> <button @click="submit">提交</button> <!-- 自定义按键修饰符 每个按键都有i一个唯一的值, --> <hr> <input type="text" v-on:keyup.65="keyups" v-model="user"/> <!-- 属性绑定 v-bind:href="" 简写 :href="" --> <hr> <a v-bind:href="baidu">百度</a> <hr> <!-- input 事件 --> <input type="text" :value="baidu" v-on:input="inputs"/> <input type="text" :value="baidu" v-on:input="baidu=$event.target.value"/> <!-- 对象样式绑定 :class="{active:isAc}" 数组样式绑定 :class="[activeclass,errorclass]" --> <!-- <div :class="{active:isAc,error:isAc}"></div> --> <div :class="[activeclass,errorclass]"></div> <!-- 对象样式绑定 style --> <hr> <div :style="{border:borderstyle,width:widthstyle}"></div> <hr> <!-- v-if,v-else-if,v-else 分支 v-show display:none --> <div v-if="score>=90">好</div> <div v-else-if="score>70&&score<=80">还可以</div> <div v-else>差</div> <div v-show="flag">我是测试v-show</div> <hr> <!-- 循环结构 <l1 v-for="item in fruits"></l1> <l1 v-for="(item,index) in fruits"></l1> key 的作用,帮助Vue区分不同的元素 --> <div>水果列表</div> <ul> <li v-for="(item,index) in fruits" :key="index">{{item+"----"+index}}</li> </ul> <!-- 使用v-for进行对象遍历 --> <hr> <div v-for="(v,k,i) in obj">{{v+"======="+k+"====="+i}}</div> <hr> <!-- 案例: --> <ul> <li v-for="(item,index) in image" :key="item.id" :class="cindex==index?'active1':''" @click="change(index)">{{item.name}}</li> </ul> <img v-for="(item,index) in image" :src="item.img" :class="cindex==index?'image':''"/> <script> var vm = new Vue({ el:"#app", data:{ cindex:0, image:[ {id:1,name:"apple",img:"http://www.1217zy.vip:81/up/20200303171531668.jpg"}, {id:2,name:"orange",img:"http://www.1217zy.vip:81/up/20200303171644881.jpg"}, {id:3,name:"banana",img:"http://www.1217zy.vip:81/up/20200303171457324.jpg"}, ], obj:{ name:"1", age:"2", gender:"3", }, fruits:['apple','orange','banana'], flag:false, score:90, widthstyle:"100px", borderstyle:'1px solid red', activeclass:'active', errorclass:"error", isAc:true, msg:"hello", user:"", pwd:"", num:0, baidu:"http://www.baidu.com", msg1:"<h1>html</h1>" }, methods:{ handle:function(p1,p2,event){ console.log(p1,p2) console.log(event.target.innerHTML) // num++ 这里的this是vue的实例对象 this.num++; }, handel0:function(){ this.num++; }, handel2:function(event){ // 传统方式阻止默认行为 // event.stopPropagation(); }, submit:function(){ // enter 按钮 var data = parseInt(this.user)+parseInt(this.pwd) alert(data) }, clearcontent:function(){ // delete事件 this.user="" }, keyups:function(event){ // 键盘事件 alert(event.keyCode) }, inputs:function(event){ // input事件 this.baidu = event.target.value; }, change:function(index){ this.cindex = index } } }) </script>