VueJS(5)---初步練習(5題)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://unpkg.com/vue"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
-----------------------------------------------------
<div id="app">
    {{message}}
</div>
-----------------------------------------------------
<div id="app2">
    <span v-bind:title="message">
        鼠標懸停幾秒鐘查看此處動態綁定的提示信息!
    </span>
</div>
-----------------------------------------------------
<div id="app3">
    <p v-if="seen">現在你看到我了</p>
</div>
-----------------------------------------------------
<div id="app4">
    <p v-for="item in todos">
        {{item.text}}
    </p>
</div>
-----------------------------------------------------
<div id="app5">
    <p>{{ msg }}</p>
    <button v-on:click="reverseMsg">返轉消息</button>
</div>
-----------------------------------------------------
<script type="application/javascript">
    /*聲明*/
    var app = new Vue({
        el:"#app",
        data:{message:"hello vue"}
    })
    /*渲染*/
    var app2 = new Vue({
        el:"#app2",
        data:{
            message:'頁面加載於 ' + new Date().toLocaleString()
        }
    })
    /*條件*/
    var app3 = new Vue({
        el:"#app3",
        data:{
            seen:true
        }
    })
    /*循環*/
    var app4 = new Vue({
        el:"#app4",
        data:{
            todos:[
                {text:'study vue'},
                {text:'study java'},
                {text:'study nodejs'}
            ]
        }
    })
    /*處理用戶輸入*/
    var app5 = new Vue({
        el:"#app5",
        data:{
            msg: 'Hello Vue.js!'
        },
        methods:{
            reverseMsg:function () {
                this.msg = this.msg.split('').reverse().join('');
            }
        }
    })

</script>
</body>
</html>

—————————————————————————————————————————————————–

java架構師項目實戰,高併發集羣分佈式,大數據高可用視頻教程,共760G

下載地址:

https://item.taobao.com/item.htm?id=555888526201

01.高級架構師四十二個階段高
02.Java高級系統培訓架構課程148課時
03.Java高級互聯網架構師課程
04.Java互聯網架構Netty、Nio、Mina等-視頻教程
05.Java高級架構設計2016整理-視頻教程
06.架構師基礎、高級片
07.Java架構師必修linux運維繫列課程
08.Java高級系統培訓架構課程116課時
+
hadoop系列教程,java設計模式與數據結構, Spring Cloud微服務, SpringBoot入門
—————————————————————————————————————————————————–

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章