组件 父传子 props: [''],,子传父总结 $emit
阻止跳转 .prevent
<a href="https://www.xxx.com" @click.prevent="注:这个方法名" >点击不跳转</a>
用户只能执行一次 点击一次 .once
<button @click.once="onSubmit" @keyup.enter.once="onSubmit">注册测试回车 并且只能点一次</button></button>
删除一个数组 数组名.splice
转换为数组类型 .number parseInt(a)
html随机从数组里取数
var sj= ["小红","小黄","小兰"];
var a= Math.floor((Math.random()*sj.length));
console.log(sj[a]);
// alert(sj[a)
组件-----
组件父类向子类传值 示例
props:{
sz:Array,
name:name
},
数组用这个接收:Array
<template id="zl" >
<div style="border: solid 3px red;width: 1300px;height: 300px;">
我的爸爸是:{{name}}
</div>
</template>
<div id="fl" style="border: solid 3px blue; width: 1700;height: 900px;">
<zl></zl>
</div>
<script>
var zl={
template:'#zl',
data() {
return {
}
},
props: ['name'],
}
new Vue({
el:'#app'
,methods: {
},
components: {
'zl':zl
},
data() {
return {
,name:'WYM',
}
},
})
</script>
组件子类向父类传值 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/vue.js"> </script>
<script src="/axios-0.18.0.js"> </script>
</head>
<body>
<template id="zl">
<!-- $emit('aaa',ziti) $emit 把数据传向父类用的 aaa是一个别名 ziti 是一个参数 $event可以传子类的全部参数,用不到可不写 -->
<button @click="$emit('aaa',ziti,$event)">我是子类,我要让上面的字变大</button>
</template>
<div id="fl">
<span id="yjh" style="font-size: 1px;" >我是一句话</span><br>
<zilei @aaa="siz"></zilei> <!-- @aaa="siz" @aaa是上面的一个别名 siz 是下面方法里的一个方法 -->
</div>
<script>
var zl={
methods: {
},
data() {
return {
ziti:6
}
},
template:'#zl' //这个是上面的子类的id 比较容易忘 template 不要忘记 id记得这里加#
}
new Vue({
el:'#fl'
,data() {
return {
si:0
}
},methods: {
siz:function(a,event){ //a 是上面传的ziti参数的别名 event接收上面的全部参数,用不到可不写
console.log(event)
this.si = this.si+5+a
document.getElementById("yjh").style="font-size:"+this.si+"px;" //这个是上面的子类的id
}
}
,components: {
'zilei':zl //components使用多个组件可以(子类) 'zilei':zl 'zilei'单引号里的是上面div 使用的标签别名 zl 是上面var的组件(子类)的功能参数
}
})
</script>
</body>
</html
One journey ends, another begins.
凡是过往,皆为序章。