vue.js中的事件绑定-01笔记
之前发生了一个错误，事件绑定一直不成功，就是下面的错误代码
<div id="app">当前计数：{{count}}<button v-if="0">大家好0</button><button v-if="1">大家好1</button><img v-bind:src="imgurl" alt=""><a :href="aurl">百度一下</a></div><button v-on:click="count++">+</button><button v-on:click="sub">-</button>
就是因为 button没有放进div id=”app”的div 里面，所有没有挂载，导致了事件没有绑定成功
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/vue.js"></script></head><body><div id="app">当前计数：{{count}}<button v-on:click="count++">+</button><button v-on:click="sub">-</button><button v-if="0">大家好0</button><button v-if="1">大家好1</button><img v-bind:src="imgurl" alt=""><a :href="aurl">百度一下</a></div><div id="a"></div><script>const app = new Vue({el: "#app",data: {count:1,movies:["海贼王","星际穿越","火影","faker"],imgurl:"1.jpg",aurl:"www.baidu.com"},methods:{sub:function(){this.count--;console.log("执行了代码");}}})</script></body></html>
1.插值语句：
v-once
v-html
v-text
v-pre
v-cloak
2.动态绑定属性
一般用于图片的src 还有 a标签的 链接
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/vue.js"></script></head><body><div id="app"><img :src="imgurl"><a :href="ahref">百度的链接</a></div></body><script>const app = new Vue({el: "#app",data: {imgurl: "picture/1.jpg",ahref: "https://www.baidu.com"}})</script></html>
3.计算属性
就是在Vue下面有一个computed 的属性，和 methods 区别就是 computed一个只需要运行一次，有缓存 ,methods 用一次调用一次
4.事件的监听
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/vue.js"></script></head><body><div id="app"><button @click="btnclick()">按钮一</button><button @click="btnclick()">按钮二</button><!-- <button @click="console.log('大家好')">按钮一</button> --><button @click="btnclick2">按钮三</button><button @click="btnclick3('joker',$event)">按钮四</button><button>按钮五</button></div><script>const app=new Vue({el:"#app",data:{name:"joker"},methods:{btnclick(){console.log("joker 你好 btnclick")},//这个是传入事件btnclick2(abc){console.log("说谎家 你好 btnclic2")console.log(abc)},//又想传入参数，还有事件btnclick3(abc,event){console.log("你好 btnclic3")console.log(abc)console.log(event)}}})</script></body></html>
按键的监听：
<input type="text" @keyup="keyup"><input type="text" @keyup.enter="keyup">
5.条件判断
v-if
v-else-if
v-else
6.循环遍历
v-for注意点，其中还可以放入key ,index ，等我学到的再次更新v-for="(item,index) in movies"
蔚落
忘是亡心i
小鱼儿
野性酷女
左手的ㄟ右手
还没有评论，来说两句吧...