vue案例分析学习

vue是一款国产的开源的前端框架。

vue中的数据和页面上标签内容是'绑定'在一起的，模型数据发生了变动，页面视图也会相应变化。这种特性称之为`响应式`框架。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue的加包-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">{{name}}</div>

<script>
    // 每个页面要创建一个Vue对象（实例）
    var vue = new Vue({
        // 模型数据存储于data之中，其中多个属性，可以配合{{}}进行显示
        data: {
            name: "hello, world"
        },
        // el 对应的dom元素，把数据和视图结合在一起
        el:"#app"
    });
</script>
</body>

vue实际上就是创建一个vue对象，通过给这个对象赋予属性，并在网页中调用创建的vue的属性值来实现展示的目的，当然vue中也可以存储方法，通过在methods：{}加入方法来实现网页的响应式。

vue中包含的很多v-函数：

1）v-for指令

v-for指令基本等同于java中的for循环，可以用来实现较多文件的存储，减轻文件的重复性。


<div id="app">
    <!-- 指令 循环指令 v-for -->
    <p v-for="p in list"> {{p.name}} , {{p.age}}, {{p.sex}}</p>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            list:[
                {name:"张三", age:12,sex:"男"},
                {name:"李四", age:14,sex:"女"},
                {name:"王五", age:21,sex:"男"},
               
            ]
        }
    });
</script>

2）v-if指令

v-if指令同样，也与java中的if指令类似可以配合v-else使用，与v-if相似的还有v-show，但是v-show不能配合v-else来使用

3） v-bind 绑定属性，要实现标签属性的绑定，必须使用v-bind 指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 指令 循环指令 v-for -->
    <p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>

    <table border="1" width="100%" v-show="list.length>0">
        <tbody>
            <!-- p代表数组中第i个元素，i是下标值-->
            <tr v-for="(p,i) in list">
                <td>{{i+1}}</td>
                <td>{{p.name}}</td>
                <td>{{p.price}}</td>
                <td><img width="110" v-bind:src=" 'images/' + p.img" :title="p.title"></td>
                <td><img width="110" :src=" 'images/' + p.img"></td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            list:[
                {name:"商品1", price:3000.00, img:"5a0cf6bfN92a5a597.jpg",title:"提示1!!!!!!!!!!!!!!"},
                {name:"商品2", price:4000.00, img:"5a0cf672N3c785b7a.jpg",title:"提示2!!!!!!!!!!!!!!"},
                {name:"商品3", price:2000.00, img:"5a1f5ed3Nfa577958.jpg",title:"提示3!!!!!!!!!!!!!!"}
            ]
        }
    });
</script>
</body>
</html>

猜你喜欢