vue第一天总结

作者: 七缘灬 | 来源:发表于2018-09-11 15:34 被阅读0次

2018-09-11
Vue.js学习总结第一天
98道经典Vue面试题总结
Vue学习总结（2019.7.31-8.4）
vue的总结
vue vue-router vuex element-ui a
vue小项目总结1
vue使用拖拽组件
vue第一天总结
vue UI组件、开发框架、实用库、服务端、辅助工具和应用实例

1.下载并且安装vue.js，输入指令 upm install vue，下载成功之后出现文件即可。

vue相对于Angular、react来说是最容易学习的一种框架，vue的操作元素更方便，简化了DOM的操作。

3.vue的指令：v-for 当建立一个新的vue框架时，用new Vue；开头的v要大写，在创建vue框架前要先创建一个选择器来承载，例如：id选择器、class选择器。

4.vue是一套构建用户界面的渐进式框架，vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组。

例子：使用vue制作的table表单

<body>
    <div id="itany">
        <table border="1" cellspacing="0">
            <thead>
               <tr>
                   <th>顺序</th>
                   <th>姓名</th>
                   <th>年龄</th>
               </tr>
           </thead>
           <tbody>
               <tr v-for="value in arrs">
                   <td>{{value.num}}</td>
                   <td>{{value.name}}</td>
                   <td>{{value.age}}</td>
               </tr>
           </tbody>
        </table>
    </div>

    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                arrs:[
                 {num:1,name:"鸣人",age:18},
                 {num:2,name:"佐助",age:19},
                 {num:3,name:"小樱",age:17}
                ]
            }
        })
    </script>
</body>

效果如下：

图片.png

例子：使用vue中的数组，对象等；

<body>
     <div id='itany'>
         {{msg}}
         {{num}}
         {{obj}}
         {{arr}}
         <ul>
             <li v-for="val in arr">{{val}}</li>
             <li v-for="(val,index) in arr">{{val}}-{{index}}</li>
         </ul>
         <ul>
             <li v-for="value in obj">{{value}}</li>
             <li v-for="(value,index) in obj">{{index}}-{{value}}</li>
         </ul>
         <ul>
             <li v-for="val in arrs">{{val.num}}-{{val.name}}-{{val.age}}</li> 
         </ul>
     </div>

     <script src='node_modules/vue/dist/vue.js'></script>
      <script>
        new Vue({
          el:'#itany',
          data:{
              msg:'前端一班',
              num:'12',
              arr:[1,2,3,4],
              obj:{name:"杰克",age:17,hobby:"台球"},
              arr:[1,2,3,4,5],
          }
            
        })
  </script>
</body>

效果如下：

图片.png