Vue之小入门

Vue.js基础教程

最新推荐文章于 2025-12-05 08:37:05 发布

转载最新推荐文章于 2025-12-05 08:37:05 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ZN-225/p/9926268.html

文章标签：

#javascript #ViewUI

Vue之小入门

<div id="app">{{ greeting }}</div>
<script>
    let oDiv = document.getElementById('app');

    oDiv.innerText = 'Hello World';
</script>

代码执行结果：

　　使用Vue实现上个实例的功能：

<script src='./static/vue.min.js'></script>


<div id="app">{{ greeting }}</div>
<script>
    new Vue({
        el: '#app',
        data: {
            greeting: 'Hello Vue',
        }
    })
</script>

　　代码打印结果：

　　v-text

<script src="./static/vue.min.js"></script>
<body>
<div id="app" v-text="greeting"></div>
<script>
    // 数据模板引擎
    // v-开头的指令是帮助我们渲染数据用的
    new Vue({
        el: '#app',
        data: {
            greeting: 'Hello Vue',
        }
    })
</script>
</body>

　　代码打印结果：

　　v-html

<script src="./static/vue.min.js"></script>
<body>
<div id="app" v-html="greeting"></div>
<script>
    new Vue({
        el: '#app',
        data: {
            greeting: '<h1>Hello Vue</h1>'
        }
    })
</script>
</body>

　　代码打印结果：

　　v-for

<script src="./static/vue.min.js"></script>
<body>
    <div id="app">
        <ul>
            <li v-for="aihao in xxoo">{{aihao}}</li>
        </ul>
        <ul>
            <li v-for="student in students">
                姓名：{{student.name}},
                年龄：{{student.age}},
                爱好：{{student.hobby}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                xxoo: ['吃', '喝', '嫖', '赌'],
                students: [
                    {
                        name: '龙达',
                        age: 18,
                        hobby: 'girl',
                    },
                    {
                        name: '小默',
                        age: 19,
                        hobby: 'younggirl',
                    },
                    {
                        name: '小小默',
                        age: 20,
                        hobby: 'she',
                    }
                ]
            }
        })
    </script>
</body>

　　打印结果：

　　v-if / v-else-if / v - else

<script src="./static/vue.min.js"></script>
<body>
    <div id="app">
        <div v-if="role == 'LongDa'">
            <h1>男宾一位！！！</h1>
        </div>
        <div v-else-if="role == 'XiaoXiaoMo'">
            <h1>男宾两位！！！</h1>
        </div>
        <div v-else>
            <h1>滚！！！</h1>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                role: 'LongDa',
            }
        })
    </script>
</body>

　　打印结果：

　　v-show

<script src="./static/vue.min.js"></script>
<body>
    <div id="app">
        <div v-show="isShow">Hello Vue</div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isShow: false,
            }
        })
    </script>
</body>

　　具体实现原理是将div标签的display属性值设置为none。

　　v-bind

<script src="./static/vue.min.js"></script>
    <style>
        .active {
            width: 500px;
            height: 500px;
            background-color: lawngreen;
        }
    </style>
<body>
    <div id="app">
        <a v-bind:href="jingdong">去京东</a>
        <div :class="[isActive]"></div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                jingdong: 'https://www.jd.com',
                isActive: 'active',
            }
        })
    </script>
</body>

　　打印结果：　　

　　v-bind可以省略，直接写：class=['xxoo']

0省略，

转载于:https://www.cnblogs.com/ZN-225/p/9926268.html