博客目标
讲解Vue的基本使用(下)
2.1 样式绑定
2.1.1 class绑定
<style>
/* 定义演样式 */
.a{
background-color: green;
}
.b{
background-color: red;
}
.c{
font-size: 60px;
}
</style>
<body>
<!-- vue所管理的边界 -->
<div>
<div id="app">
<ul>
<li>样式绑定</li>
<span :class="aclz">技术小白,only老k</span>
<span :class="bclz">only老k,我为自己带盐</span>
</ul>
</div>
</div>
</body>
<script>
//通过vue实例去渲染vue所管理的边界
new Vue({
el:'#app',
data() {
return {
aclz:'a',
bclz:['b','c']
};
}
})
</script>
效果图:
2.2 事件处理器
2.2.1 阻止单击事件冒泡
核心方法:
@click.stop="a"
案例演示:只提示a
<style>
/* 定义演样式 */
.a{
background-color: green;
}
.b{
background-color: red;
}
.c{
font-size: 60px;
}
div{
padding: 25px;
}
</style>
<body>
<!-- vue所管理的边界 -->
<div>
<div id="app">
<ul>
<li>样式绑定
<span :class="aclz">技术小白,only老k</span>
<span :class="bclz">only老k,我为自己带盐</span>
</li>
<li>
<h3>事件冒泡 我点击一个颜色只弹出一个提示而不是外层也弹出</h3>
<div style="width: 300px;height: 300px;background-color: #008000;"@click="d">
<div style="width: 200px;height: 200px;background-color: #FF0000;"@click="c">
<div style="width: 100px;height: 100px;background-color: antiquewhite;"@click="b">
<div style="width: 50px;height: 50px;background-color: cadetblue;"@click.stop="a">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script>
//通过vue实例去渲染vue所管理的边界
new Vue({
el:'#app',
data() {
return {
aclz:'a',
bclz:['b','c']
};
},
methods:{
a(){
alert("事件A触发!!!");
},
b(){
alert("事件B触发!!!");
},
c(){
alert("事件C触发!!!");
},
d(){
alert("事件D触发!!!");
}
}
})
</script>
效果图:
2.2.2 click事件只能点击一次
核心方法:
@click.once="send"
<style>
/* 定义演样式 */
.a{
background-color: green;
}
.b{
background-color: red;
}
.c{
font-size: 60px;
}
div{
padding: 25px;
}
</style>
<body>
<!-- vue所管理的边界 -->
<div>
<div id="app">
<ul>
<li>样式绑定
<span :class="aclz">技术小白,only老k</span>
<span :class="bclz">only老k,我为自己带盐</span>
</li>
<li>
<h3>事件冒泡 我点击一个颜色只弹出一个提示而不是外层也弹出</h3>
<div style="width: 300px;height: 300px;background-color: #008000;"@click="d">
<div style="width: 200px;height: 200px;background-color: #FF0000;"@click="c">
<div style="width: 100px;height: 100px;background-color: antiquewhite;"@click="b">
<div style="width: 50px;height: 50px;background-color: cadetblue;"@click.stop="a">
</div>
</div>
</div>
</div>
</li>
<li>模拟qq消息发送(讲解的是某些按钮只能点击一次)</li>
{{info}}<input v-model="msg" />
<button @click="send">发送多次 </button>
<button @click.once="send">只能发送一次 </button>
</ul>
</div>
</div>
</body>
<script>
//通过vue实例去渲染vue所管理的边界
new Vue({
el:'#app',
data() {
return {
aclz:'a',
bclz:['b','c'],
msg:'',
info:''
};
},
methods:{
a(){
alert("事件A触发!!!");
},
b(){
alert("事件B触发!!!");
},
c(){
alert("事件C触发!!!");
},
d(){
alert("事件D触发!!!");
},
send(){
this.info=this.msg;
this.msg='';
}
}
})
</script>
效果:
以及本身按回车发送消息
核心代码:(加入到input标签中)
v-on:keyup.enter="send"
2.3 Vue组件
2.3.1 局部组件的注册
<body>
<!-- vue所管理的边界 -->
<div>
<div id="app">
<ul>
<li>
<h3>局部组件的注册</h3>
<my-button></my-button>
</li>
<li>
<h3>父子组件的传参(父传子)</h3>
<my-button></my-button>
</li>
<li>
<h3>父子组件的传参(子传父)</h3>
<my-button></my-button>
</li>
<li>
<h3>全局组件的注册</h3>
<my-button></my-button>
</li>
</ul>
</div>
</div>
</body>
<script>
//通过vue实例去渲染vue所管理的边界
new Vue({
el:'#app',
data() {
return {
};
},
components:{ //components组件 template模板
'my-button':{
template:'<button v-on:click="add">被zs点击了{{n}}次</button>',
data() {
return {
n:1
};
},
methods:{
add(){
this.n=this.n+1;
}
}
}
}
})
</script>
效果图:
原始html有的功能在vue中也能使用,属性的绑定,事件的绑定,vue实例的变量在自定义组件中都能用
2.3.2 父子组件传参 (父传子)案例:传递m到局部组件中
<li>
<h3>父子组件的传参(父传子)</h3>
<my-button m="zs"></my-button>
</li>
<script>
//通过vue实例去渲染vue所管理的边界
new Vue({
el:'#app',
data() {
return {
};
},
components:{
'my-button':{
props:["m"],
template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
data() {
return {
n:1
};
},
methods:{
add(){
this.n=this.n+1;
}
}
}
}
})
</script>
效果图:
2.3.2 父子组件传参 (子传父) 案例:将自定义组件内部的n传出去 通过自定义事件去完成
<body>
<!-- vue所管理的边界 -->
<div>
<div id="app">
<ul>
<li>
<h3>局部组件的注册</h3>
<my-button></my-button>
</li>
<li>
<h3>父子组件的传参(父传子)</h3>
<my-button m="zs"></my-button>
<my-button m="lx"></my-button>
</li>
<li>
<h3>父子组件的传参(子传父)</h3>
<my-button v-on:three-click="getData"></my-button>
接收自定义组件中内部的变量值:{{innerNum}}
</li>
<li>
<h3>全局组件的注册</h3>
<my-button></my-button>
</li>
</ul>
</div>
</div>
</body>
<script>
//通过vue实例去渲染vue所管理的边界
new Vue({
el:'#app',
data() {
return {
innerNum:1
};
},
methods:{
getData(v){
this.innerNum=v;
}
},
components:{
'my-button':{
props:["m"],
template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
data() {
return {
n:1
};
},
methods:{
add(){
this.n=this.n+1;
//自定义一个三击事件
if(this.n%3==0){
this.$emit('three-click',this.n)
}
}
}
}
}
})
</script>
效果:
<body>
<!-- vue所管理的边界 -->
<div>
<div id="app">
<ul>
<li>
<h3>局部组件的注册</h3>
<my-button></my-button>
</li>
<li>
<h3>父子组件的传参(父传子)</h3>
<my-button m="zs"></my-button>
<my-button m="lx"></my-button>
</li>
<li>
<h3>父子组件的传参(子传父)</h3>
<my-button v-on:three-click="getData"></my-button>
接收自定义组件中内部的变量值:{{innerNum}}
作者:{{au}}
</li>
<li>
<h3>全局组件的注册</h3>
<my-button></my-button>
</li>
</ul>
</div>
</div>
</body>
<script>
//通过vue实例去渲染vue所管理的边界
new Vue({
el:'#app',
data() {
return {
innerNum:1,
au:''
};
},
methods:{
getData(v,b){
this.innerNum=v;
this.au=b;
}
},
components:{
'my-button':{
props:["m"],
template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
data() {
return {
n:1,
auther:'only老k'
};
},
methods:{
add(){
this.n=this.n+1;
//自定义一个三击事件
if(this.n%3==0){
this.$emit('three-click',this.n,this.auther)
}
}
}
}
}
})
</script>
传递两个参数
2.3.3 全局组件的注册
<li>
<h3>全局组件的注册</h3>
<my-button2></my-button2>
</li>
写入到script中定义即可
Vue.component('my-button2',{
props:["m"],
template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
data() {
return {
n:1,
auther:'only老k'
};
},
methods:{
add(){
this.n=this.n+1;
//自定义一个三击事件
if(this.n%3==0){
this.$emit('three-click',this.n,this.auther)
}
}
}
})
效果图: