简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Vue组件及路由
Blogger Information
Blog 52
fans 1
comment 1
visits 38632
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue组件及路由
小丑0o鱼
Original
438 people have browsed it
  1. 1. Vue组件的注册与挂载流程
  2. 组件是可重复的Vue实例.组件分全局组件和局部组件.
  4. 全局组件: 使用Vue.component创建是全局注册的. 它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
  7. <body>
  8.     <div class="root">
  9.         <!-- 调用全局组件 -->
  10.         <my-button></my-button>
  11.     </div>
  12.     <div class="app">
  13.         <!-- 调用全局组件 -->
  14.         <my-button></my-button>
  15.     </div>
  16.     <script>
  17.         // 定义一个全局组件
  18.         Vue.component('my-button', {
  19.             template: `<Button type="">{{name}}</Button>`,
  20.             data() {
  21.                 return {
  22.                     name: "php.cn"
  23.                 }
  24.             },
  25.         });
  26.         new Vue({
  27.             el: '.root',
  28.         });
  29.         new Vue({
  30.             el: '.app',
  31.         });
  32.     </script>
  33. </body>
  34. 局部组件: 通过Vue实例components选项定义的组件是局部注册的.局部组件只可在创建它的实例中使用. 其它实例中无效.
  37. <body>
  38.     <div class="app1">
  39.         <my-tag :my-name="msg"></my-tag>
  40.     </div>
  41.     <hr>
  42.     <div class="app2">
  43.         <my-tag :my-name="msg"></my-tag>
  44.     </div>
  45.     <script>
  46.         new Vue({
  47.             el: '.app1',
  48.             data() {
  49.                 return {
  50.                     msg: '这是一个app1局部组件',
  51.                 }
  52.             },
  53.             components: {
  54.                 myTag: {
  55.                     props: ['myName'],
  56.                     template: `<p>{{myName}}</p>`,
  57.                 }
  58.             }
  59.         })
  60.         new Vue({
  61.             el: '.app2',
  62.             data() {
  63.                 return {
  64.                     msg: '这是一个app2局部组件',
  65.                 }
  66.             },
  67.         })
  68.     </script>
  69. </body>
  70. 组件注册的几种方法
  71. 在Vue实例内部
  72. 通过创建一个变量
  73. 通过template标签,通过id引用
  75. <body>
  76.     <div class="app1">
  77.         <my-tag></my-tag>
  78.         <hr>
  79.         <my-btn></my-btn>
  80.         <hr>
  81.         <my-table></my-table>
  82.     </div>
  83.     <template id="myTable">
  84.         <div>
  85.             {{tableName}}
  86.         </div>
  87.     </template>
  88.     <script>
  89.         // 创建一个对象
  90.         const btn = {
  91.             template: `<Button type="text">{{btnName}}</Button>`,
  92.             data() {
  93.                 return {
  94.                     btnName: '变量创建'
  95.                 }
  96.             },
  97.         };
  98.         new Vue({
  99.             el: '.app1',
  100.             components: {
  101.                 // 直接内部创建
  102.                 myTag: {
  103.                     data() {
  104.                         return {
  105.                             myName: '实例内部创建'
  106.                         }
  107.                     },
  108.                     template: `<p>{{myName}}</p>`,
  109.                 },
  110.                 // 调用对象
  111.                 myBtn: btn,
  112.                 // 使用template标签
  113.                 myTable: {
  114.                     data() {
  115.                         return {
  116.                             tableName: 'template标签创建'
  117.                         }
  118.                     },
  119.                     template: '#myTable',
  120.                 }
  121.             }
  122.         })
  123.     </script>
  124. </body>
  125. 组件间的通信
  126. 父组件向子组件, 子组件通过props属性,props是一个数组.
  128. <body>
  129.     <div class="app">
  130.         <!-- 父组件把user变量绑定到user2属性上 -->
  131.         <user-list v-for="(user, index) in users" :key="index" :user2="user"></user-list>
  132.     </div>
  133.     <script>
  134.         new Vue({
  135.             el: '.app',
  136.             data() {
  137.                 return {
  138.                     users: [
  139.                         { id: 1, name: '张三', email: 'zs@qq.com' },
  140.                         { id: 2, name: '李四', email: 'ls@qq.com' },
  141.                         { id: 3, name: '王五', email: 'ww@qq.com' },
  142.                     ]
  143.                 }
  144.             },
  145.             components: {
  146.                 userList: {
  147.                     // 通过props获得父组件的user2属性
  148.                     props: ['user2'],
  149.                     template: `<li>{{user2.name}},{{user2.email}}</li>`,
  150.                 }
  151.             }
  152.         })
  153.     </script>
  154. </body>
  155. 子组件向父组件, 子组件通过$emit - $emit(‘父组件自定义方法’,附加参数) 方法来触发父组件的一个事件
  158. <body>
  159.     <div class="app">
  160.         <!-- 父组件自定义方法btn,btn绑定函数mySum -->
  161.         <my-vol :name='name' :count='count' @btn='mySum'></my-vol>
  162.     </div>
  163.     <script>
  164.         new Vue({
  165.             el: '.app',
  166.             data() {
  167.                 return {
  168.                     name: "php中文网",
  169.                     count: 0,
  170.                 }
  171.             },
  172.             components: {
  173.                 myVol: {
  174.                     props: ['name', 'count'],
  175.                     template: `
  176.                     <div>
  177.                         <p>{{name}}</p>
  178.                         <!--通过$emit引用父组件的btn方法,可传参1-->
  179.                         <button @click="$emit('btn',1)">{{count}}</button>
  180.                     </div>
  181.                     `,
  182.                 }
  183.             },
  184.             methods: {
  185.                 mySum: function ($event) {
  186.                     this.count += $event;
  187.                     console.log(this.count);
  188.                 }
  189.             },
  190.         })
  191.     </script>
  192. </body>
  193. 2. 路由原理与注册流程
  194. 通过改变 URL，在不重新请求页面的情况下，更新页面视图
  195. Vue的路由实现：hash模式 和 history模式
  196. 1）hash模式的实现原理
  197. location.hash 的值就是 URL 中 # 后面的内容。
  198. URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
  199. hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
  200. 可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
  201. 我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。
  202. 2）history模式的实现原理
  203. HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。
  204. pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
  205. 我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
  206. history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。
  211. html
  212.     <div class="root">
  213.         <!-- 使用 router-link 组件来导航. -->
  214.         <!-- 通过传入 `to` 属性指定链接. -->
  215.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  216.         <router-link to="/news">新闻</router-link>
  217.         <router-link to="/articles">软件</router-link>
  218.         <!-- 路由出口 -->
  219.         <!-- 路由匹配到的组件将渲染在这里 -->
  220.         <router-view></router-view>
  221.     </div>
  222. js
  223.         // 定义组件
  224.         let news = {
  225.             template: `
  226.             <div>
  227.                 <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>
  228.                 <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>
  229.             </div>
  230.             `,
  231.         }
  232.         let articles = {
  233.             template: `
  234.             <ul><li><span>03-02</span><a title="phpStudio集成环境（支持php8，php中文网学习专用）" href="/xiazai/gongju/1532" target="_blank">phpStudio集成环境（支持php8，php中文网学习专用）</a></li>
  235.             <li><span>01-17</span><a title="小皮面板（phpStudy for Linux 服务器运维管理面板）" href="/xiazai/gongju/1528" target="_blank">小皮面板（phpStudy for Linux 服务器运维管理面板）</a></li>
  236.             <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>
  237.             `,
  238.         }
  239.         // 创建路由实例
  240.         let router = new VueRouter({
  241.             routes: [
  242.                 { path: '/news', component: news },
  243.                 { path: '/articles', component: articles }
  244.             ]
  245.         })
  246.         // 创建Vue实例 挂载路由
  247.         new Vue({
  248.             el: '.root',
  249.             router: router,
  250.         })
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！