关于Vue.js的介绍这里就不做它的背景介绍了,大家可以到官网看详细介绍。
项目需求,今天就学习了Vue.js的使用。下面以一个实例带大家入门。
一、Vue.js的引入
Vue.js的引入和其它的JavaScript库的引入一样。大家可以到官网http://cn.vuejs.org/v2/guide/
下载这个库文件本地引入或者直接添加下面一句话就可以引入
<script src="https://unpkg.com/vue/dist/vue.js">
二、Vue.js的简单使用
<!--根据Vue组件构建的组件来创建组件
v-for 表示一个循环,从bookList里面取值依次赋给book
v-bind 表示绑定数据,就是<book-list>的属性item的值是上面的for循环取出book的值
-->
<ol id="book_list">
<book-list v-for="book in bookList" v-bind:item="book"></book-list>
</ol>
<script>
/*--创建Vue组件
Vue.js的创建组件的语法是
Vue.component('组件名',{
pros:['属性名(可以创建多个属性)'],
template:"指定待创建的组件的表现形式,其实就是普通的html 标签而已。"
})
--*/
Vue.component("book-list", {
/*创建组件的属性*/
props: ["item"],
/*指定组件*/
template: "<li>{{item.name}}</li>"
})
/*-----展现数据
Vue.js把数据映射到View的语法是
new Vue({
el:'选择器(指出选择哪个元素)',
data:{
这里绑定数据
},
methods:{
处理方法的调动
}
})
--------------*/
var app = new Vue({
el: "#book_list",
data: {
bookList: [
{name: "Ruby"},
{name: "Perl"},
{name: "Dephile"},
{name: "Pythod"},
{name: "Unix"},
{name: "mac os x"},
{name: "soliras"}
]
}
})
</script>
上面程序输出
1、Ruby
2、Perl
3、Dephile
4、Pythod
5、Unix
6、mac os x
7、mac os x