Vue基础知识

2019-04-26  本文已影响0人  Grayly吖

Vue基础知识

常用Java Script框架

1、Hello Vue

        // 创建vue的一个实例对象,参数为一个对象
        const vm = new Vue({
            el: '#app',
            // 数据
            data: {
                msg: 'hello Vue',
                msg2: '<button>我是按钮</button>'
            }
        });

2、常用指令

       <div> {{msg}}</div>
       <div v-text="msg"></div>
        <div v-html="msg2"></div>
            <li v-for="(item,index) in students">
                <span>编号: {{index}}</span>
                <span>身份证: {{item.cardNo}}</span>
                <span>姓名:  {{item.name}}</span>
                <span>年龄:  {{item.age}}</span>
            </li>
    <div id="app">
        <ul>
            <li v-for='(value,key) in city'>
                <span>{{key}}</span>  //属性名
                <span>{{value}}</span>  //属性值
            </li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        //实例化vue对象,参数为对象
        new Vue({
            el: '#app',
            data: {
                city: {
                    "cityId": 110100,
                    "name": "北京",
                    "pinyin": "beijing",
                    "isHot": 1
                }
            }
        })
    </script>
        <div v-if="isLogin">
            用户: {{username}}
        </div>
        <div v-else>
            <button>立即登陆</button>
        </div>
        <div v-if="show">  //false时直接消失
            若干内容.............
        </div>
        <div v-show="show">  //false时display隐藏
            若干内容.............
        </div>
    <div id="app">
        <!-- <button v-on:click="toggle">隐藏</button> -->
        <button @click="toggle">{{text}}</button>
        <hr>
        <div v-show="show">
            内容...........
            内容...........
            内容...........
        </div>
    </div>
        <a v-bind:href="url">百度</a>
        <img v-bind:src="imgUrl" alt="">
        <img :src="imgUrl" alt="">
     //active为class名,isActive为属性值
        <!-- 当isActive为true的时候,给button添加active类,否则不添加 -->
       <button :class="{active:isActive}">按钮</button>
        <div :style="{ color: activeColor, fontSize: fontSize + 'px'}"></div>
    <div id="app">
        <input type="text" v-model="username">
    </div>
    <script src="./vue.js"></script>
    <script>
        // 生命周期
        let vm = new Vue({
            el:'#app',
            data: {
                username: 'liben'
            }
        })
上一篇下一篇

猜你喜欢

热点阅读