vue第一課——認識數據綁定

一塊兒學vue——vue學習總路線html

前言

上次解決了直接引入報錯的問題,今天開始學習。vue

引入vue文件

    <script src="../js/vue.min.js"></script>
    <script src="script.js"></script>app

(這裏的script.js是我本身的文件)函數

數據綁定

html頁面:index.html學習

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue起步</title>
        <script src="../js/vue.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="app">
            <p>site:{{site}}</p>
            <p>name:{{name}}</p>
            <p>all:{{getall()}}</p>
        </div>
    </body>
</html>this

詳解:spa

{{}}用於輸出對象屬性和函數返回值

script文件:script.js.net

window.onload = function(){
    var datalist = {
        site:"www.coolxu.com",
        name:"hello welcome to study vue"
    };
    new Vue({
        el:"#app",
        data:datalist,
        methods:{
            getall:function(){
                return this.site+","+this.name
            }
        }
    });
};htm

詳解:對象

el:用於界定數據放在哪裏,這裏咱們將數據放進id名爲app的div中

methods:用於定義的函數,能夠經過return來返函數值

data:用於定義屬性

運行結果:

相關文章
相關標籤/搜索