vue入门基础

1.安装git,通过npm install vue下载vue插件
$ npm install vue
2.通过script导入vue.js插件
<script src="vue/dist/vue.js"></script>
3.然后再通过另一个script新建一个用来编写vue.js的区域
<script>
        new Vue({
            el:'.demo', 
            data:{
               demo1:'前端1班',
                arr:[1,2,3,4],
                obj:{name:"大伟",age:"25",hobby:"足球"},
                arrs:[
                    {name:"小红",age:"20",hobby:"睡觉"},
                    {name:"小黄",age:"21",hobby:"看书"},
                    {name:"小绿",age:"22",hobby:"打游戏"}
                ]
            }
        })        
 </script>
4.通过new Vue创建一个vue对象,el的值可以是选择器,ID选择器,class选择器等均可,data用来存放数据
    <div class="demo">
        .....
    </div>
    
     new Vue({
            el:'.demo'
            data:{
               demo1:'前端1班',
                arr:[1,2,3,4],
                obj:{name:"顾大伟",age:"25",hobby:"足球"},
                arrs:[
                    {name:"小红",age:"20",hobby:"睡觉"},
                    {name:"小黄",age:"21",hobby:"看书"},
                    {name:"小绿",age:"22",hobby:"打游戏"}
                ]
            }
     })

注:new Vue中Vue开头必须为大写字母

5.vue中的for循环,是通过v-for来实现的
HTML:
     <dl>
            <dt v-for="val in arr">{{val}}</dt>
     </dl>
     <ul>
         <li v-for="ao in obj">{{ao}}</li>
     </ul>


vue.js:
     <script>
        new Vue({
            el:'.demo', 
            data:{
                arr:[1,2,3,4],
                obj:{name:"顾大伟",age:"25",hobby:"足球"},
            }
        })        
    </script>
6.通过vue制作table表格

(1)通过vue实现:

HTML:
<div class="demo">     
        <table border="1" cellspacing='0'>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>爱好</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(value,index) in arrs">
                    <td>{{value.name}}</td>
                    <td>{{value.age   }}</td>
                    <td>{{value.hobby}}</td>
                </tr>
            </tbody>
        </table>
    </div>

vue.js:
    <script>
        new Vue({
            el:'.demo', 
            data:{                                       
                arrs:[
                    {name:"小红",age:"20",hobby:"睡觉"},
                    {name:"小黄",age:"21",hobby:"看书"},
                    {name:"小绿",age:"22",hobby:"打游戏"}
                ]
            }
        })        
    </script>

效果图如下:

姓名 年龄 爱好
小红 20 睡觉
小黄 21 看书
小绿 22 打游戏

通过下标来实现年龄:

HTML:
<div class="demo">     
        <table border="1" cellspacing='0'>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>爱好</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(value,index) in arrs">
                    <td>{{value.name}}</td>
                    <td>{{index+20}}</td>
                    <td>{{value.hobby}}</td>
                </tr>
            </tbody>
        </table>
    </div>

vue.js:
    <script>
        new Vue({
            el:'.demo', 
            data:{                                       
                arrs:[
                    {name:"小红",age:"20",hobby:"睡觉"},
                    {name:"小黄",age:"21",hobby:"看书"},
                    {name:"小绿",age:"22",hobby:"打游戏"}
                ]
            }
        })        
    </script>

效果图如下:

姓名 年龄 爱好
小红 20 睡觉
小黄 21 看书
小绿 22 打游戏
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue中文网 一、MVVM框架 MVVM框架好处 MVVM框架Angular.js/React.js/Vue.js...
    EndEvent阅读 2,052评论 0 15
  • Vue简介:Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框...
    胡自鲜阅读 405评论 0 0
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,863评论 4 45
  • 课本上那首《天净沙 · 秋思》太著名了,马致远写尽了游子的心境。 于是,本周作业就顺水推舟一把,写一下你的《天净沙...
    深蓝之澜阅读 721评论 0 1
  • 产品:给小微企业提供网站建设,微信号推荐和营销指导服务。 目标沟通大...
    勤_111e阅读 168评论 1 0