美文网首页
vue vue对象的一些基础特性

vue vue对象的一些基础特性

作者: 不睡觉呀 | 来源:发表于2018-05-15 11:14 被阅读0次

1.vue 对象的标签内容扩展和标记信息的添加

(1).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 标签内容扩展及标注信息的添加</title>
</head>
<body>
    <div id="a">
        <message title="This is a title" content='This is content'></message>
        <message title="This is a title" content='This is content'></message>
        <message title="This is a title" content='This is content'></message>
        <message title="This is a title" content='This is content'></message>
        <message title="This is a title" content='This is content'></message>
        <message title="This is a title" content='This is content'></message>
    </div>

    <script src="vue.min.js"></script>
    <script>
        Vue.component("message",{
            props:["title","content"],
            data:function(){
                return {author:"where autor are "}
            },
            template:"<div><h1>{{title}}</h1><p>{{content}}</p><hr>{{author}}</div>"
        });
        new Vue({
            el:"#a"
        })
    </script>
</body>
</html>

效果:

image.png

2.vue 替换一个标签

(1).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 替换一个标签</title>
</head>
<body>
    <div id="a">
        <p>123333</p>
    </div>
    <script id="tpl">
        
    <div>
        <p>This is from tpl</p>
    </div>

    </script>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el:"#a",
            template:"#tpl"
        });
    </script>
</body>
</html>

效果:

image.png

3.vue vue对象的数据绑定和生命周期

(1).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue vue对象的数据绑定和生命周期</title>
    <style>
        .class0{
            background: skyblue;
            color: black;
        }
    </style>
</head>
<body>
    <div id="a">
        {{name}}
        <a :href="avatar" :class="'class'+count[0]" target="__blank">哔哩哔哩动画</a>
    </div>

    <script src="vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#a",
            data:{
                name:"hahahah",
                avatar:"https://www.bilibili.com/",
                count:[0,2,3,5,8,9,4],
                message:"hehe"
            },
            beforeCreate:function(){
                console.log("beforeCreate");
            },
            created:function(){
                console.log("created");
            },
            beforeMount:function(){
                console.log("beforeMount");
            },
            mounted:function(){
                console.log("mounted");
            },
            beforeUpdate:function(){
                console.log("beforeUpdate");
            },
            updated:function(){
                console.log("updated");
            }
        });
    </script>
</body>
</html>

效果:

image.png

4.vue 一个vue对象的计算属性

(1).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 一个vue对象的计算属性</title>
</head>
<body>
    <div id="a">
        <p>{{f1}}</p>
        <p>{{f2}}</p>
        <p>{{f3}}</p>
    </div>

    <script src="vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#a",
            data:{
                f1:"aaaa",
                f2:"bbbbb"
            },
            computed:{
                f3:function(){
                    return this.f1+" "+this.f2
                }

            }
        });
    </script>
</body>
</html>

效果:

image.png

相关文章

网友评论

      本文标题:vue vue对象的一些基础特性

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