Vue之小入门

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省略,

posted @ 2018-11-07 22:35  AKA绒滑服贵  阅读(131)  评论(0编辑  收藏  举报