Vue组件及路由

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