vue.js

1. vue是什么?

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，Vue 也完全能够为复杂的单页应用提供驱动. 操作元素更方便（简化Dom操作）

2. 怎样下载vue.js插件和三个框架。

在git中输入：npm install vue 按下回车
三个框架：vue Angutar React

3. vue的指令

循环：<li v-for="val  in arr">{{val}}<li>

下标：<li v-for="(val,index)  in arr">{{index}}----{{val}}</li>

4.vue做的表格

13989371-f8612874b4a39bfb.png

html部分

<div class="itany">
            <table border="2px" cellspacing="0">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>单价</th>

                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(val,index) in arr">
                        <td>{{index+1}}</td>
                        <td>{{val.pname}}</td>
                        <td>{{val.price}}</td>

                    </tr>
                </tbody>
            </table>
        </div>

js部分

<script type="text/javascript">
            new Vue({
                el: ".itany",
                data: {
                    arr: [{
                            
                            pname: "香蕉",
                            price: 3
                        }, {
                            
                            pname: "西瓜",
                            price: 2
                        }, {
                            
                            pname: "苹果",
                            price: 1
                        }

                    ]
                }

            })
        </script>

5. 循环数组

download.png

html部分

<div class="guo">
        
    
        <ul>
            <li v-for="val in arr">{{val}}</li>
        </ul>
 </div>

js部分

<script type="text/javascript">
             new Vue({
                el:'.guo',
                data:{
            
               arr:[1,2,3]
                }
                
                
             })
            
</script>