Vue.js初体验

关于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