vue2.0入门教程

Vue
渐进式——易用、灵活、高效
没有太多限制的JavaScript框架
两种使用方式
1、 引入cdn

2、 命令行工具搭建脚手架
el属性：element需要获取的元素，一定是html中的根容器元素
data属性：用于数据的存储，本质是对象，key和value自定义
初始vue双花括号中的内容放入了一个虚拟dom通过它插入dom中
在Vue中可以直接拿到属性在方法中使用
Index.html




Vue.js

{{ greet(‘night’) }}

Name: {{ name }}

Job: {{ job }}

app.js
//实例化vue对象
new Vue({
el:”#vue-app”,
data:{
name:”米斯特”,
job:”web开发”
},
methods:{

    greet: function(time){
        return 'Good '+ time +" " +this.name + "!";
    }
}

});

/*
*el:element 需要获取的元素，一定是html中的根容器元素
*data:用于数据的存储
*methods:用于存储各种方法
*/

属性绑定
v-bind绑定值
v-html绑定标签




Vue.js

{{ greet(‘night’) }}

Name: {{ name }}

Job: {{ job }}

web开发

//实例化vue对象
new Vue({
el:”#vue-app”,
data:{
name:”米斯特”,
job:”web开发”,
website:”http://www.thenewstep.com“,
websiteTag:”Thenewstep”
},
methods:{
greet: function(time){
return ‘Good ‘+ time +” ” +this.name + “!”;
}
}
});

/*
*el:element 需要获取的元素，一定是html中的根容器元素
*data:用于数据的存储
*methods:用于存储各种方法
*data-binding:给属性绑定对应的值
*/