vue第一课——认识数据绑定

前言

上次解决了直接引入报错的问题,今天开始学习。

引入vue文件

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

(这里的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>

详解:

{{}}用于输出对象属性和函数返回值

script文件:script.js

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
            }
        }
    });
};

详解:

el:用于界定数据放在哪里,这里我们将数据放进id名为app的div中

methods:用于定义的函数,可以通过return来返函数值

data:用于定义属性

运行结果:

猜你喜欢

转载自my.oschina.net/u/3802541/blog/1791826