day27Vue基础

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue基础</title>
        <script type="text/javascript"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!--1.设置标签内容-->
        <p id="app1">
            {{name}}
        </p>
        
        <div id="app2">
            <p>{{pTxet}}</p>
            <a href="">{{aTitle}}</a>
            <h1>{{h1Txet}}</h1>
        </div>
        
        <div id="app3">
            <img v-bind:src="imgurl" v-bind:title="name"/>
        </div>
        
        <div id="app4">
            <!--如果message的值是空就隐藏，不是就显示-->
            <p v-if='message'>内容是:{{message}}</p>
            <!--如果message的值是123就显示,否则就隐藏-->
            <p v-if="message=='123'">内容是:{{message}}</p>
        </div>
        
        <div id="app5">
            <ul>
                <li v-for="name in names">{{name}}</li>
            </ul>
        </div>
        
        
    </body>
</html>
<script type="text/javascript">
    /*
     Vue主要包含两个部分：Vue对象和指令
     1.Vue对象
     var 对象名 = new Vue（{
        el：关键对象的选择器
        data：数据对象（属性和值自己决定）
        methods：方法对象（属性对应的值是方法）
     }）
     */
    
    //1.控制标签显示
    var aap1 = new Vue({
        el:'#app1',
        data:{
            message:'我是P标签',
            name:'初识Vue',
        }
    })
    var app2 = new Vue({
        el:'#app2',
        data:{
            pTxet:'我是段落',
            aTitle:'百度一下',
            h1Txet:'我是H1'
        }
    })
    
    //2.设置标签属性
    /*
     v-bind：属性 = 'Vue属性名'
    */
    var app3 = new Vue({
        el:'#app3',
        data:{
            imgurl:'img/luffy.jpg',
            name:'路飞'
        }
    })
    
    /*
    3.if.语句
    v-if = '条件语句' -- 如果条件语句的结果是true，标签就显示，否则就不显示
    */
    var app4 = new Vue({
        el:'#app4',
        data:{
            message:'123'
        }
    })
    /*
    4.循环结构 
    v-for="变量 in 数组属性"
    */
    var app5 = new Vue({
        el:'#app5',
        data:{
            names:['Python','Java','H5','UI']
        }
    })
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <p>{{num}}</p>
            <button v-on:click="addAction">加1</button>
        </div>
        
        <div id="app2">
            <p>{{message}}</p>
            <input v-model="message"/>
        </div>
    </body>
</html>
<script type="text/javascript">
    //1.单向事件绑定
    
    // v-on:事件 = "方法名 "
    var app1 = new Vue({
        el:'#app1',
        data:{
            num:0
        },
        methods:{
            addAction:function(){
                this.num++
            }
        }
    })
    
    //2.input标签双向绑定
    
    // v-model='Vue对象属性名'
    var app2 = new Vue({
        el:'#app2',
        data:{
            message:''
        },
        methods:{
            addAction:function(){
                this.num++
            }
        }
    })
</script>

day27Vue基础

推荐阅读更多精彩内容