vue.js入门demo

最新推荐文章于 2023-01-08 15:13:02 发布

yuell102

最新推荐文章于 2023-01-08 15:13:02 发布

阅读量159

点赞数

分类专栏： vue 学习demo

本文链接：https://blog.csdn.net/yuell102/article/details/106589472

版权

学习demo 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的第一个入门案例</title>
</head>
<body>
<div id="app"></span><!-- 作用范围以内都能使用  {{变量名}}-->
    <p>{{msg}}</p>
    <p>用户名称{{user.username}}</p>
    <p>用户密码{{user.pwd}}</p>
    <p>用户名称{{users[0].username}}</p>
    <p>用户密码{{users[0].pwd}}</p>
    <p>{{min.toUpperCase()}}</p>
    <p>{{min+"：我是小写"}}</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",<!-- el 里必须带双引号 id #app  class .app  与div中对映-->
        data:{
            msg:"你好",
            user:{"username":"张三","pwd":123456},
            users:[{"username":"张三","pwd":123456},{"username":"李四","pwd":123456}],
            min:"abcd",
        }
    });
</script>
</body>
</html>

1.vue实例（对象）中el属性：代表Vue的作用范围，日后Vue的作用范围内都可以使用Vue的语法

2.vue实例（对象）中data属性：用来给Vue实例绑定一些相关数据，绑定的数据可以通过{{变量名}}在Vue作用范围内取出

3.在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式，运算符，调用相关方法，以及逻辑运算等

4.el属相中可以书写任意的CSS选择器[jquery选择器]，但是在使用Vue开发是推荐使用 id选择器

v-text与v-thml的区别

v-text会将数据原样渲染到标签中，会覆盖原标签中的数据，可以避免插值闪烁

v-thml会将HTML中的标签解析后渲染到标签中，会覆盖原标签中的数据，可以避免插值闪烁

绑定事件v-on:click 与@:click

<!DOCTYPE html>
<html lang="en" xmlns:v-no="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue的第一个入门案例</title>
</head>
<body>
<div id="app"></span>
    <input type="button" value="+" @click="addCount">
<!--    <input type="button" value="+" v-no:click="addCount">  与上面一样作用-->
    <p v-text="count_1"></p>
    <input type="button" value="-" @click="delCount">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            count_1:1,
        },methods:{
            // delCount:function(){
            //  与下面一样
            // },
            delCount(){
                if(this.count_1<2){
                    alert("不能再减了");
                    return;
                }
                --this.count_1;
            },addCount(){a
                if(this.count_1>9){
                    alert("不能再加了");
                    return;
                }
                ++this.count_1;
            }
        },
    });
</script>
</body>
</html>

v-bind与:相同 v-if v-show

<!DOCTYPE html>
<html lang="en" xmlns:v-no="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue的第一个入门案例</title>
    <style>
        .red{
            border: red solid 2px;
        }
    </style>
</head>
<body>
<div id="app"></span>
<!--    <input type="button" v-bind:class="{red:showClass}" value="变颜色" @click="showClass_1">-->
    <input type="button" :class="{red:showClass}" value="变颜色" @click="showClass_1">
    <input type="button" v-show="showClass" value="太阳">
    <input type="button" v-if="!showClass" value="黑">
    <input type="button" v-if="showClass" value="白">

</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            showClass:false,
        },methods:{
            showClass_1(){
                this.showClass = !this.showClass;
            },
        },
    });
</script>
</body>
</html>

yuell102

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js入门demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue的第一个入门案例</title></head><body><div id="app"></span> <p>{{msg}}</p&.
复制链接

扫一扫