vue学习

admin
2022-03-06 / 0 评论 / 57 阅读 / 正在检测是否收录...

一、vue的基本使用

<!DOCTYPE html>
<head>
    <title>vue的基本使用</title>
</head>
<body>
    <div id="app">
        <!-- 模板语法--插值{{}} -->
        <!-- 优先加载template里面的内容,如果为空也加载#app,在加载#app -->
        <h1>{{msg}}</h1>
    </div>

    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: '黄瓜'
            },
            template: '<div><h5>{{msg}}</h5></div>'
        });
    </script>
</body>
</html>

二、vue指令

<!DOCTYPE html>
<head>
    <title>vue指令</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .active{
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">{{msg}}</div>
    
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data:function(){
            return{
                msg: 'vue指令',
                msg2: 'vue的3种{{}}插值,1、{{}} 2、v-text="" 3\v-html=""',
                isShow: true,
                isActive: true,
                frut: [
                    {id:1,name:"苹果",price:20},
                    {id:2,name:"火龙果",price:40},
                    {id:3,name:"西瓜",price:30},
                    {id:4,name:"荔枝",price:60}
                ],
                person:{
                    name:"zhangsan",
                    age:30,
                    sex:"boy"
                }
            }
        },
        template: '<div>{{msg}} <p v-text="msg"></p> <p v-html="msg2"></p> <div v-if="isShow">v-if的使用</div> <div v-if="Math.random()>0.5">显示</div><div v-else>隐藏</div> <div v-show="true">v-show显示</div> <div class="box" v-on:click="clickHander" v-bind:class="{active:isActive}"></div> <ul><li v-for="(item,index) in frut"><h1>{{index}}</h1><h3>{{item.id}}</h3><h2>{{item.name}}</h2><h1>{{item.price}}</h1></li></ul> <ul><li v-for="(value,key) in person">{{value}}==={{key}}</li></ul>  </div>',
        methods:{
            clickHander(e){
                console.log(this);
                
                this.isActive=!this.isActive;
            }
        }
    
    });
    console.log(vm);
    </script>
</body>
</html>

三、vue的双向绑定

<!DOCTYPE html>
<head>
    <title>vue的双向绑定</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <h3 >{{msg}}</h3>
    </div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:function(){
            return{
                msg:"Hello World"
            }
        },
        template:'',
        methods:{
           
        }
    });
</script>

</body>
</html>

四、局部组件的创建

<!DOCTYPE html>
<head>
    <title>vue局部组件的创建</title>
</head>
<body>
    <div id="app"><h1>{{msg}}</h1></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">

    var App={
        data(){
            return {
                
            }
        },
        template:'<div>VUE  Hello </div>'
    }

    new Vue({
        el:"#app",
        data(){
            return{
                msg:"Hello  ---- World"
            }
        },
        template:'<App/>',
        methods:{
           
        },
        components:{
            App
        }
    });
</script>
</body>
</html>

五、全局组件

<!DOCTYPE html>
<head>
    <title>vue全局组件的创建</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
    Vue.component('Vquanju',{
        data(){
            return{

            }
        },
        template:'<div><button>全局组件按钮</button></div>'
    });
    
    var Vjubu={
        data(){
            return{

            }
        },
        template:'<div><h2>我是局部组件</h2><Vquanju/></div>'
    }

    var Vju={
        data(){
            return{

            }
        },
        template:'<div><h2>我是局部组件2</h2><Vquanju/></div>'
    }

    new Vue({
        el: "#app",
        data(){
            return {

            }
        },
        template: '<div><Vjubu/><Vju/></div>',
        components:{
            Vjubu,
            Vju
        }
    });
    </script>
</body>
</html>

六、通过prop往子组件通信

<!DOCTYPE html>
<head>
    <title>通过prop往子组件通信</title>
</head>
    <div id="app">{{msg}}</div>

    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
    
    Vue.component('Vchild',{
        data(){
            return{

            }
        },
        template:'<div><p>我是子组件<p/><input type="text" v-model="bdata" ></input></div>',
        props:['bdata']
    });


    Vue.component('Vparent',{
        data(){
            return{
                bmsg: 'Hello,绑定数据'
            }
        },
        template:'<div><p>我是父组件</p><Vchild :bdata="bmsg"/></div>'
    });

    var App={
        data(){
            return{

            }
        },
        template:'<h1><Vparent/></h1>'
    }

    new Vue({
        el: '#app',
        data(){
            return{
                msg: '好罗'
            }
        },
        components:{
            App
        },
        template:'<App/>'
    });

</script>
</html>

七、通过事件向子组件发送消息

<!DOCTYPE html>
<head>
    <title>通过prop往子组件通信</title>
</head>
    <div id="app">{{msg}}</div>

    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
    
    Vue.component('Vchild',{
        data(){
            return{
                newData: ''
            }
        },
        template:'<div><p>我是子组件{{childData}}<p/><input type="text" v-model="newData" @input="changeValue(newData)" /></div>',
        props:['childData'],
        methods:{
            changeValue(val){
                this.$emit('childHandler',val);
            }
        }
    });


    Vue.component('Vparent',{
        data(){
            return{
                bmsg: 'Hello,绑定数据'
            }
        },
        template:'<div><p>我是父组件</p><Vchild :childData="bmsg" @childHandler="childHandler"/></div>',
        methods:{
            childHandler(val){
                console.log(val+"-------------------")
            }
        }
    });

    var App={
        data(){
            return{

            }
        },
        template:'<h1><Vparent/></h1>'
    }

    new Vue({
        el: '#app',
        data(){
            return{
                msg: '好罗'
            }
        },
        components:{
            App
        },
        template:'<App/>'
    });

</script>
</html>

八、全局组件的使用

<!DOCTYPE html>
<head>
    <title>vue全局组件的创建</title>
    <style>
        .buttons{
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: .1s;
            font-weight: 500;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
        }
        .successs{
            color: #fff;
            background-color: #67c23a;
            border-color: #67c23a;
        }
        .defaults{
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
    Vue.component('Vquanju',{
        data(){
            return{

            }
        },
        template:'<div><button class="buttons" :class="type">全局组件按钮<slot></slot></button></div>',
        props:['type']
    });
    //利用父向子传值,自己封装组件,例如按钮
    var Vjubu={
        data(){
            return{

            }
        },
        template:'<div><h2>我是局部组件  </h2><Vquanju>slot覆盖内容</Vquanju>  <Vquanju type="successs">默认</Vquanju > <Vquanju type="defaults">成功</Vquanju></div>',
        
    }

    var Vju={
        data(){
            return{

            }
        },
        template:'<div><h2>我是局部组件2</h2><Vquanju/></div>'
    }

    new Vue({
        el: "#app",
        data(){
            return {

            }
        },
        template: '<div><Vjubu/><Vju/></div>',
        components:{
            Vjubu,
            Vju
        }
    });
    </script>
</body>
</html>
2

评论 (0)

取消