Vue.js框架

最新推荐文章于 2024-05-14 10:41:51 发布

花式被吊打

最新推荐文章于 2024-05-14 10:41:51 发布

阅读量1.3k

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_34862798/article/details/82701880

版权

学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

vue.js框架

职责划分：M-V-VM
model模型：数据
view视图：html标签,样式
viewmodel结合模型和视图：决定数据显示在哪个标签上

导入vue.js
在每个页面创建一个vue对象

<div id="div_id">{{name.substring(0,5)}}</div> //截取字符串


var vue = new Vue({
    //模型数据
    data:{
        name: "helloworld",
        age:"20"
    },
    //DOM元素
    el:"#div_id"

    //计算属性
    computed:{
        //计算属性,对应一个函数,由普通属性计算而来
        nameRe: function(){
            return this.name.split("").reverse.join();
        }
    },
    //方法属性
    methods:{
        a:function(){

        }
    }
});

视图由两个花括号{{}}占位,匹配模型数据的属性名称

注意:不能将vue对象和html,body绑定

v-for 循环指令

<body>
    <div id="div1">
        <table border="2px" style="border: blue solid 2px;">
            <tbody>

            <tr v-for="p in list">
                <td class="td">{{p.id}}</td>
                <td class="td">{{p.price}}</td>
                <td class="td">{{p.img}}</td>
            </tr>

            //<p>{{list[2].id}},    {{list[2].price}},    {{list[2].img}}</p>
            //v-for="(p,i) in list"第i个

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



    <script>
        var vue = new Vue({
            data: {

                list:[
                    {id:"001", price:"200", img:"1.jpg"},
                    {id:"002", price:"100", img:"2.jpg"},
                    {id:"003", price:"300", img:"3.jpg"}
                    ]
            },
            el:"#div1"


        })
    </script>

</body>

vue.list.push({id:"004", price:"400", img:"4.jpg"}) 添加一个对象
vue.list.pop() 尾部删除
vue.list.shift() 头部删除

v-if指令

条件成立则视图上显示,否则不会显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .td{width: 200px;padding-bottom: 20px;}
    </style>

</head>
<body>
    <div id="div1">
        <table border="2px" style="border: blue solid 2px;" v-if="list.length>0">
            <tbody>

            <tr v-for="p in list">
                <td class="td">{{p.id}}</td>
                <td class="td">{{p.price}}</td>
                <td class="td"><img width="100px"  :src=" 'images/' + p.img"></td>
            </tr>

            <p>{{list[2].id}},    {{list[2].price}},    {{list[2].img}}</p>

            </tbody>

        </table>
        <p v-else>你的购物车空空如也~~~~</p>
    </div>

    <script>
        var vue = new Vue({
            data: {

                list:[
                    {id:"001", price:"200", img:"1.jpg"},
                    {id:"002", price:"100", img:"2.jpg"},
                    {id:"003", price:"300", img:"3.jpg"}
                    ]
            },
            el:"#div1"


        })
    </script>

</body>

</html>

v-show指令根据条件决定表示是否显示,在此例中:

与v-if的false的区别在于:隐藏(display:none)<——->不创建

v-bind绑定属性标签 (处理字符串和变量)

<img v-bind:src=" 'images/' + p.img">
<img :src=" 'images/' + p.img"> //同上

v-on 事件

<input type="button" value="点我" v-on:click="abc">
<input type="button" value="点我" @click="abc">//与上一行等同
<input type="button" value="点我" @click="abc(100)"> //带参数
<script>
    var vue = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            abc:function(){


            }
        }
    });
</script>

v-model 双向绑定:模型视图可以互相影响

花式被吊打

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue.js框架

vue.js框架职责划分：M-V-VM model模型：数据 view视图：html标签,样式 viewmodel结合模型和视图：决定数据显示在哪个标签上导入vue.js 在每个页面创建一个vue对象&lt;div id="div_id"&gt;{{name.substring(0,5)}}&lt;/div&gt; //截取字符串var vue = new Vue({...
复制链接

扫一扫