天天看點
傳回

vue初學習

第一個vue代碼 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
    //let(變量)/const(常量)
    //程式設計範式：聲明式程式設計
    const app=new Vue({
        el:'#app',//挂載要管理的元素
        data:{//定義資料
            message:'hello!'

        }
        //資料可以是變量也可以是元件
    })
    //元素js的用法(程式設計範式-指令式程式設計)
    //1.建立div元素，設定div屬性
    //2.定義一個變量message
    //3.message放到div中顯示
    //4.修改message元素
    //5.修改後的資料再次替換到div
</script>
</body>
</html>      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <!--這是指令，響應式的-->
        <li v-for="item in movies">{{item}}</li>
    </ul>

</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'hello',
            movies:['星際穿越','大話西遊','少年派的奇幻漂流','盜夢空間']
        }
    })

</script>
</body>
</html>      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">

    目前計數{{count}}
<!--    <button v-on:click="count++">+</button>-->
<!--    <button v-on:click="count--">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>

</div>
<script>
    //文法糖：簡寫
    const vm=new Vue({
        el:'#app',
        data:{
            count:0,
        },
        methods:{
            add:function(){
              this.count++;
              console.log('add')
            },
            sub:function () {
              console.log('sub')
            }
        }
    })


</script>
</body>
</html>
每日随筆 html vue.js 資料 聲明式程式設計
上一篇: Centos 安裝openldap，phpldapadmin，apache
下一篇: Vue學習筆記

繼續閱讀