2021-05-08 Vue基础——实例，一看就懂

最新推荐文章于 2022-08-22 21:12:14 发布

Alimu0201

最新推荐文章于 2022-08-22 21:12:14 发布

阅读量158

点赞数

分类专栏： vue 文章标签： vue js filter

本文链接：https://blog.csdn.net/baidu_41349797/article/details/116523380

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文章介绍，vue组件基础使用：

vue实例的主要组成部分:

template data props methods watch computed filters $emit.

本文章主要介绍：

1.全局组件，局部组件的创建与使用。

2.slot插槽

3.父子-组件通信 props--$emit

4.全局，局部过滤器filters的创建与使用。

5.template data props methods watch computed filters $emit的使用。

先上代码，代码有详细注释，一看就懂：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实例</title>
    <script src="vue.js"></script>
    <script src="elementUI.js"></script>
    <link rel="stylesheet" href="elementUI.css">
</head>

<body>
    <div id="app">
    </div>
    <script>
        var Vhead = {
            template:
                '<div>我是头部组件</div>',
        }



        //全局组件的创建
        /*  Vue.component('Vbtn', {
              template:
                  '<button>click</button>'
          })

          //分局组件

          var Vside = {
              template:
                  '<div>我是侧部部组件</div>',
          }*/



        //slot  是个插槽，预留可插入位置

        Vue.component('Child2', {
            
//注意template的冒号 是键盘左上角' `~ '  slot  是个插槽，预留可插入位置
            template:
                `<el-button :type="type">
                <slot>  
                </slot> 
                </el-button > `,
            props: ['type'],
            data() {
                return {

                }
            },
            methods: {

            }
        })


        //----有名插槽----
        Vue.component('Child3', {
            //注意template的冒号 是键盘左上角' `~ '  slot  是个插槽，预留可插入位置
            template:
                `<ul>
                <li ><slot name="first"></slot>  </li> 
                <li> <slot name="second"></slot>  </li> 
                </ul> `,
            props: ['type'],
            data() {
                return {

                }
            },
            methods: {

            }
        })


/*父组件-》子组件
1.先在父组件绑定数据
2.在子组件用props接收数据
*/

        /*子组件-》父组件
        1.父组件绑定被触发的事件
        2.子组件 this.$emit('绑定的函数名')方式触发事件
        3.被触发的事件（函数）操作
        */
        Vue.component('Child', {
            props: ['childData'],
            data() {
                return {
                    newData: this.childData, //父组件传过来的数据用this.{{data}}获取
                }
            },
            template: `
            <div>
                我是子组件{{$attrs.nmsg}}
                <input v-model="newData"@input="changeData(newData)"></input>
            </div>
            `,

            methods: {
                changeData(newData) {
                    this.$emit('handleData', newData);  //emit传送事件
                }
            }
        })

        Vue.component('Parent', {
            data() {
                return {
                    msg: 'parent to child',
                }
            },
            props: ['nmsg'],
            //全局组件可直接用其有名的slot
            template:
                `<div>
                    我师父组件
                    <Child  v-bind="$attrs" v-on='$listeners' :childData="msg" @handleData="handledata"/>
                    <Child2 type="success">suc</Child2><Child2 type="primary">pri</Child2>
                    <Child3>
                    <h2 slot="second">i am the fist one!</h2>
                    <h2 slot="first">i am the second one!</h2>
                    </Child3>
                </div>
                `,
            methods: {

                handledata(val) {
                    console.log(val);
                }
            }


        })

        //过滤器
        /*
        1.局部过滤器
        2.全局过滤器
        */


        //全局过滤器的声明，
        Vue.filter('myFilter1', (val, args) => {
            return args + val.split('').reverse().join('');
        })

        //watch监听器的使用

        //声明组件
        var App = {

            data() {
                return {
                    price: 0,
                    msg: 'hello',
                    obj: { "name": "guest", "age": 25 },
                    arr: [1, 2, 3, 4, 5],
                    curIndex: 0,
                    nmsg: 'ffff'
                }
            },


            //----过滤器的调用-----用的时候可传参
            template:
                `
                <div>
                    <input type="number" v-model="price" />
                    <p>{{price|myFilter}}</p>
                    <p>{{msg|myFilter1('fuck')}}</p>
                    <Vhead />
                    <div>
                        <Parent :nmsg="nmsg"/>
                    </div>
                    <p @click="changeObj">changeObj</p>
                    <p>{{getCurData}}</p>
                    <el-button type="success">next</el-button>
                    <div v-for="(item,index) in arr"@click="changeCurIndex(index)">
                    <p :class='{active:curIndex==index}'>{{item}}</p>
                    </div>
                </div>`,

            //:class='{active:curIndex==index}   若当前curIndex   =  被触发的index  //{active:true} 即生效
            components: {
                Vhead
            },
            methods: {
                changeObj(obj) {

                    this.obj = { "name": 'dd', "age": 23 };

                },
                changeCurIndex(index) {
                    this.curIndex = index;
                    console.log(this.curIndex);
                }
                /*  changeCurIndex(index) {
  
                      this.getCurData = index; //set
                      console.log(this.getCurData);//get
                  }*/
            },


            //1.局部过滤器
            /*
            1.声明过滤器filter
            2.{{data / filter name}} --使用
            */
            filters: {
                myFilter: (val) => {
                    return '￥' + val;
                }
            },

            watch: {
                //普通监听
                price: (nval, oval) => {   //被监听的属性：function（newVal,oldval）two args
                    console.log(Number(nval) + Number(oval));
                },

                //深度监听 object,array
                obj: {
                    deep: true,//深度
                    handler: (nval, oval) => { //handler必须写是个方法
                        console.log(nval.age, oval.age);
                    }
                }
            },
            computed: {

                //改变属性值
                getCurData() {//getCurData是计算后的结果，也监听数据的改变
                    //计算属性默认有getter
                    return this.arr[this.curIndex];
                }

                //因为包含两个方法所以是个大的object
                /*   getCurData: {
   
                       set: (val) => {
                           console.log(val);
                           this.curIndex = val;
                       },
                       get: () => {
                           return this.arr[this.curIndex];
   
                       }
                   }*/
                //setter
            }
        }

        //vue实例
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            //挂根组件
            components: {
                App
            },
            //使用 App根组件
            template: `<App />`
        })

    </script>
    <style>
        .active {
            background-color: rgb(173, 41, 41);
        }
    </style>
</body>

</html>

希望对你有帮助！