vue脚手架基础demo_vue 脚手架 demo

            Msg: "远方的梦想"
        }
}

}

### 数据类型demo5


parseInt格式化整数类型


![](https://img-blog.csdnimg.cn/55a178bd03d34499abd6f2c6c266215e.png)

个人工资计算器

基本工资：

岗位工资：

月度奖金：

综合补贴：

扣款金额：

应发工资：{{parseInt(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)-parseInt(a5)}}元

### v-bind\_demo6


 “:” 是指令 “v-bind”的缩写


![](https://img-blog.csdnimg.cn/d176765d05b643beb0ed41945d518068.png)

### :class\_demo7


绑定样式


![](https://img-blog.csdnimg.cn/c3c49c1ecef94e7d91d8ed3d8b19d021.png)

文字颜色 背景颜色 文字大小 边框 边框圆角 居中

---

风云·雄霸天下

### 图片轮播\_demo8


图片会每2.5秒更换一张

}

### v-if v-else——demo9


未选中状态


![](https://img-blog.csdnimg.cn/d08bb06dbf4b42ada81c9796afcdf504.png)


选中状态


![](https://img-blog.csdnimg.cn/ce9d7df8af364fcfbc010c3c5283ddab.png)

登录/注册

---

账号:

密码:

二次密码:

注册

账号:

密码:

登录

```

按钮事件——demo10

<template>
        <div>
            <p v-on:click="test1">你是一个好人</p>
            <p v-on:click="test2">你是俩个好人</p>
        </div>
</template>
<script>
export default {
    name:"demo1",
    data:function(){
        
    },
                methods: {
                test1: function() {
                    alert("你确定是一个好人，但是咱们不合适。");
                },
                test2: function() {
                    alert("你确定是两个好人，但是咱们不合适。");
                }
            }
}
</script>

选项卡demo11

<template>
        <div id="show">
            <div class="divs">
                <!--选项卡一-->
                <div class="btn" v-on:click="choose(1)">选项卡一</div> &nbsp;
                <!--选项卡二-->
                <div class="btn" v-on:click="choose(2)">选项卡二</div>
            </div>
            <div style="clear:both"></div>
            <div id="one" style="color: red">我是选项卡一的内容</div>
            <div id="two" style="color: skyblue;display: none;">我是选项卡二的内容</div>
        </div>
</template>
<script>
export default {
    name:"demo1",
    data:function(){
        
    },
            created() {
                document.getElementById("two").style.display = "";
            },
            methods: {
                choose: function(o) {
                    if (o == "1") {
                        document.getElementById("one").style.display = "";
                        document.getElementById("two").style.display = "none";
                    } else {
                        document.getElementById("one").style.display = "none";
                        document.getElementById("two").style.display = "";
                    }
                }
            }
}
</script>
    <style>
    #show{
        width:80%;
        font-size: 1.2rem;
    }
        .divs div {
            float: left;
        }
        .btn{
            border:1px solid red;
            margin-left: 50px;
        }
        #one,#two{
            border:1px solid black;
            height: 200px;


#### react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）



![](https://img-blog.csdnimg.cn/img_convert/dd9d5d4eda037acc833c996eec92ed02.webp?x-oss-process=image/format,png)

      border:1px solid red;
            margin-left: 50px;
        }
        #one,#two{
            border:1px solid black;
            height: 200px;


#### react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）



[外链图片转存中...(img-7wKRhXsA-1719231165822)]

![](https://img-blog.csdnimg.cn/img_convert/4710efbb757f4f9744560c024a857968.webp?x-oss-process=image/format,png)