Vue 全局配置和组件进阶

最新推荐文章于 2022-10-31 10:04:09 发布

看云清雾淡

最新推荐文章于 2022-10-31 10:04:09 发布

阅读量1k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_53366282/article/details/124238011

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

全局配置

Vue.config.productionTip: 打开或关闭生产信息提示信息，默认为打开状态

Vue.config.silent: silent可以取消Vue日志和警告，silent默认值为false，开启警告功能

Vue.config.devtools:表示打开或关闭vue-devtools调试工具，默认值为true 表示vue-devtools工具可用

全局配置

Vue.config.productionTip: 打开或关闭生产信息提示信息，默认为打开状态

Vue.config.silent: silent可以取消Vue日志和警告，silent默认值为false，开启警告功能

Vue.config.devtools:表示打开或关闭vue-devtools调试工具，默认值为true 表示vue-devtools工具可用

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>

    <script>
        // Vue.config.productionTip: 打开或关闭生产信息提示信息，默认为打开状态
        Vue.config.productionTip = false;

        // Vue.config.silent: silent可以取消Vue日志和警告，silent默认值为false，开启警告功能
        Vue.config.silent = true;

        // Vue.config.devtools:表示打开或关闭vue-devtools调试工具，默认值为true 表示vue-devtools工具可用
        Vue.config.devtools = false;

        var vm = new Vue({
            el:'#app',
            data:{
                msg:'数据'
            }
        })
    </script>

</body>
</html>

组件进阶

render

createElement

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component>成功渲染</my-component>
    </div>

    <script>
        /**
         * render是作用于组件中
         * 组件可以使用templet构造html模板，只是写html标签页面，但是缺乏可编程性
         * 我们还可以不实用templet，而使用render去js编程的构造页面
         * render可编程的创建父组件中的子组件，可以通过createElement函数，创建标签
         * 可编程组件页面，实际上是试用render函数替代了template去构造页面
         */
        Vue.component('myComponent',{
            render(createElement){
                return createElement('p',{
                    style:{
                        color: 'red',
                        fontSize: '16px',
                        backgroundColor: '#eee'
                    }
                },this.$slots.default)
            }
        })

        var vm = new Vue({
            el:'#app',
            data:{
                msg:"数据"
            }
        })
    </script>

</body>
</html>

mixins

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>

    <script>
        /**
         *  mixins 局部混入
         * mixins对象可以包含任何组件选项，将定义的mixins对象引入组件中即可使用，
         * mixins中的所有选项将会混入到组件自己的选项中。
         * 1、局部混入时，data中的变量，组件中的变量更优先。（混入中的同名变量无效）
         * 2、如果有相同的钩子函数，都会执行，先执行混入的钩子函数，后执行组件中的钩子函数
         * 3、methods与data相同，会覆盖混入的methods与data，混入的失效，只执行组件中同名的。（其中也包括其他选项：computed、watch等等）
         * 复用的好处：将重复的代码提取出来。会使得我们的代码更简洁，使得我们阅读起来更清晰。
         */
        // 定义myMixin对象
        var myMixin ={
            created(){this.hello()},
            methods:{
                hello(){
                    console.log('hello from mixin')
                }
            },
            data(){
                return {msg:"minx data"}
            }
        }
        var Component1 = Vue.extend({
            mixins: [myMixin],
            data(){
                return {msg:"abc"}
            },
            methods:{
                hello(){
                    console.log('Component1 methods hello')
                }
            },
            created(){
                console.log('Component1 created')
            }
        })
        var Component2 = Vue.extend({
            mixins: [myMixin],
            data(){
                return {msg:"123"}
            }
        })
        var Component3 = Vue.extend({
            data(){
                return {msg:"123"}
            }
        })
        
        var vm1 = new Component1({
            el:'#app'
        })
        // var vm = new Vue({
        //     el:'#app',
        //     data:{
        //         msg:"数据"
        //     }
        // })
    </script>

</body>
</html>

看云清雾淡

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 全局配置和组件进阶

目录全局配置Vue.config.productionTip: 打开或关闭生产信息提示信息，默认为打开状态Vue.config.silent: silent可以取消Vue日志和警告，silent默认值为false，开启警告功能Vue.config.devtools:表示打开或关闭vue-devtools调试工具，默认值为true 表示vue-devtools工具可用组件进阶rendercreateElementmixins全局配置Vue.config.prod
复制链接

扫一扫