const 的使用
ES6中优先使用const，只有需要改变某一个标识符时才用let
注意1：const定义的是常量，不能修改，且必须进行赋值
注意2：常量定义的对象不能改变，但是可以改变对象的内部属性
<script>
const obj ={
name: 'why',
age: 18,
sex: 'man',
}
console.log(obj.age)//结果为18
obj.age = 20
console.log(obj.age)//结果为20
const app = new Vue({
el:'#app',
data:{
}
})
</script>
事件监听 v-on 语法糖 @
参数问题
- 事件调用不需要参数的函数是可以省略小括号
<button @click="add">按钮1</button>
<button @click="sub">按钮2</button>
写函数时省略了小括号，但是方法本身是需要一个参数的时候，这个时候Vue会默认将浏览器生成的event事件对象作为参数传入方法中
写函数时没有传递参数，但是方法本身需要一个参数时，则会提示undefind
写函数式传递两个参数时，且需要传递event事件对象时
- 当没有传递参数时，第一个参数为event事件，第二个则为undefinded
- 正确的写法，$event固定的写法！，数字不需要单引号，字符串需要单引号，如果不加单引号字符串则被当成一个变量
<button @click="btnClick4('abc',$event)">按钮4</button>
如何阻止事件冒泡 .stop
<div id="app">
<div @click="divClick">
<button @click="btnClick">按钮</button>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
},
methods:{
divClick(){
console.log('div被点击了')
},
btnClick(){
console.log('btn被点击了');
},
},
})
</script>
<div id="app">
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
},
methods:{
divClick(){
console.log('div被点击了')
},
btnClick(){
console.log('btn被点击了');
},
},
})
</script>
阻止默认事件 .prevent
如表单默认提交时，阻止它，由自己交提交
<form action="baudi">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
const app = new Vue({
el:'#app',
data:{
},
methods:{
submitClick(){
console.log('哎我想自己交');
}
},
})
监听某个键盘的键的点击 @keyup
<input type="text" @keyup.enter="KeyUp">
监听自定义组件 .native
<cpn @click.native="cpnClick"></cpn>
方法只触发一次 .once
<button @click.once="btnClick">按钮6</button>
条件判断 v-if v-else-if v-else
如果逻辑判断比较复杂其实使用computed(计算属性)更好！
<h2 v-if="show">{{message}}</h2>
<h2 v-else>看不见我</h2>
<h2 v-if="score>90">优秀</h2>
<h2 v-else-if="score>80">良好</h2>
<h2 v-else="score>60">及格</h2>
<script>
const app = new Vue({
el:'#app',
data:{
message:'看到我了',
show:true,
score:90,
},
)}
Vue在进行DOM渲染时，出于对性能的考虑会先抽象为虚拟DOM放到内存中，会尽可能的复用已经存在的元素，而不是重新创建新的元素。 因此有些时候原来的input元素会在else中继续使用
解决办法：给input加key且key要不同
<div id="app">
<form action="#">
<span v-if="type">
<label for="username">账号</label>
<input type="text" value="" id="username" key="usename" placeholder="请输入你的账号">
<button @click.prevent="changeType">账号登录</button>
</span>
<span v-else>
<label for="email">邮箱</label>
<input type="email" id="email" value="" key="email" placeholder="请输入你的邮箱">
<button @click.prevent="changeType">邮箱登录</button>
</span>
</form>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
type: true
},
methods:{
changeType(){
this.type = !this.type
},
},
})
</script>
