Vue的基本使用

Posted 2021-01-23 s593941

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的基本使用相关的知识，希望对你有一定的参考价值。

1.数据的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
</head>
<body>
<div id="app">
    <label for="username">用户名:</label>
    <input type="text" v-model="msg" id="username">
    <p>{{ msg }}</p>
    <textarea name="" id="" cols="30" rows="10" placeholder="add multiple lines" v-model = "msg"></textarea>
    <input type="checkbox" id="checkbox" v-model = "checked">
    <label for="checkbox">{{ checked }}</label>
    <br>
    <input type="checkbox" id="jack" value="Jack" v-model = "checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="join" value="Join" v-model = "checkedNames">
    <label for="join">Join</label>
    <input type="checkbox" id="mike" value="Mike" v-model = "checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names:{{ checkedNames }}</span>
    <br>
    <select name="" id="" v-model = "selected">
        <option value="" disabled>请选择</option>
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
    </select>
    <span>Selected:{{ selected }}</span>
    <!--懒监听-->
    <input type="text" v-model.lazy = "msg">
    <!--数字显示-->
    <input type="text" v-model.number = "age" type = "number">
    <!--清除前后空格-->
    <input type="text v-model.trim = "msg>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
new Vue({
    el:"#app",
    data(){
        return {
            msg:"alex",
            checked:false,
            checkedNames:[],
            selected:‘‘,
            age:0
        }
    }
})
</script>
</body>
</html>

2.双向数据绑定实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2</title>
</head>
<body>
<div id="app">
    <input type="text" :value="msg" @input = "changeHandler">
    <p>{{ msg }}</p>
</div>
<script src="../vue/dist/vue.js"></script>
<script>

    new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex"
            }
        },
        methods:{
            changeHandler(e){
                this.msg = e.target.value
            }
        }
    })
</script>
</body>
</html>

3.局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3</title>
</head>
<body>
<div id="app">
    {{ msg }}
</div>
<script src="../vue/dist/vue.js"></script>
<script>
    //如果仅仅是实例化vue对象中既有el又有template,如果template中定义模板的内容,
    // 那么template模板的优先级大于el

    //1.声子, vue组件的名字首字母要大写,跟标签区分,组件中的data必须是一个函数,一定要有返回值
    let App = {
        data(){
            return {
                text:"ritian"
            }
        },
        template:`
        <div id="a">
        <h2>{{ text }}</h2>
        </div>
        `,
        methods:{}
    }

    new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex"
            }
        },
        //用子
        template:`
        <div class="app">
        <App></App>
        </div>
        `,
        //挂子
        components:{
            //如果key和value一样,可以只写一个
            //App:App
            App
        }

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

4.局部组件的使用更改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4</title>
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
    //slot是vue中提供的内容组件,它会去分发内容

    //可复用的vue组件
    Vue.component("VBtn",{
        data(){
            return {}
        },
        template:`
        <button><slot></slot></button>
        `
    });

    let Vheader = {
        data(){
            return {}
        },
        template:`
        <div>
            <h2>ritian</h2>
            <h2>ritian</h2>
            <VBtn>登录</VBtn>
            <VBtn>注册</VBtn>
            <VBtn>按钮</VBtn>
            <VBtn>提交</VBtn>
        </div>
        `
    };

    let App = {
        data(){
            return {
                text:"我是ritian"
            }
        },
        template:`
        <div id="a">
        <h2>{{ text }}</h2>
        <Vheader></Vheader>
        <VBtn>删除</VBtn>
        <br>
        </div>
        `,
        methods:{},
        components:{
            Vheader
        }
    };

    new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex"
            }
        },
        template:`<App/>`,
        components:{
            App
        }
    })
</script>
</body>
</html>

5.父往子传值

1.在子组件中,使用props声明,可以直接在子组件中任意使用

2.父组件要定义自定义的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5</title>
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
    Vue.component("VBtn", {
        data() {
            return {}
        },
        template: `
    <button>{{ id }}</button>
    `,
        props: ["id"]
    });

    let Vheader = {
        data() {
            return {}
        },
        props:["msg","post"],
        template:`
        <div class="child">
            <h2>ritian</h2>
            <h2>{{ msg }}</h2>
            <h3>{{ post.title }}</h3>
            <VBtn v-bind:id = "post.id"></VBtn>
        </div>
        `
    };

    let App = {
        data(){
            return {
                text:"我是父组件的数据",
                post:{
                    id:1,
                    title:"My Journey with Vue"
                }
            }
        },
        template:`
        <div id="a">
        <Vheader :msg = "text" v-bind:post = "post"></Vheader>
        </div>
        `,
        methods:{},
        components:{
            Vheader
        }
    };

    new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex"
            }
        },
        template:`<App />`,
        components:{
            App
        }
    })

</script>
</body>
</html>

6.子往父传值

1.子组件中通过$emit()触发父组件中自定义的事件

2.父组件中声明自定义的事件介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6</title>
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
    Vue.component("VBtn",{
        data(){
            return {}
        },
        template:`<button @click = "clickHandler">{{ id }}</button>`,
        props:[‘id‘],
        methods:{
            clickHandler(){
                //每个组件中的this指的是当前组件对象
                console.log(this);
                this.id++;
                //this.$emit("父组件声明自定义的事件","传值");
                this.$emit("clickHandler",this.id);
            }
        }
    });

    let Vheader = {
        data(){
            return {}
        },
        props:["msg","post"],
        template:`
        <div class="child">
        <h1>我是header组件</h1>
        <h2>ritian</h2>
        <h2>{{ msg }}</h2>
        <h3>{{ post.title }}</h3>
        <VBtn v-bind:id = "post.id" @clickHandler = "clickHandler"></VBtn>
        </div>

        `,
        methods:{
            clickHandler(val){
                this.$emit("fatherHandler",val)
            }
        },
        created(){
            console.log(this);
        },
    };

    let App = {
        data(){
            return {
                text:"我是父组件的数据",
                post:{
                    id:1,
                    title:"My Journey with Vue"
                }
            }
        },
        template:`
        <div id="a">
        我是父组件的{{ post.id }}
        <Vheader :msg = "text" v-bind:post = "post" @fatherHandler = "father_handler"></Vheader>
        </div>
        `,
        methods:{
            father_handler(val){
                console.log(val);
                this.post.id = val;
            }
        },
        components:{
            Vheader
        },
        created(){
            console.log(this);
        },
    };

    new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex"
            }
        },
        created(){
            console.log(this);
        },
        template:`<App />`,
        components:{
            App
        }
    })
</script>
</body>
</html>

7.平行组件传值

使用$on()和$emit()绑定的是同一个实例化对象

A===>B传值

1.B组件中要使用$on("事件的名字",function(){})

2.A组件中使用$emit("事件的名字",值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7</title>
</head>
<body>
<div id="app">
    <App/>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
    let bus = new Vue();
    // A=>B B要声明事件 $on("事件的名字",function(val){}) A要触发的事件 $emit("A组件中声明的事件名","值")
    //前提,这两个方法必须绑定在同一个实例化对象(bus)
    Vue.component("Test2",{
        data(){
            return {
                text:""
            }
        },
        template:`
        <h2>{{ text }}</h2>
        `,
        methods:{},
        created(){
            bus.$on("testData",(val)=>{
                this.text = val;
            })
        }
    });


    Vue.component("Test",{
        data(){
            return {
                msg:"我是子组件的数据"
            }
        },
        props:["txt"],
        template:`
        <button @click = "clickHandler">{{ txt }}</button>
        `,
        methods:{
            clickHandler(){
                bus.$emit("testData",this.msg)
            }
        }
    });

    let Vheader = {
        data(){
            return {txt:"wusr"}
        },
        template:`
        <div class="header">
        <Test :txt = "txt"/>
        <Test2 />
        </div>
        `
    };

    let App = {
        data(){
            return {}
        },
        template:`
        <div class="app">
        <Vheader />
        </div>
        `,
        components:{
            Vheader
        }
    };

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

</script>
</body>
</html>

以上是关于Vue的基本使用的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段13——Vue的状态大管家