vue学习（四）—vue实例和内部组件

最新推荐文章于 2024-08-04 12:47:40 发布

晓果博客

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量4.5k

点赞数

分类专栏： vue.js 文章标签： vue2.0

本文链接：https://blog.csdn.net/huangxiaoguo1/article/details/79746613

版权

vue.js 专栏收录该内容

35 篇文章 5 订阅

订阅专栏

vue实例（jquery使用，外部调用vue作用域里面的方法）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue实例</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
    </head>
    <body>
        <h1>vue实例</h1>
        <hr />
        <div class="app">
            {{message}}
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:'.app',
                data:{
                    message:'hello world!'
                },
                /**
                 * 被挂载之后
                 * jquery必须在被挂载之后才能使用
                 */
                mounted:function(){
                    $('.app').html("Jquery写的");
                },
                methods:{
                    add:function(){
                        console.log("外部调用了此方法！");
                    }
                }
            });
            //外部调用里面的方法
            app.add();
        </script>
    </body>
</html>

实例方法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>实例方法</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>实例方法</h1>
        <hr />
        <div class="app">

        </div>

        <p><button onclick="destroy()">卸载</button></p>
        <p><button onclick="relaod()">刷新</button></p>
        <p><button onclick="tick()">更改数据</button></p>
        <script type="text/javascript">
            var huang = Vue.extend({
                template: `<p>{{message}}</p>`,
                data: function() {
                    return {
                        message: 'hello  huang'
                    }
                },
                mounted: function() {
                    console.log("挂载完成");
                },
                destroyed: function() {
                    console.log("销毁之后");
                },
                updated: function() {
                    console.log("被更新后");
                }
            });
            //挂载方法
            var vm = new huang().$mount('.app');

            function destroy() {
                /**
                 * 销毁方法
                 * :$destroy()后边必须要有括号，没有括号是无用的。
                 */
                vm.$destroy();
            };
            //更新方法
            function relaod() {
                vm.$forceUpdate();
            };
            // 数据修改方法
            function tick() {
                vm.message = "update message info ";
                vm.$nextTick(function() {
                    console.log('message更新完后我被调用了');
                })
            }
        </script>
    </body>

</html>

实例事件（ $on事件，$ once，$off）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>实例事件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>实例事件</h1>
        <hr />
        <div class="app">
            {{num}}
            <p><button @click="add">add</button></p>
        </div>

        <p><button onclick="reduce()">reduce</button></p>
        <p><button onclick="reduceOnce()">执行一次</button></p>
        <p><button onclick="off()">关闭事件</button></p>

        <script type="text/javascript">
            var app = new Vue({
                el: '.app',
                data: {
                    num: 1
                },
                methods: {
                    add: function() {
                        this.num++;
                    }
                }
            });
            /**
             * $on事件（主要都是在外部执行）
             */
            app.$on('reduce', function() {
                console.log("执行reduce方法")
                this.num--;
            });

            function reduce() {
                app.$emit('reduce');
            };

            app.$once('reduceOnce', function() {
                console.log('只执行一次的方法');
                this.num--;

            });

            function reduceOnce() {
                app.$emit('reduceOnce');
            };

            //关闭事件
            function off() {
                app.$off('reduce');
            }
        </script>
    </body>

</html>

内置组件 -slot讲解（重要模板传值调用）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>内置组件 -slot讲解（模板传值调用）</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>内置组件 -slot讲解（模板传值调用）</h1>
        <hr />
        <div class="app">
            <huang>
                <!--
                    这里使用slot向模板传值
                -->
                <span slot='bolgUrl'>{{huangData.bolgUrl}}</span>
                <span slot='netName'>{{huangData.netName}}</span>
                <span slot='shill'>{{huangData.shill}}</span>
            </huang>
        </div>

        <!--这里只能使用id不能使用class-->
        <template id="tep">
            <!--这里必须要一个div，不然报错-->
            <div>
                <p>博客地址:
                    <!--
                        这里使用slot在模板里面接收值
                    -->
                    <slot name='bolgUrl'></slot>
                </p>
                <p>网名:
                    <slot name='netName'></slot>
                </p>
                <p>技术:
                    <slot name='shill'></slot>
                </p>
            </div>
        </template>
        <script type="text/javascript">
            var huang = {
                template: '#tep'
            }
            var app = new Vue({
                el: '.app',
                data: {
                    huangData: {
                        bolgUrl: 'https://blog.csdn.net/huangxiaoguo1',
                        netName: '晓果博客',
                        shill: 'android,前端'
                    }
                },
                components: {
                    "huang": huang
                }
            })
        </script>
    </body>

</html>

全局组件使用

在main.js中申明：

这里写图片描述

在任意地方可以使用：

这里写图片描述

父组件传值子组件

传值：

<template>
  <div class="hello">
    <header-vue textName='头部'></header-vue>
    <body-vue :textTwo='text'></body-vue>
    <footer-vue></footer-vue>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      text: "数据"
    };
  }
};
</script>

接收：

<template>
    <div class="hello">
        我是头 {{textName}}
        <button @click="show">js获取父组件的值</button>
    </div>
</template>

<script>
export default {
  name: "header",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  //   接收父组件值参数的设置
  props: ["textName"],

  //js获取父组件的值
  methods:{
      show(){
          alert(this.textName);
      }
  }
};
</script>