vue 常用指令

一、了解 Vue.js

1 Vue.js是什么？
作者：尤雨溪
Vue.js是一套用于构建用户界面的渐进式框架。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。

2 特性：

确实轻量、数据绑定、指 令、插件化

3 vue的引入

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

直接用script引入

4 输出hello vue
例子：

    html代码：
               <div class="text">
                      {{massage}}
              </div>

    js代码：
     <script src="./vue.js">    </script>
    <script>
              new Vue({
               el:'.text', 
                data:{
                massage:'hello vue'
                      }
                })
   </script>

el：是element的缩写， 它是一个选择器

5 v-for 循环

                          循环数组

     html代码：
          <div class="text">
               <ul>
                     <li v-for='value in arr'>           // 循环数组
                                {{value}}     //  value 是一个值，可以改变
                     </li>        
               </ul>
         </div>

    js代码:
        <script src="./vue.js">    </script>
        <script>
           new Vue({
              el:'.text',
              data:{
              arr:[1,2,3,4,5,9]
                  }
            })
        </script>


                            循环对象

     html代码：
          <div class="text">
               <ul>
                     <li v-for='value in obj'>           // 循环对象
                                {{value}}     //  value 是一个值，可以改变
                     </li>        
               </ul>
         </div>

    js代码:
        <script src="./vue.js">    </script>
        <script>
           new Vue({
              el:'.text',
              data:{
              obj:{
                name:'jack',
                age:18
              }
                  }
            })
        </script>


            循环数组对象

  html 代码：
           <div class="text">
                 <ul>
                      <li v-for='value in arrs'>   
                          {{value.num}}
                          {{value.name}}
                          {{value.price}}
                      </li>
                 </ul>
            </div>

js代码：
    <script src="./vue.js">    </script>
    <script>
         new Vue({
                el:'.text',
                data:{
                arrs:[
                      {num:1,name:'苹果',price:3},
                      {num:2,name:'香蕉',price:5},
                      {num:3,name:'梨',price:6},
                
                      ]
                  }    
              })
     </script>

6 小练习 做table表格

          html代码：
                    <div class="top">
                          <table border="1" cellspacing='0'>
                               <thead>
                                     <tr>
                                         <th>名称</th>
                                         <th>数量</th>
                                         <th>单价</th>
                                       </tr>
                                </thead>
                                <tbody>
                                    <tr  v-for="value in arrs">
                                        <td>{{value.name}}</td>
                                        <td>{{value.num}}</td>
                                        <td>{{value.price}}</td>
                                    </tr>
                                </tbody>
                        </table>
                  </div>
  
          js代码：

                       <script src="vue.js"></script>
                      <script>
                          new Vue({
                              el:'.top',
                              data:{
                              arrs:[
                                  {name:'苹果',num:'1',price:'4'},
                                  {name:'梨',num:'4',price:'6'},
                                  {name:'香蕉',num:'3',price:'2'}
                                  ]
                              }
                          })
                  </script>

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

        html代码:
            <div id="itany">
                 <input type="text" v-model='msg'>
                 <p>{{msg}}</p>
            </div>

            js代码：
                  <script src="./js/vue.js"></script>
                  <script>

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

8 v-on事件
methods是一个方法，点击事件执行一个方法

        html代码：
            <div id='itany'>
                 <button v-on:click='alt'>按钮</button>
            </div>
      
        js代码：
              <script src="js/vue.js"></script>
              <script>

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