本文介绍了Vue.js的基本语法，包括如何通过绑定样式来设置元素外观，事件处理器的使用，如阻止事件冒泡和限制事件触发次数，以及Vue中表单元素的处理，如v-model和.number修饰符的应用。同时，文章还详细讲解了组件间的通信，包括父组件向子组件传递数据和子组件向父组件传递数据的方法。
Vue基本语法2
一.样式
1.通过传值的方法来绑定样式
2.在:style中设置样式种类时font-size等带-的语句去掉-后字母大写
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src=" https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style type="text/css">
.a{
font-size: 36px;
}
.b{
color: red;
}
</style>
</head>
<body>
<!--定义边界-->
<div id="app">
<p>基本样式绑定</p>
<span class="a">犯我华夏</span>
<span class="b">虽远必诛</span>
<span :class="a">犯我华夏</span>
<span :class="b">虽远必诛</span>
<p>样式二</p>
<span style="font-size: 60px;">犯我华夏</span>
<span :style="{fontSize: e}">虽远必诛</span>
</div>
<script>
new Vue({
el:'#app',
data(){
return {
a:'b',
b:'a',
e:'80px'
}
}
})
</script>
</body>
</html>
运行结果
二.事件处理器
在触发点击嵌套div中的事件时，其上层所有的div中的点击事件都会触发
通过cilck后的.stop指令可以组止其他事件触发
而.once可以使得一个按钮只能够点击一次
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src=" https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style type="text/css">
.one{
height: 400px;
width: 400px;
background-color: beige;
}
.two{
height: 300px;
width: 300px;
background-color: darkblue;
}
.three{
height: 200px;
width: 200px;
background-color: hotpink;
}
.four{
height: 100px;
width: 100px;
background-color:red;
}
</style>
</head>
<body>
<!--定义边界-->
<div id="app">
<div class="one" @click="do_one">
<div class="two" @click="do_two">
<div class="three" @click="do_three">
<div class="four" @click.stop="do_four"></div>
</div>
</div>
</div>
<input v-model="msg"/><button type="button" @click="funa">点我</button>
<button type="button" @click.once="funa">只能点一次</button>
</div>
<script>
new Vue({
el:'#app',
data(){
return {
msg:'默认值'
}
},
methods:{
do_one(){
alert("one")
},
do_two(){
alert("two")
},
do_three(){
alert("three")
},
do_four(){
alert("four")
},
funa(){
alert(this.msg)
}
}
})
</script>
</body>
</html>
运行结果
三.Vue的form表单综合案例
遍历单选框时v-for写在span标签中，而遍历下拉框时，v-for写在select标签中的option标签中
当改变年龄文本的值时再进行数学计算时，该值会被当成一个字符串来进行相加，如年龄默认为10时且不改变时，此时在事件中+10，最终结果为20，若在浏览器中改变该值，如改成20，最终的值会成为2010，在v-model后加上.number可避免该问题
设置勾选确认才能提交按钮事件使用disabled属性，用计算属性来传入该属性的值，若确认勾选则传入false
若未勾选则传入true或者字符串disabled来使属性生效，使提交按钮不可选择
在提交按钮点击事件可以得到表单内全部值
当属性未定义时，控制器会报错，但使用this仍然可以接受该值
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src=" https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!--定义边界-->
<div id="app">
姓名：<input type="text" v-model="name"/><br>
密码：<input type="password" v-model="pwd"/><br>
年龄：<input type="text" v-model.number="age" /><br>
性别：<input type="radio" v-model="sex" name="sex" value="1"/>男
<input type="radio" v-model="sex" name="sex" value="0"/>女<br>
爱好：<span v-for="n in likes">
<input type="checkbox" :value="n.id" v-model="myLike"/>{{n.name}}
</span><br>
职业：<select v-model="myType">
<option v-for="t in types" :value="t.id" >{{t.name}}</option>
</select><br>
备注:<textarea rows="10" cols="20" v-model="remark">
</textarea><br>
确认<input type="checkbox" :value=true v-model="ok"/><br>
<button type="button" @click="do_sub" :disabled="disabled">提交</button>
</div>
<script>
new Vue({
el:'#app',
data(){
return {
name:null,
pwd:null,
age:10,
sex:1,
likes:[
{id:1,name:'抽烟'},
{id:2,name:'喝酒'},
{id:3,name:'烫头'}
],
types:[
{id:1,name:'学生'},
{id:2,name:'社员'},
{id:3,name:'街溜子'}
],
remark:'做个人吧',
ok:false,
myLike:[],
myType:null
}
},
methods:{
do_sub(){
var obj={
name:this.name,
pwd:this.pwd,
age:this.age+10,
sex:this.sex,
likes:this.myLike,
type:this.myType,
remark:this.remark
}
console.log(obj)
}
},
computed:{
disabled(){
return this.ok ? false:true ;
}
}
})
</script>
</body>
</html>
运行结果：
四.组件通信(父传子)
在组件中props中创建的元素可以获取到标签中设置的该元素的值传递到组件中
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src=" https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!--定义边界-->
<div id="app">
<my-button m='zs'></my-button>
<my-button m='ww'></my-button>
</div>
<script>
new Vue({
el:'#app',
components:{
'my-button':{
props:['m']
,template:'<button @click="do_sub">{{m}}提交审核{{n}}次</button>'
,data(){
return{
n:0
}
}
,methods:{
do_sub(){
this.n++;
}
}
}
},
data(){
return {
}
}
})
</script>
</body>
</html>
运行结果
五.组件通信(子传父)
通过组件内的绑定事件来传递值
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src=" https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!--定义边界-->
<div id="app">
<my-button m='zs'@three-click="funca"></my-button>
<my-button m='ww' @four-click="funca"></my-button>
</div>
<script>
new Vue({
el:'#app',
components:{
'my-button':{
props:['m']
,template:'<button @click="do_sub">{{m}}提交审核{{n}}次</button>'
,data(){
return{
n:0
}
}
,methods:{
do_sub(){
let name='张三';
let sex='男';
let hobby='n';
this.n++;
//通过自定义事件来完成
if(this.n % 3==0)
this.$emit('three-click',name,sex,hobby);
if(this.n % 4==0)
this.$emit('four-click',name,sex,hobby);
}
}
}
},
data(){
return {
}
},
methods:{
funca(a,b,c){
console.log(a,b,c)
},
funca(a,b,c){
console.log(a,b,c)
}
}
})
</script>
</body>
</html>
结果:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
