vue的指令

一套用于构建用户界面的渐进式框架，是由底向上逐层应用。
new Vue（{}） 是vue实例 ，切记逗号隔开

1.hello vue！

<div id="app">
    {{ message }}
</div>
<div id="app">

 var app = new Vue({
            el: '#app',  //el是element（要素 ）的缩写，用来选用选择器的。
            data: {    //data是存放数据的，在页面中出现的是值，需要用俩个大括号引入属性名。
                                                                                                     
                message: 'Hello Vue!'
            }
        })

显示为hello vue！

2.v-for循环操作

arr表示数组的；obj表示对象的

                数组中第一个值为值，第二个值为下标；
                 对象中第一个值为属性，第二个值是属性值。
<ul>
        <Li v-for="arr1 in arr">{{arr1}}</Li>
        <Li v-for="obj1 in obj">{{obj1}}</Li>
    </ul>

 var app = new Vue({
            el:'#app',
            data:{
                arr:[1,2,3],//数组
                //对象
                obj:{name:'jack',age:148}
            },
        })

显示为
0=>1
1=>2
2=>3
name=>jack
age=>148

3.数组对象

<div id="app" >
    <ul v-for="(value,index) in arr">
        //同：js中对象的遍历。
        <li>{{value.name}}{{value.price}}</li>
    </ul>
</div>

<script src="vue.js"></script>
   <script>
 var app = new Vue({
            el:'#app',
            data:{
                arr:[{
                    name:"苹果",
                    price:3
                }]
            }
        })
    </script>
                                                                   `

4.用v-for制作的表格

<table border="1" id="app">
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>单价</th>
    </tr>
    <tbody>
    //value代表的为值，index代表下标，arr为命名，表示要取arr中的属性值
        <tr v-for="(value,index) in arr">
            <td>{{index+1}}</td>
            <td>{{value.name}}</td>
            <td>{{value.price}}</td>
        </tr>
    </tbody>
</table>


<script src="vue.js"></script>  //同级导入vue
    <script>
        var app = new Vue({
            el:'#app',  

// data作用1，定义数组；2，定义单个对象；3，定义字符串

            data:{
                arr:[{
                    name:"苹果",
                    price:3
                }]
            }
        })
    </script>
···