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

2019独角兽企业重金招聘Python工程师标准>>>

一起学vue——vue学习总路线

前言

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

引入vue文件

    
    

（这里的script.js是我自己的文件）

数据绑定

html页面：index.html

    
        
        
        
        
    
    
        

            

site:{{site}}

            

name:{{name}}

            

all:{{getall()}}

        

    

详解：

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

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：用于定义属性

运行结果：

 

转载于:https://my.oschina.net/u/3802541/blog/1791826