Vue介绍：vue导读2

最新推荐文章于 2024-08-28 23:55:43 发布

weixin_30628077

最新推荐文章于 2024-08-28 23:55:43 发布

阅读量101

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wuzhengzheng/p/10389825.html

版权

一、实例中的成员

二、高级指令

三、组件初识

一、实例中的成员

# 计算computed

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
    <div id="app">
        姓<input type="text" v-model="first_name">
        <hr>
        名<input type="text" v-model="last_name">
        <hr>
        <p>{{ first_name + " " + last_name }}</p>
        <p>{{ full_name_fn() }}</p>
        <!-- 一个变量的值依赖于多个变量的值 -->
        <p>{{ full_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            first_name: "",
            last_name: "",
        },
        methods: {
            // 声明的是函数, 该函数必须手动调用
            full_name_fn: function () {
                return this.first_name + " " + this.last_name
            }
        },
        computed: {
            // 声明变量full_name, 该变量的值等于后方函数的返回值
            // 函数中包含的所有vue变量值只要有发生变化的系统就会调用该函数
            full_name: function () {
                return this.first_name + " " + this.last_name
            }
        }
    })
</script>

</html>

# watch监听

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
    <div id="app">
        姓名<input type="text" v-model="full_name">
        <hr>
        <p>{{ first_name }}</p>
        <hr>
        <p>{{ last_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            full_name:"",
            first_name:"",
            last_name:"",
        },
        watch:{
            // watch只是对已有的变量进行值变化的监听，一旦发现值变化，系统自动回调监听变量后的函数
            // 后方函数和前方变量只有数据变化的监听绑定关系，没有值相关的联系
            full_name: function () {
                arr = this.full_name.split(" ");
                this.first_name = arr[0];
                this.last_name = arr[1];
            }
        }

    })
</script>

</html>

二、高级指令

# 条件指令渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
    <style>
        .wrap{
            width: 300px;
        }
        .box{
            width: 100px;
            height: 100px;
        }

        .red{
            background-color: red;
            float: left;
        }

        .orange{
            background-color: orange;
            float:right;
        }
    </style>
</head>
<body>
    <div id="app">
       <button @click="rAction">red切换</button>
       <button @click="oAction">orange切换</button>
        <div class="wrap">
            <!--v-if 值为false时，不会被渲染-->
            <!--了解：key由vue控制的属性key值需要唯一标识，因为key的值就是vue对该组件对内在中建立缓存的可以-->
            <div class="box red" v-if="r_show" :key="key"></div>
            <!--v-show 值为false时，以display：none被渲染-->
            <div class="box orange" v-show="o_show"></div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
           r_show:true,
           o_show:true,
        },

        methods:{
            rAction:function () {
                this.r_show = !this.r_show
            },
            oAction:function () {
                this.o_show = !this.o_show
            }
        }
    })
</script>

</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
    <style>
        .box{
            height:100px;
        }
        .r{background-color: red}
        .y{background-color: yellow}
        .b{background-color: blue}

    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li @click="rfn">红</li>
            <li @click="yfn">黄</li>
            <li @click="bfn">蓝</li>
        </ul>
        <div class="box r" v-if="tag==0" ></div>
        <div class="box y" v-else-if="tag==1"></div>
        <div class="box b" v-else></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            tag:0
        },

        methods:{
            rfn:function () {
                this.tag = 0
            },
            yfn:function () {
                this.tag = 1
            },
            bfn:function () {
                this.tag = 2
            },
        }
    })
</script>

</html>

条件指令案例

#循环指令渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
<div id="app">
    <ul>
        <li>{{ ls[0] }}</li>
        <li>{{ ls[1] }}</li>
        <li>{{ ls[2] }}</li>
        <li>{{ ls[3] }}</li>
        <li>{{ ls[4] }}</li>
    </ul>
    <ul>
        <li v-for="(ele,index) in ls">{{ ele }} {{ index }}</li>
    </ul>
    <ul>
        <li v-for="(value,key,index) in dic">{{ key }} {{ value }} {{ index }}</li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            ls: ['张三', '李四', '王五', '赵六', '钱七'],
            dic:{
                name:'Richard.wu',
                age:31,
                gender:'man'
            }
        },


    })
</script>

</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
<div id="app">
    <form action="">
        <input type="text" v-model="msg">
        <button type="button" @click="fn">留言</button>
    </form>
    <ul>
        <li v-for="(m,i) in msgs" @click="deleteAction(i)">{{ m }}</li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
           msg:"",
           msgs:["初始留言"]
        },
        methods:{
            fn:function(){
                if(this.msg){
//                    this.msgs.push(this.msg)//在后添加
                    this.msgs.unshift(this.msg);//在前添加
                    this.msg="";
                }
            },
            deleteAction:function(index){
                console.log(index);
                // 从什么索引开始，操作多少位，操作什么
                this.msgs.splice(index,1)
            }
        }


    })
</script>

</html>

循环指令渲染案例

三、组件初识

# 组件初识

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
<div id="app">
   {{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
    //每个组件均有自身的模板tempalate，根组件的模板就是挂载点
    new Vue({
        //根组件一定需要挂载点（否则无法渲染到页面中），一般情况下，根组件template就取挂载点，不需要自定义
        el: "#app",
        data: {
            msg:"信息"
        },
        //template就是组件的html架构
        //每个组件模板只能拥有一个根标签
        template:"<div><p>中午请客，师妹告诉我今晚不回去还想给我三个耳光，我当时就拒绝了，休想坑我第二顿</p></div>"
    })
</script>

</html>

# 局部组件

<body>
    <div id="app">
        <abc></abc>
        <abc></abc>
        <abc></abc>
    </div>
    <hr>
    <div id="main">
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 局部组件
    var localTag = {
        // 子组件的数据具有作用域，以达到组件的复用, 每一个复用的组件具有自身独立的一套数据
        data: function () {
            return {  // 返回值是一个数据字典(一套数据)
                count: 0
            }
        },
        template: "<div @click='fn'>点击{{ count }}次</div>",
        methods: {
            fn: function () {
                this.count += 1;
            }
        }
    }

    // app根组件
    new Vue({
        el: "#app",
        // 注册
        components: {
            'abc': localTag
        }
    })
    // main根组件
    new Vue({
        el: "#main",
        components: {
            // localTag
            'local-tag': localTag
        }
    })
</script>