2018-09-10第一节vue.jsvue.js基础、v-fo

一、vue.js基础

1.vue.js是一套用于构建用户界面的渐进式框架

2.是一个轻量级的MVVM框架(Model-View-ViewModel)框架，其实就是数据的双向绑定

3.最简单的一个vue.js案例

     <div id='itany'>{{msg}}</div>

     <script src='js/vue.js'></script>
     <script>

   new Vue({

  el:'#itany',

 data:{//存储数据

        msg:'hello vue'

    }
  })
</script>

二、vue.js常用指令

1.v-for对数组或对象进行循环操作

案例：
<div id='itany'>

      <ul>

//数组
//<li v-for='value in arr'>{{value}}</li>
//下标
//<li v-for='(value,index) in obj'>{{index}}=>{{value}}</li>
// 数组对象

       <li v-for='value in arrs'>
           {{value.num}}
           {{value.name}}
           {{value.price}}
       </li>
   </ul>
  </div>

<script src="js/vue.js"></script>
<script>
    
    new Vue({
        el:'#itany',
        data:{
            arr:[1,2,3,4,5,6],
            obj:{name:'jack',age:18,hobby:'听音乐'},
            arrs:[
                {num:1,name:'苹果',price:3},
                {num:2,name:'香蕉',price:2},
                {num:3,name:'鸭梨',price:1}
            ]
        }
    })
</script> 

2.v-model双向绑定,用于表单元素

案例:

  <div id="itany">

  <input type="text" v-model='msg'>

  <p>{{msg}}</p>
</div>

  <script src="./js/vue.js"></script>
  <script>
   
    new Vue({
        el:'#itany',
        data:{
            msg:'hello vue'
        }
    })
</script>

3.v-on：事件（函数或方法） 简写@:函数
methods是一个方法，点击事件执行一个方法
案例：

<div id='itany'>

   <button v-on:click='alt'>按钮</button>

  </div>

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

    new Vue({
       el:'#itany',
       data:{
           msg:'hello vue'
       },
       methods:{
          alt:function(){
              alert(this.msg)
          }     
       }
   })
</script>

三、表格案例

 <div id="itany">

     <table border='1' cellspacing='0'>

   <thead>
       <tr>
           <th>编号</th>
           <th>名称</th>
           <th>价格</th>
       </tr>
   </thead>
   <tobody>
       <tr v-for="value in arrs">
           <td>{{value.编号}}</td>
           <td>{{value.名称}}</td>
           <td>{{value.价格}}</td>
       </tr>
   </tobody>
  </table>
 </div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            arrs:[
                {编号:1,名称:'香蕉',价格:25},
                {编号:2,名称:'鸭梨',价格:20},
                {编号:3,名称:'橘子',价格:15},
                {编号:4,名称:'西瓜',价格:10}
            ]
        }
    })
</script>