Vue组件及路由

1. Vue组件的注册与挂载流程
组件是可重复的Vue实例.组件分全局组件和局部组件.
全局组件: 使用Vue.component创建是全局注册的. 它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
<body>
    <div class="root">
        <!-- 调用全局组件 -->
        <my-button></my-button>
    </div>
    <div class="app">
        <!-- 调用全局组件 -->
        <my-button></my-button>
    </div>
    <script>
        // 定义一个全局组件
        Vue.component('my-button', {
            template: `<Button type="">{{name}}</Button>`,
            data() {
                return {
                    name: "php.cn"
                }
            },
        });
        new Vue({
            el: '.root',
        });
        new Vue({
            el: '.app',
        });
    </script>
</body>
局部组件: 通过Vue实例components选项定义的组件是局部注册的.局部组件只可在创建它的实例中使用. 其它实例中无效.
<body>
    <div class="app1">
        <my-tag :my-name="msg"></my-tag>
    </div>
    <hr>
    <div class="app2">
        <my-tag :my-name="msg"></my-tag>
    </div>
    <script>
        new Vue({
            el: '.app1',
            data() {
                return {
                    msg: '这是一个app1局部组件',
                }
            },
            components: {
                myTag: {
                    props: ['myName'],
                    template: `<p>{{myName}}</p>`,
                }
            }
        })
        new Vue({
            el: '.app2',
            data() {
                return {
                    msg: '这是一个app2局部组件',
                }
            },
        })
    </script>
</body>
组件注册的几种方法
在Vue实例内部
通过创建一个变量
通过template标签,通过id引用
<body>
    <div class="app1">
        <my-tag></my-tag>
        <hr>
        <my-btn></my-btn>
        <hr>
        <my-table></my-table>
    </div>
    <template id="myTable">
        <div>
            {{tableName}}
        </div>
    </template>
    <script>
        // 创建一个对象
        const btn = {
            template: `<Button type="text">{{btnName}}</Button>`,
            data() {
                return {
                    btnName: '变量创建'
                }
            },
        };
        new Vue({
            el: '.app1',
            components: {
                // 直接内部创建
                myTag: {
                    data() {
                        return {
                            myName: '实例内部创建'
                        }
                    },
                    template: `<p>{{myName}}</p>`,
                },
                // 调用对象
                myBtn: btn,
                // 使用template标签
                myTable: {
                    data() {
                        return {
                            tableName: 'template标签创建'
                        }
                    },
                    template: '#myTable',
                }
            }
        })
    </script>
</body>
组件间的通信
父组件向子组件, 子组件通过props属性,props是一个数组.
<body>
    <div class="app">
        <!-- 父组件把user变量绑定到user2属性上 -->
        <user-list v-for="(user, index) in users" :key="index" :user2="user"></user-list>
    </div>
    <script>
        new Vue({
            el: '.app',
            data() {
                return {
                    users: [
                        { id: 1, name: '张三', email: 'zs@qq.com' },
                        { id: 2, name: '李四', email: 'ls@qq.com' },
                        { id: 3, name: '王五', email: 'ww@qq.com' },
                    ]
                }
            },
            components: {
                userList: {
                    // 通过props获得父组件的user2属性
                    props: ['user2'],
                    template: `<li>{{user2.name}},{{user2.email}}</li>`,
                }
            }
        })
    </script>
</body>
子组件向父组件, 子组件通过$emit - $emit(‘父组件自定义方法’,附加参数) 方法来触发父组件的一个事件
<body>
    <div class="app">
        <!-- 父组件自定义方法btn,btn绑定函数mySum -->
        <my-vol :name='name' :count='count' @btn='mySum'></my-vol>
    </div>
    <script>
        new Vue({
            el: '.app',
            data() {
                return {
                    name: "php中文网",
                    count: 0,
                }
            },
            components: {
                myVol: {
                    props: ['name', 'count'],
                    template: `
                    <div>
                        <p>{{name}}</p>
                        <!--通过$emit引用父组件的btn方法,可传参1-->
                        <button @click="$emit('btn',1)">{{count}}</button>
                    </div>
                    `,
                }
            },
            methods: {
                mySum: function ($event) {
                    this.count += $event;
                    console.log(this.count);
                }
            },
        })
    </script>
</body>
2. 路由原理与注册流程
通过改变 URL，在不重新请求页面的情况下，更新页面视图
Vue的路由实现：hash模式 和 history模式
1）hash模式的实现原理
location.hash 的值就是 URL 中 # 后面的内容。
URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。
2）history模式的实现原理
HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。
pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。
html
    <div class="root">
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/news">新闻</router-link>
        <router-link to="/articles">软件</router-link>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
js
        // 定义组件
        let news = {
            template: `
            <div>
                <dl><dd style="display: block;width: 100%; overflow: hidden;"><a href="/toutiao-409221.html" target="_blank" title="php中文网原创视频：《天龙八部》公益php培训系列课程汇总！" style="white-space:nowrap">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a></dd>
                <dd style="display: block;width: 100%; overflow: hidden;"><a href="/toutiao-409169.html" target="_blank" title="php中文网《玉女心经》公益PHP WEB培训系列课程汇总" style="white-space:nowrap">php中文网《玉女心经》公益PHP WEB培训系列课程汇总</a></dd></dl>
            </div>
            `,
        }
        let articles = {
            template: `
            <ul><li><span>03-02</span><a title="phpStudio集成环境（支持php8，php中文网学习专用）" href="/xiazai/gongju/1532" target="_blank">phpStudio集成环境（支持php8，php中文网学习专用）</a></li>
            <li><span>01-17</span><a title="小皮面板（phpStudy for Linux 服务器运维管理面板）" href="/xiazai/gongju/1528" target="_blank">小皮面板（phpStudy for Linux 服务器运维管理面板）</a></li>
            <li><span>01-16</span><a title="VSCode Windows 64位 下载" href="/xiazai/gongju/1527" target="_blank">VSCode Windows 64位 下载</a></li><li><span>10-26</span><a title="Memcached Win64位系统 1.4.4版本" href="/xiazai/gongju/1525" target="_blank">Memcached Win64位系统 1.4.4版本</a></li></ul>
            `,
        }
        // 创建路由实例
        let router = new VueRouter({
            routes: [
                { path: '/news', component: news },
                { path: '/articles', component: articles }
            ]
        })
        // 创建Vue实例 挂载路由
        new Vue({
            el: '.root',
            router: router,
        })
相关文章
