美文网首页
2018-09-11

2018-09-11

作者: 其实_dnhl | 来源:发表于2018-09-11 20:16 被阅读25次

Vue.js

Vue.js 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

第一课Hellow Vue!
创建一个html文件,然后通过如下方式引入 Vue:

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

输入以下代码:

<body>
<div id="nbsp">
    {{message}}
    {{text}}
    {{num}}
    {{obj}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
    el:"#nbsp",
    data:{
        message:"Hellow Vue!",
        text:"你好维哦",
        num:9999,
        obj:{name:"张小明",age:18}
    }
});
</script>
</body>

以上代码输出如下:

QQ截图20180911195917.png

第二课,用v-for输出一些简单的数组或对象

<body>
<div id="nbsp">
    <ol>
        <li v-for="value in arr">{{value}}</li>
        <li v-for="val in obj">{{val}}</li>
        <li v-for="(val,qw) in arr">
            {{qw}}?????{{val}}
        </li>
        <li v-for="(val,ind) in obj">
            {{ind}}={{val}}
        </li>
    </ol>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#nbsp",
        data:{
            arr:[1,2,3],
            obj:{name:"jack",age:19},
        }
    });
</script>
</body>

输出结果如下

QQ截图20180911200908.png

数组对象:

<body>
<div id="nbsp">
    <ol>
       <li v-for="value in arrs">
           {{value.num}}
           {{value.name}}
           {{value.price}}
       </li>
    </ol>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#nbsp",
        data:{
            arrs:[
                {num:1,name:"apple",price:3},
                {num:3,name:"banana",price:3},
                {num:8,name:"mailefaolen",price:1000}
            ]
        }
    });
</script>

输出结果如下:

QQ截图20180911201306.png

用v-for输出一个表格

v-for 指令可以绑定数组的数据来渲染一个项目列表:

<style>
    table{
        width: 300px;
        color: #ff7c35;
    }
</style>
<body>
<div id="nbsp">
   <table border="1" cellspacing="0">
       <tr>
           <th>编号</th>
           <th>名称</th>
           <th>单价</th>
       </tr>
       <tr v-for="(value,index) in fruit">
           <td>{{index+1}}</td>
           <td>{{value.name}}</td>
           <td>{{value.price}}</td>
       </tr>
   </table>
</div>
链接Vue.js
<script src="js/vue.js"></script>

输入的Vue.js代码如下:

<script>
    new Vue({
        el:"#nbsp",
        data:{
            fruit:[
                {name:"apple",price:3},
                {name:"banana",price:3},
                {name:"mailefaolen",price:1000}
            ]
        }
    });
</script>
</body>

在for循环输入中还可以这样写:

<tr v-for="value in fruit">
           <td>{value.num}}</td>
           <td>{{value.name}}</td>
           <td>{{value.price}}</td>
       </tr>

那么在js中输入就成了这样:

<script>
    new Vue({
        el:"#nbsp",
        data:{
            fruit:[
                {num:1,name:"apple",price:3},
                {num:2,name:"banana",price:3},
                {num:3,name:"mailefaolen",price:1000}
            ]
        }
    });
</script>

最后输出的结果为:

QQ图片20180911194136.png

相关文章

网友评论

      本文标题:2018-09-11

      本文链接:https://www.haomeiwen.com/subject/rucpgftx.html